| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | <!DOCTYPE html> |
| A | 2 | <!--[if lt IE 7]> <html lang="en" class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> |
| 3 | <!--[if IE 7]> <html lang="en" class="lt-ie9 lt-ie8"> <![endif]--> | |
| 4 | <!--[if IE 8]> <html lang="en" class="lt-ie9"> <![endif]--> | |
| 5 | <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]--> | |
| 6 | <!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]--> | |
| 7 | <head> | |
| 8 | <meta charset="utf-8"> | |
| 9 | <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> | |
| 10 | <title>Nestable</title> | |
| 11 | <style type="text/css"> | |
| 12 | ||
| 13 | .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } | |
| 14 | * html .cf { zoom: 1; } | |
| 15 | *:first-child+html .cf { zoom: 1; } | |
| 16 | ||
| 17 | html { margin: 0; padding: 0; } | |
| 18 | body { font-size: 100%; margin: 0; padding: 1.75em; font-family: 'Helvetica Neue', Arial, sans-serif; } | |
| 19 | ||
| 20 | h1 { font-size: 1.75em; margin: 0 0 0.6em 0; } | |
| 21 | ||
| 22 | a { color: #2996cc; } | |
| 23 | a:hover { text-decoration: none; } | |
| 24 | ||
| 25 | p { line-height: 1.5em; } | |
| 26 | .small { color: #666; font-size: 0.875em; } | |
| 27 | .large { font-size: 1.25em; } | |
| 28 | ||
| 29 | ||
| 30 | ||
| 31 | </style> | |
| 32 | </head> | |
| 33 | <body> | |
| 34 | ||
| 35 | <h1>Nestable</h1> | |
| 36 | ||
| 37 | <p>Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin)</p> | |
| 38 | ||
| 39 | <p><strong><a href="https://github.com/dbushell/Nestable">Code on GitHub</a></strong></p> | |
| 40 | ||
| 41 | <menu id="nestable-menu"> | |
| 42 | <button type="button" data-action="expand-all">Expand All</button> | |
| 43 | <button type="button" data-action="collapse-all">Collapse All</button> | |
| 44 | </menu> | |
| 45 | ||
| 46 | <div class="cf nestable-lists"> | |
| 47 | ||
| 48 | <div class="dd" id="nestable"> | |
| 49 | <ol class="dd-list"> | |
| 50 | <li class="dd-item" data-id="1"> | |
| 51 | <div class="dd-handle">Item 1</div> | |
| 52 | </li> | |
| 53 | <li class="dd-item" data-id="2"> | |
| 54 | <div class="dd-handle">Item 2</div> | |
| 55 | <ol class="dd-list"> | |
| 56 | <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li> | |
| 57 | <li class="dd-item" data-id="4"><div class="dd-handle">Item 4</div></li> | |
| 58 | <li class="dd-item" data-id="5"> | |
| 59 | <div class="dd-handle">Item 5</div> | |
| 60 | <ol class="dd-list"> | |
| 61 | <li class="dd-item" data-id="6"><div class="dd-handle">Item 6</div></li> | |
| 62 | <li class="dd-item" data-id="7"><div class="dd-handle">Item 7</div></li> | |
| 63 | <li class="dd-item" data-id="8"><div class="dd-handle">Item 8</div></li> | |
| 64 | </ol> | |
| 65 | </li> | |
| 66 | <li class="dd-item" data-id="9"><div class="dd-handle">Item 9</div></li> | |
| 67 | <li class="dd-item" data-id="10"><div class="dd-handle">Item 10</div></li> | |
| 68 | </ol> | |
| 69 | </li> | |
| 70 | <li class="dd-item" data-id="11"> | |
| 71 | <div class="dd-handle">Item 11</div> | |
| 72 | </li> | |
| 73 | <li class="dd-item" data-id="12"> | |
| 74 | <div class="dd-handle">Item 12</div> | |
| 75 | </li> | |
| 76 | </ol> | |
| 77 | </div> | |
| 78 | ||
| 79 | <div class="dd" id="nestable2"> | |
| 80 | <ol class="dd-list"> | |
| 81 | <li class="dd-item" data-id="13"> | |
| 82 | <div class="dd-handle">Item 13</div> | |
| 83 | </li> | |
| 84 | <li class="dd-item" data-id="14"> | |
| 85 | <div class="dd-handle">Item 14</div> | |
| 86 | </li> | |
| 87 | <li class="dd-item" data-id="15"> | |
| 88 | <div class="dd-handle">Item 15</div> | |
| 89 | <ol class="dd-list"> | |
| 90 | <li class="dd-item" data-id="16"><div class="dd-handle">Item 16</div></li> | |
| 91 | <li class="dd-item" data-id="17"><div class="dd-handle">Item 17</div></li> | |
| 92 | <li class="dd-item" data-id="18"><div class="dd-handle">Item 18</div></li> | |
| 93 | </ol> | |
| 94 | </li> | |
| 95 | </ol> | |
| 96 | </div> | |
| 97 | ||
| 98 | </div> | |
| 99 | ||
| 100 | <p><strong>Serialised Output (per list)</strong></p> | |
| 101 | ||
| 102 | <textarea id="nestable-output"></textarea> | |
| 103 | <textarea id="nestable2-output"></textarea> | |
| 104 | ||
| 105 | <p> </p> | |
| 106 | ||
| 107 | <div class="cf nestable-lists"> | |
| 108 | ||
| 109 | <p><strong>Draggable Handles</strong></p> | |
| 110 | ||
| 111 | <p>If you're clever with your CSS and markup this can be achieved without any JavaScript changes.</p> | |
| 112 | ||
| 113 | <div class="dd" id="nestable3"> | |
| 114 | <ol class="dd-list"> | |
| 115 | <li class="dd-item dd3-item" data-id="13"> | |
| 116 | <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 13</div> | |
| 117 | </li> | |
| 118 | <li class="dd-item dd3-item" data-id="14"> | |
| 119 | <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 14</div> | |
| 120 | </li> | |
| 121 | <li class="dd-item dd3-item" data-id="15"> | |
| 122 | <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 15</div> | |
| 123 | <ol class="dd-list"> | |
| 124 | <li class="dd-item dd3-item" data-id="16"> | |
| 125 | <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 16</div> | |
| 126 | </li> | |
| 127 | <li class="dd-item dd3-item" data-id="17"> | |
| 128 | <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 17</div> | |
| 129 | </li> | |
| 130 | <li class="dd-item dd3-item" data-id="18"> | |
| 131 | <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 18</div> | |
| 132 | </li> | |
| 133 | </ol> | |
| 134 | </li> | |
| 135 | </ol> | |
| 136 | </div> | |
| 137 | ||
| 138 | </div> | |
| 139 | ||
| 140 | <p class="small">Copyright © <a href="http://dbushell.com/">David Bushell</a> | Made for <a href="http://www.browserlondon.com/">Browser</a></p> | |
| 141 | ||
| 142 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| 143 | <script src="jquery.nestable.js"></script> | |
| 144 | <script> | |
| 145 | ||
| 146 | $(document).ready(function() | |
| 147 | { | |
| 148 | ||
| 149 | var updateOutput = function(e) | |
| 150 | { | |
| 151 | var list = e.length ? e : $(e.target), | |
| 152 | output = list.data('output'); | |
| 153 | if (window.JSON) { | |
| 154 | output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2)); | |
| 155 | } else { | |
| 156 | output.val('JSON browser support required for this demo.'); | |
| 157 | } | |
| 158 | }; | |
| 159 | ||
| 160 | // activate Nestable for list 1 | |
| 161 | $('#nestable').nestable({ | |
| 162 | group: 1 | |
| 163 | }) | |
| 164 | .on('change', updateOutput); | |
| 165 | ||
| 166 | // activate Nestable for list 2 | |
| 167 | $('#nestable2').nestable({ | |
| 168 | group: 1 | |
| 169 | }) | |
| 170 | .on('change', updateOutput); | |
| 171 | ||
| 172 | // output initial serialised data | |
| 173 | updateOutput($('#nestable').data('output', $('#nestable-output'))); | |
| 174 | updateOutput($('#nestable2').data('output', $('#nestable2-output'))); | |
| 175 | ||
| 176 | $('#nestable-menu').on('click', function(e) | |
| 177 | { | |
| 178 | var target = $(e.target), | |
| 179 | action = target.data('action'); | |
| 180 | if (action === 'expand-all') { | |
| 181 | $('.dd').nestable('expandAll'); | |
| 182 | } | |
| 183 | if (action === 'collapse-all') { | |
| 184 | $('.dd').nestable('collapseAll'); | |
| 185 | } | |
| 186 | }); | |
| 187 | ||
| 188 | $('#nestable3').nestable(); | |
| 189 | ||
| 190 | }); | |
| 191 | </script> | |
| 192 | </body> | |
| 193 | </html> | |
