Home » jQuery 外掛

[jQ]jBreadCrumb 1.1

範例 1
沒錯!只要 300 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!



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>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響