This plugin will take the URI segment of the URL and split it into links based on directory names. This is not the most attractive method of doing this, but is very useful when trying to add breadcrumbs to older websites that have a good document hierarchy.<\/p>\n
\/*\r\n\u00a0 Generate breadcrumbs based on URI\r\n*\/\r\n(function( $ ){\r\n\u00a0 $.fn.breadCrumb = function( options ) {\r\n\u00a0\u00a0 \u00a0\u00a0 \/\/---------------------------------------------------------------\r\n\u00a0\u00a0 \u00a0\u00a0 \/\/ jQuery breadCrumb v0.1\r\n\u00a0\u00a0 \u00a0\u00a0 \/\/---------------------------------------------------------------\r\n\u00a0\u00a0 \u00a0\u00a0 var $obj = this;\r\n\u00a0\u00a0 \u00a0\u00a0 var settings = {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 'home'\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0: \"Home\",\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 'seperator'\u00a0\u00a0 \u00a0: \">\",\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 'title'\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0: document.title\r\n\u00a0\u00a0 \u00a0\u00a0 };\r\n\u00a0\u00a0 \u00a0\u00a0 var settings = $.extend(settings, options);\r\n\u00a0\u00a0 \u00a0\u00a0 var $trail = \"\";\r\n\u00a0\u00a0 \u00a0\u00a0 var $path = document.location.pathname.replace(\/%20\/gi, \" \");\r\n\u00a0\u00a0 \u00a0\u00a0 var $originalContents = $obj.html();\r\n\u00a0\u00a0 \u00a0\u00a0 var $title = settings.title;\r\n\u00a0\u00a0 \u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\/\/each implementation\r\n\u00a0\u00a0 \u00a0this.each(function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$directories = $path.split(\"\/\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$directories[0] = settings.home;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0pathRebuild = \"\/\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/first breadcrumb is link to home\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$trail += '<a href=\"\/\">' + settings.home + '<\/a> ' + settings.seperator + \" \";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/loop through subsequent directories skipping the top level document\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0for ( i = 1; i < $directories.length - 1; i++ ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0pathRebuild += $directories[i] + '\/';\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$trail += '<a href=\"' + pathRebuild + '\">' + $directories[i] + '<\/a> ' + settings.seperator + \" \";\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/$obj.html($trail + $originalContents);\u00a0\u00a0 \u00a0\/\/alternative\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$obj.html($trail + $title);\u00a0\u00a0 \u00a0\/\/use document title\r\n\u00a0\u00a0 \u00a0});\r\n\u00a0 }\r\n})( jQuery );<\/pre>\nUsage<\/h2>\n
Under your jQuery $(document).ready statement, use the following to initialize the breadcrumb trail into the DOM Object of your choosing. In this case we are using an element with id=”jquery-breadcrumb”<\/p>\n
$(\"#jquery-breadcrumb\").breadCrumb({'home':'Website Name'});<\/pre>\nLive Demo<\/h2>\n
http:\/\/jsfiddle.net\/BamA8\/<\/p>\n<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
This plugin will take the URI segment of the URL and split it into links based on directory names. This is not the most attractive method of doing this, but is very useful when trying to add breadcrumbs to older … Continue reading