Home » jQuery 外掛

[jQ]jQCloud 0.2.10

[ 日期： | 瀏覽：6,458 | 迴響：5 ]
範例 1
請協助我把這個效果加到我的網站 (只要 1,200 元)
沒錯!只要 1,200 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



jQCloud 是個可以將一堆標籤轉換成標籤雲的外掛套件，並提供各種靈活的設定來讓設計者能自訂標籤的樣式及標籤雲的形狀。

套件名稱：jQCloud
套件版本：0.2.10
作者網站：https://github.com/DukeLeNoir/jQCloud
套件網址：N/A
發佈日期：2012-01-16
檔案大小：8.34 KB
檔案下載：jqcloud-0.2.10.js jqcloud.css

標籤文字屬性說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

text(必填)
描述： 要顯示的標籤文字
 
weight(必填)
描述： 定義該標籤的重要性，可以把它當成權重來使用
 
url(選填)
描述： 若有設定時，則標籤會再用超鏈結包裹並可連到指定 url
 
title(選填)
描述： 若有設定時，則會再標籤上加入 title 屬性
 
callback(選填)
描述： 當轉換成標籤後執行的動作
 
customClass(選填)
描述： 要額外加到標籤上的 css 樣式
 
dataAttributes(選填)
描述： 要加到標籤的 data- 屬性及值。例如 {confirm: "Are you sure?", remote: true}
 
handlers(選填)
描述： 要綁定到標籤上的事件集。例如 {click: function() { alert("it works!"); } }

參數選項說明：

檢視原始碼 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

width(選填)
描述： 標籤雲所使用的寬度；預設會跟容器同寬
預設值： 容器寬
 
height(選填)
描述： 標籤雲所使用的高度；預設會跟容器同高
預設值： 容器高
 
center(選填)
描述： 指定標籤雲中心點座標。例如 {x: 300, y: 150}
預設值： 容器中心點
 
callback(選填)
描述： 當標籤雲產生完成後執行的動作
預設值： 無
 
delayedMode(選填)
描述： 如果設為 true 時，則每一個標籤都會一個一個加入到標籤雲中。這可以避免一次產生大量標籤所造成的效能問題。
預設值： word_array.length > 50
 
randomClasses(選填)
描述： 如果指定數字的話，則會隨機在每個標籤上加入 r+隨機數字 的樣式。若是陣列的話，則會隨機加入陣列中某一個值。
預設值： 0
 
nofollow(選填)
描述： 是否在超鏈結上加入 rel="nofollow"
預設值： false
 
shape(選填)
描述： 標籤雲預設的樣式為橢圓形(elliptic)，只要設定成 "rectangular" 則會變成矩形的樣式
預設值： false

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的 select 轉換成標籤雲
$(selector).jQCloud(word_array, 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
70

<link type="text/css" rel="stylesheet" href="jqcloud.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqcloud-0.2.10.js"></script>
<style type="text/css">
	/* 當標籤被套上 r1 時就把它轉成垂直 */
	div.jqcloud span.r1 {
		-webkit-writing-mode: vertical-rl;
		writing-mode: tb-rl;
	}
</style>
<script type="text/javascript">
	$(function(){
		var word_list = [
			{text: "jQuery", weight: 13, url: "http://jquery.com"},
			{text: "男丁格爾", weight: 11.5, url: "http://abgne.tw"},
			{text: "Android", weight: 10, url: "www.android.com/"},
			{text: "Dolor", weight: 9.4, url: "javascript:alert('JavaScript in URL is OK!');"},
			{text: "Sit", weight: 8},
			{text: "Amet", weight: 6.2},
			{text: "Consectetur", weight: 5},
			{text: "Adipiscing", weight: 5},
			{text: "Elit", weight: 5},
			{text: "Nam et", weight: 5},
			{text: "Leo", weight: 4},
			{text: "Sapien", weight: 4},
			{text: "Pellentesque", weight: 3},
			{text: "habitant", weight: 3},
			{text: "morbi", weight: 3},
			{text: "tristisque", weight: 3},
			{text: "senectus", weight: 3},
			{text: "et netus", weight: 3},
			{text: "et malesuada", weight: 3},
			{text: "fames", weight: 2},
			{text: "ac turpis", weight: 2},
			{text: "egestas", weight: 2},
			{text: "Aenean", weight: 2},
			{text: "vestibulum", weight: 2},
			{text: "elit", weight: 2},
			{text: "sit amet", weight: 2},
			{text: "metus", weight: 2},
			{text: "adipiscing", weight: 2},
			{text: "ut ultrices", weight: 2},
			{text: "justo", weight: 1},
			{text: "dictum", weight: 1},
			{text: "Ut et leo", weight: 1},
			{text: "metus", weight: 1},
			{text: "at molestie", weight: 1},
			{text: "purus", weight: 1},
			{text: "Curabitur", weight: 1},
			{text: "diam", weight: 1},
			{text: "dui", weight: 1},
			{text: "ullamcorper", weight: 1},
			{text: "id vuluptate ut", weight: 1},
			{text: "mattis", weight: 1},
			{text: "et nulla", weight: 1},
			{text: "Sed", weight: 1}
		];
 
		// 套用標籤雲並延遲載入標籤
		// 同時隨機幫每一個標籤加上 r1, r2, r3 的 className
		$("#my_favorite_latin_words").jQCloud(word_list, {
			delayedMode: true, 
			randomClasses: 3
		});
	});
</script>
 
<body>
	<div id="my_favorite_latin_words" style="width: 550px; height: 350px; border: 1px solid #ccc;"></div>
</body>
範例 1

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

5 筆針對 [jQ]jQCloud 0.2.10 的迴響

發表迴響