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> |