jBreadCrumb 可以把一般 ul li 元素轉換成網站導覽路徑標示(麵包屑)，同時還會隨著設定而縮小，當然啦~滑鼠移上去時還會有展開的動畫效果呢。
套件名稱：jBreadCrumb
套件網址：1.1
作者網站：http://www.comparenetworks.com/developers/jqueryplugins/jbreadcrumb.html
套件網址：N/A
發佈日期：2009-09-23
檔案大小：7.48 KB
檔案下載：jquery.jBreadCrumb.1.1.js BreadCrumb.css
引用檔案：jquery.easing.1.3.js
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | maxFinalElementLength(選填) 描述： 目前所在的網站導覽路徑標示名稱的最大寬度 預設值： 400 minFinalElementLength(選填) 描述： 目前所在的網站導覽路徑標示名稱的最小寬度 預設值： 200 minimumCompressionElements(選填) 描述： 若網站導覽路徑標示項目少於此值時, 可以直接完整顯示 預設值： 4 endElementsToLeaveOpen(選填) 描述： 除了目前所在的網站導覽路徑標示外, 預設要顯示後幾個網站導覽路徑標示 預設值： 1 beginingElementsToLeaveOpen(選填) 描述： 除了首頁之外, 預設要顯示前幾個網站導覽路徑標示 預設值： 1 timeExpansionAnimation(選填) 描述： 網站導覽路徑標示展開的速度(1000毫秒 = 1秒) 預設值： 800 timeCompressionAnimation(選填) 描述： 網站導覽路徑標示縮小的速度 預設值： 500 timeInitialCollapse(選填) 描述： 網頁載入後, 第一次網站導覽路徑標示縮小的速度 預設值： 600 easing(選填) 描述： 動畫緩衝效果 預設值： 若有引用 jquery.easing 則預設是 'easeOutQuad', 否則是 'swing' overlayClass(選填) 描述： 縮小時插入的 div 區塊所套用的樣式(預設會有一個箭頭) 預設值： 'chevronOverlay' previewWidth(選填) 描述： 縮小後的網站導覽路徑標示寬度 預設值： 5 |
方法說明：
檢視原始碼 JavaScript
1 2 | // 把指定的 ul li 元素轉換成 jBreadCrumb 效果 $(selector).jBreadCrumb(options); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <link type="text/css" rel="stylesheet" href="BreadCrumb.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jBreadCrumb.1.1.js"></script> <script type="text/javascript"> $(function(){ // 預設的 jBreadCrumb 效果 $('#breadCrumb0').jBreadCrumb(); // 展開全部網站導覽路徑標示的 jBreadCrumb 效果 $('#breadCrumb1').jBreadCrumb({ minimumCompressionElements: $('#breadCrumb1').find('li').length }); }); </script> <body> <h3>預設效果</h3> <div class="breadCrumbHolder module"> <div id="breadCrumb0" class="breadCrumb module"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">jQuery</a> </li> <li> <a href="#">jQuery 應用</a> </li> <li> <a href="#">jQuery 廣告 / jQuery 畫廊</a> </li> <li> <a href="#">開放源始碼</a> </li> <li> 交錯式百葉窗切換效果 </li> </ul> </div> </div> <h3>展開全部</h3> <div class="breadCrumbHolder module"> <div id="breadCrumb1" class="breadCrumb module"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">jQuery</a> </li> <li> <a href="#">jQuery 應用</a> </li> <li> <a href="#">jQuery 廣告 / jQuery 畫廊</a> </li> <li> <a href="#">開放源始碼</a> </li> <li> 交錯式百葉窗切換效果 </li> </ul> </div> </div> </body> |