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