%PDF- %PDF-
Direktori : /home/tojsat/public_html/huseyineski/assets/nestable/ |
Current File : /home/tojsat/public_html/huseyineski/assets/nestable/index.html |
<!DOCTYPE html> <!--[if lt IE 7]> <html lang="en" class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html lang="en" class="lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html lang="en" class="lt-ie9"> <![endif]--> <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]--> <!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title>Nestable</title> <style type="text/css"> .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .cf { zoom: 1; } *:first-child+html .cf { zoom: 1; } html { margin: 0; padding: 0; } body { font-size: 100%; margin: 0; padding: 1.75em; font-family: 'Helvetica Neue', Arial, sans-serif; } h1 { font-size: 1.75em; margin: 0 0 0.6em 0; } a { color: #2996cc; } a:hover { text-decoration: none; } p { line-height: 1.5em; } .small { color: #666; font-size: 0.875em; } .large { font-size: 1.25em; } </style> </head> <body> <h1>Nestable</h1> <p>Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin)</p> <p><strong><a href="https://github.com/dbushell/Nestable">Code on GitHub</a></strong></p> <menu id="nestable-menu"> <button type="button" data-action="expand-all">Expand All</button> <button type="button" data-action="collapse-all">Collapse All</button> </menu> <div class="cf nestable-lists"> <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> </div> <p><strong>Serialised Output (per list)</strong></p> <textarea id="nestable-output"></textarea> <textarea id="nestable2-output"></textarea> <p> </p> <div class="cf nestable-lists"> <p><strong>Draggable Handles</strong></p> <p>If you're clever with your CSS and markup this can be achieved without any JavaScript changes.</p> <div class="dd" id="nestable3"> <ol class="dd-list"> <li class="dd-item dd3-item" data-id="13"> <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 13</div> </li> <li class="dd-item dd3-item" data-id="14"> <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 14</div> </li> <li class="dd-item dd3-item" data-id="15"> <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 15</div> <ol class="dd-list"> <li class="dd-item dd3-item" data-id="16"> <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 16</div> </li> <li class="dd-item dd3-item" data-id="17"> <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 17</div> </li> <li class="dd-item dd3-item" data-id="18"> <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 18</div> </li> </ol> </li> </ol> </div> </div> <p class="small">Copyright © <a href="http://dbushell.com/">David Bushell</a> | Made for <a href="http://www.browserlondon.com/">Browser</a></p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.nestable.js"></script> <script> $(document).ready(function() { var updateOutput = function(e) { var list = e.length ? e : $(e.target), output = list.data('output'); if (window.JSON) { output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2)); } else { output.val('JSON browser support required for this demo.'); } }; // activate Nestable for list 1 $('#nestable').nestable({ group: 1 }) .on('change', updateOutput); // activate Nestable for list 2 $('#nestable2').nestable({ group: 1 }) .on('change', updateOutput); // output initial serialised data updateOutput($('#nestable').data('output', $('#nestable-output'))); updateOutput($('#nestable2').data('output', $('#nestable2-output'))); $('#nestable-menu').on('click', function(e) { var target = $(e.target), action = target.data('action'); if (action === 'expand-all') { $('.dd').nestable('expandAll'); } if (action === 'collapse-all') { $('.dd').nestable('collapseAll'); } }); $('#nestable3').nestable(); }); </script> </body> </html>