Home » jQuery 外掛

[jQ]Nestable

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

nestable-0

Nestable 是一個可以讓不同區塊中的清單能交互拖拉插入的外掛套件,通常會被用來當做像是選單階層功能使用。只要清單項目是符合它的結構的話,就算要產生 N 層也沒問題滴!

套件名稱:Nestable
套件網址:N/A
作者網站:https://github.com/dbushell/Nestable
套件網址:N/A
發佈日期:2013-02-12
檔案大小:17.5 KB
檔案下載:jquery.nestable.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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
group(選填)
描述: 用來指定允許交互拖放插入的群組
預設值: 0
 
maxDepth(選填)
描述: 最多允許有幾個階層
預設值: 5
 
threshold(選填)
描述: 
預設值: 20
 
listNodeName(選填)
描述: 要用來產生拖拉的元素
預設值: 'o1'
 
itemNodeName(選填)
描述: 要用來產生拖拉的元素項目
預設值: 'li'
 
rootClass(選填)
描述: 拖拉樣式的前綴
預設值: 'dd'
 
listClass(選填)
描述: 要用來產生拖拉的元素所套用的樣式
預設值: 'dd-list'
 
itemClass(選填)
描述: 要用來產生拖拉的元素項目所套用的樣式
預設值: 'dd-item'
 
dragClass(選填)
描述: 當元素被拖拉時所套用的樣式
預設值: 'dd-dragel'
 
handleClass(選填)
描述: 用來拖拉的控制項所套用的樣式
預設值: 'dd-handle'
 
collapsedClass(選填)
描述: 當元素項目有子元素可以展開時所套用的樣式
預設值: 'dd-collapsed'
 
placeClass(選填)
描述: 用來暫位用的元素所套用的樣式
預設值: 'dd-placeholder'
 
emptyClass(選填)
描述: 當元素中沒有任何可拖拉的元素項目時所套用的樣式
預設值: 'dd-empty'
 
expandBtnHTML(選填)
描述: 用來產生可以用來點擊展開用的按鈕
預設值: '<button data-action="expand" type="button">Expand</button>'
 
collapseBtnHTML(選填)
描述: 用來產生可以用來點擊收合用的按鈕
預設值: '<button data-action="collapse" type="button">Collapse</button>'

方法說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
// 將指定區塊中的元素轉換成可拖拉效果
$(selector).nestable(params);
 
// 取得指定區塊中的元素拖拉後的結構
$(selector).nestable('serialize');
 
// 展開指定區塊中的元素
$(selector).nestable('expandAll');
 
// 收合指定區塊中的元素
$(selector).nestable('collapseAll');

事件說明:

檢視原始碼 JavaScript
1
2
// 當指定區塊中的元素的位置被改變時
$(selector).on('change', fn);

HTML 結構:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="dd">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle">Item 3</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="4">
                    <div class="dd-handle">Item 4</div>
                </li>
                <li class="dd-item" data-id="5">
                    <div class="dd-handle">Item 5</div>
                </li>
            </ol>
        </li>
    </ol>
</div>

使用範例:

檢視原始碼 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.nestable.js"></script>
<style type="text/css">
/**
 * Nestable
 */
 
.dd { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; list-style: none; font-size: 13px; line-height: 20px; }
 
.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
.dd-list .dd-list { padding-left: 30px; }
.dd-collapsed .dd-list { display: none; }
 
.dd-item,
.dd-empty,
.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }
 
.dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:         linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
            border-radius: 3px;
    box-sizing: border-box; -moz-box-sizing: border-box;
}
.dd-handle:hover { color: #2ea8e5; background: #fff; }
 
.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
.dd-item > button[data-action="collapse"]:before { content: '-'; }
 
.dd-placeholder,
.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), 
                      -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image:    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), 
                         -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image:         linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), 
                              linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}
 
.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
.dd-dragel .dd-handle {
    -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
            box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}
 
.dd { float: left; width: 40%; margin-left: 2%; }
</style>
<script type="text/javascript">
	$(function(){
		// 讓 #nestable 及 #nestable2 為同一群組
		$('#nestable').nestable({
			group: 1
		});
 
		$('#nestable2').nestable({
			group: 1
		});
	});
</script>
 
<body>
	<div class="dd" id="nestable">
		<ol class="dd-list">
			<li class="dd-item" data-id="1">
				<div class="dd-handle">Item 1</div>
			</li>
			<li class="dd-item" data-id="2">
				<div class="dd-handle">Item 2</div>
				<ol class="dd-list">
					<li class="dd-item" data-id="3">
						<div class="dd-handle">Item 3</div>
					</li>
					<li class="dd-item" data-id="4">
						<div class="dd-handle">Item 4</div>
					</li>
					<li class="dd-item" data-id="5">
						<div class="dd-handle">Item 5</div>
						<ol class="dd-list">
							<li class="dd-item" data-id="6"><div class="dd-handle">Item 6</div></li>
							<li class="dd-item" data-id="7"><div class="dd-handle">Item 7</div></li>
							<li class="dd-item" data-id="8"><div class="dd-handle">Item 8</div></li>
						</ol>
					</li>
					<li class="dd-item" data-id="9"><div class="dd-handle">Item 9</div></li>
					<li class="dd-item" data-id="10"><div class="dd-handle">Item 10</div></li>
				</ol>
			</li>
			<li class="dd-item" data-id="11">
				<div class="dd-handle">Item 11</div>
			</li>
			<li class="dd-item" data-id="12">
				<div class="dd-handle">Item 12</div>
			</li>
		</ol>
	</div>
 
	<div class="dd" id="nestable2">
		<ol class="dd-list">
			<li class="dd-item" data-id="13">
				<div class="dd-handle">Item 13</div>
			</li>
			<li class="dd-item" data-id="14">
				<div class="dd-handle">Item 14</div>
			</li>
			<li class="dd-item" data-id="15">
				<div class="dd-handle">Item 15</div>
				<ol class="dd-list">
					<li class="dd-item" data-id="16">
						<div class="dd-handle">Item 16</div>
					</li>
					<li class="dd-item" data-id="17">
						<div class="dd-handle">Item 17</div>
					</li>
					<li class="dd-item" data-id="18">
						<div class="dd-handle">Item 18</div>
					</li>
				</ol>
			</li>
		</ol>
	</div>
</body>
範例 1

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

發表迴響