diff options
Diffstat (limited to 'mod/pages/vendors/jquery-treeview/demo/sortable.html')
| -rw-r--r-- | mod/pages/vendors/jquery-treeview/demo/sortable.html | 222 |
1 files changed, 222 insertions, 0 deletions
diff --git a/mod/pages/vendors/jquery-treeview/demo/sortable.html b/mod/pages/vendors/jquery-treeview/demo/sortable.html new file mode 100644 index 000000000..6189400cb --- /dev/null +++ b/mod/pages/vendors/jquery-treeview/demo/sortable.html @@ -0,0 +1,222 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + + <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> + <title>jQuery treeview</title> + + <link rel="stylesheet" href="../jquery.treeview.css" /> + <link rel="stylesheet" href="screen.css" /> + + + <script src="../../../jquery/src/core.js" type="text/javascript" charset="utf-8"></script> + <script src="../../../jquery/src/selector.js" type="text/javascript" charset="utf-8"></script> + <script src="../../../jquery/src/event.js" type="text/javascript" charset="utf-8"></script> + <script src="../../../jquery/src/ajax.js" type="text/javascript" charset="utf-8"></script> + <script src="../../../jquery/src/fx.js" type="text/javascript" charset="utf-8"></script> + <script src="../../../jquery/src/offset.js" type="text/javascript" charset="utf-8"></script> + <script src="../../../jquery/src/dimensions.js" type="text/javascript" charset="utf-8"></script> + + + <script src="../lib/jquery.cookie.js" type="text/javascript"></script> + <script src="../jquery.treeview.js" type="text/javascript"></script> + <script src="../jquery.treeview.edit.js" type="text/javascript"></script> + + <script src="../../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script> + <script src="../../../ui/ui.droppable.js" type="text/javascript" charset="utf-8"></script> + <script src="../jquery.treeview.sortable.js" type="text/javascript"></script> + + <style type="text/css" media="screen"> + .drop { + background-color: #eee !important; + border: 1px dotted #333; + } + .bar { + border-bottom: 1px dotted blue; + } + + .float { + float: left; + border: 1px solid #aaa; + margin: 10px; + padding: 10px; + } + + div.treeview-helper { + border: 1px solid #aaa; + background: #fff; + padding: 5px; + padding-left: 25px; + } + + </style> + + <script type="text/javascript"> + (function($) { + var CLASSES = $.treeview.classes; + var proxied = $.fn.treeview; + $.fn.treeview = function(settings) { + settings = $.extend({}, settings); + if (settings.update) { + return this.trigger("update", [settings.update]); + } + return proxied.apply(this, arguments).bind("update", function(event, branches) { + if (branches.hasClass(CLASSES.last) || branches.hasClass(CLASSES.lastExpandable) || branches.hasClass(CLASSES.lastCollapsable)) { + branches.prev().addClass(CLASSES.last) + .filter("." + CLASSES.expandable).replaceClass(CLASSES.last, CLASSES.lastExpandable).end() + .find(">.hitarea").replaceClass(CLASSES.expandableHitarea, CLASSES.lastExpandableHitarea).end() + .filter("." + CLASSES.collapsable).replaceClass(CLASSES.last, CLASSES.lastCollapsable).end() + .find(">.hitarea").replaceClass(CLASSES.collapsableHitarea, CLASSES.lastCollapsableHitarea); + } + }); + }; + + })(jQuery); + + + + + $.fn.sortableTreeview = function(o) { + this.each(function() { + + $(this).treeview().sortableTree({ + connectWith: o.connectWith, + items: 'li', + helper: function(e,item) { + return $("<div class='treeview-helper'>"+item.find("span").html()+"</div>"); + }, + //revert: true, + sortIndication: { + down: function(item) { + item.css("border-top", "1px dotted black"); + }, + up: function(item) { + item.css("border-bottom", "1px dotted black"); + }, + remove: function(item) { + item.css("border-bottom", "0px").css("border-top", "0px"); + } + }, + start: function(event, ui) { + ui.instance.element.treeview({update: ui.item}); + + }, + update: function(event, ui) { + ui.item.removeClass(); + ui.instance.element.treeview({add: ui.item}); + } + }); + + $(".folder", this).droppable({ + accept: "li", + hoverClass: "drop", + tolerance: "pointer", + drop: function(e,ui) { + $("> ul", this.parentNode).append(ui.draggable); + }, + over: function(e,ui) { + ui.helper.css("outline", "2px solid green"); + }, + out: function(e,ui) { + ui.helper.css("outline", "2px solid red"); + } + }); + + }); + }; + + + $(function() { + + + $("#browser, #browser2").sortableTreeview({ connectWith: ["#browser", "#browser2"] }); + + }) + + </script> + + </head> + <body> + + <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/">jQuery Treeview Plugin</a> Demo</h1> + <div id="main"> + + <a href=".">Main Demo</a> + + <h4>Sample 1 - default, right-click to remove items</h4> + +<div class="float"> + <ul id="browser" class="filetree"> + <li><span class="folder">Folder 1</span> + <ul> + <li><span class="file">Item 1.1</span></li> + </ul> + </li> + <li><span class="folder">Folder 2</span> + <ul> + <li><span class="folder">Subfolder 2.1</span> + <ul id="folder21"> + <li><span class="file">File 2.1.1</span></li> + <li><span class="file">File 2.1.2</span></li> + <li><span class="file">File 2.1.3</span></li> + <li class="closed"><span class="folder">Folder 3 (closed at start)</span> + <ul> + <li><span class="file">File 3.1</span></li> + </ul> + </li> + <li><span class="file">File 2.1.4</span></li> + <li><span class="file">File 2.1.5</span></li> + <li><span class="file">File 2.1.6</span></li> + </ul> + </li> + <li><span class="file">File 2.2</span></li> + </ul> + </li> + <li class="closed"><span class="folder">Folder 3 (closed at start)</span> + <ul> + <li><span class="file">File 3.1</span></li> + </ul> + </li> + <li><span class="file">File 4</span></li> + </ul> +</div> + +<div class="float"> + <ul id="browser2" class="filetree"> + <li><span class="folder">Folder 1</span> + <ul> + <li><span class="file">Item 1.1</span></li> + </ul> + </li> + <li><span class="folder">Folder 2</span> + <ul> + <li><span class="folder">Subfolder 2.1</span> + <ul id="folder21"> + <li><span class="file">File 2.1.1</span></li> + <li><span class="file">File 2.1.2</span></li> + <li><span class="file">File 2.1.3</span></li> + <li class="closed"><span class="folder">Folder 3 (closed at start)</span> + <ul> + <li><span class="file">File 3.1</span></li> + </ul> + </li> + <li><span class="file">File 2.1.4</span></li> + <li><span class="file">File 2.1.5</span></li> + <li><span class="file">File 2.1.6</span></li> + </ul> + </li> + <li><span class="file">File 2.2</span></li> + </ul> + </li> + <li class="closed"><span class="folder">Folder 3 (closed at start)</span> + <ul> + <li><span class="file">File 3.1</span></li> + </ul> + </li> + <li><span class="file">File 4</span></li> + </ul> +</div> + + </div> + +</body></html>
\ No newline at end of file |