diff options
Diffstat (limited to 'include/jquery_ui/development-bundle/demos/sortable')
10 files changed, 625 insertions, 0 deletions
diff --git a/include/jquery_ui/development-bundle/demos/sortable/connect-lists-through-tabs.html b/include/jquery_ui/development-bundle/demos/sortable/connect-lists-through-tabs.html new file mode 100644 index 000000000..ff69d5d97 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/sortable/connect-lists-through-tabs.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Connect lists with Tabs</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <script src="../../ui/jquery.ui.tabs.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } + </style> + <script> + $(function() { + $( "#sortable1, #sortable2" ).sortable().disableSelection(); + + var $tabs = $( "#tabs" ).tabs(); + + var $tab_items = $( "ul:first li", $tabs ).droppable({ + accept: ".connectedSortable li", + hoverClass: "ui-state-hover", + drop: function( event, ui ) { + var $item = $( this ); + var $list = $( $item.find( "a" ).attr( "href" ) ) + .find( ".connectedSortable" ); + + ui.draggable.hide( "slow", function() { + $tabs.tabs( "select", $tab_items.index( $item ) ); + $( this ).appendTo( $list ).show( "slow" ); + }); + } + }); + }); + </script> +</head> +<body> +<div class="demo"> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1">Nunc tincidunt</a></li> + <li><a href="#tabs-2">Proin dolor</a></li> + </ul> + <div id="tabs-1"> + <ul id="sortable1" class="connectedSortable ui-helper-reset"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default">Item 2</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> + <li class="ui-state-default">Item 5</li> + </ul> + </div> + <div id="tabs-2"> + <ul id="sortable2" class="connectedSortable ui-helper-reset"> + <li class="ui-state-highlight">Item 1</li> + <li class="ui-state-highlight">Item 2</li> + <li class="ui-state-highlight">Item 3</li> + <li class="ui-state-highlight">Item 4</li> + <li class="ui-state-highlight">Item 5</li> + </ul> + </div> +</div> + +</div><!-- End demo --> + + + +<div class="demo-description"> +<p>Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/sortable/connect-lists.html b/include/jquery_ui/development-bundle/demos/sortable/connect-lists.html new file mode 100644 index 000000000..275859e0e --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/sortable/connect-lists.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Connect lists</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; } + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } + </style> + <script> + $(function() { + $( "#sortable1, #sortable2" ).sortable({ + connectWith: ".connectedSortable" + }).disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<ul id="sortable1" class="connectedSortable"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default">Item 2</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> + <li class="ui-state-default">Item 5</li> +</ul> + +<ul id="sortable2" class="connectedSortable"> + <li class="ui-state-highlight">Item 1</li> + <li class="ui-state-highlight">Item 2</li> + <li class="ui-state-highlight">Item 3</li> + <li class="ui-state-highlight">Item 4</li> + <li class="ui-state-highlight">Item 5</li> +</ul> + +</div><!-- End demo --> + + + +<div class="demo-description"> +<p> + Sort items from one list into another and vice versa, by passing a selector into + the <code>connectWith</code> option. The simplest way to do this is to + group all related lists with a CSS class, and then pass that class into the + sortable function (i.e., <code>connectWith: '.myclass'</code>). +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/sortable/default.html b/include/jquery_ui/development-bundle/demos/sortable/default.html new file mode 100644 index 000000000..3590de17f --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/sortable/default.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } + #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } + #sortable li span { position: absolute; margin-left: -1.3em; } + </style> + <script> + $(function() { + $( "#sortable" ).sortable(); + $( "#sortable" ).disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<ul id="sortable"> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> +</ul> + +</div><!-- End demo --> + + + +<div class="demo-description"> +<p> + Enable a group of DOM elements to be sortable. Click on and drag an + element to a new spot within the list, and the other items will adjust to + fit. By default, sortable items share <code>draggable</code> properties. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/sortable/delay-start.html b/include/jquery_ui/development-bundle/demos/sortable/delay-start.html new file mode 100644 index 000000000..6096e9a5c --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/sortable/delay-start.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Delay start</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; } + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; } + </style> + <script> + $(function() { + $( "#sortable1" ).sortable({ + delay: 300 + }); + + $( "#sortable2" ).sortable({ + distance: 15 + }); + + $( "li" ).disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<h3 class="docs">Time delay of 300ms:</h3> + +<ul id="sortable1"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default">Item 2</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> +</ul> + +<h3 class="docs">Distance delay of 15px:</h3> + +<ul id="sortable2"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default">Item 2</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> +</ul> + +</div><!-- End demo --> + + + +<div class="demo-description"> +<p> + Prevent accidental sorting either by delay (time) or distance. Set a number of + milliseconds the element needs to be dragged before sorting starts + with the <code>delay</code> option. Set a distance in pixels the element + needs to be dragged before sorting starts with the <code>distance</code> + option. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/sortable/display-grid.html b/include/jquery_ui/development-bundle/demos/sortable/display-grid.html new file mode 100644 index 000000000..a9287d204 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/sortable/display-grid.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Display as grid</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable { list-style-type: none; margin: 0; padding: 0; } + #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } + </style> + <script> + $(function() { + $( "#sortable" ).sortable(); + $( "#sortable" ).disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<ul id="sortable"> + <li class="ui-state-default">1</li> + <li class="ui-state-default">2</li> + <li class="ui-state-default">3</li> + <li class="ui-state-default">4</li> + <li class="ui-state-default">5</li> + <li class="ui-state-default">6</li> + <li class="ui-state-default">7</li> + <li class="ui-state-default">8</li> + <li class="ui-state-default">9</li> + <li class="ui-state-default">10</li> + <li class="ui-state-default">11</li> + <li class="ui-state-default">12</li> +</ul> + +</div><!-- End demo --> + + + +<div class="demo-description"> +<p> + To arrange sortable items as a grid, give them identical dimensions and + float them using CSS. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/sortable/empty-lists.html b/include/jquery_ui/development-bundle/demos/sortable/empty-lists.html new file mode 100644 index 000000000..f49b1072f --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/sortable/empty-lists.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Handle empty lists</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;} + #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; } + </style> + <script> + $(function() { + $( "ul.droptrue" ).sortable({ + connectWith: "ul" + }); + + $( "ul.dropfalse" ).sortable({ + connectWith: "ul", + dropOnEmpty: false + }); + + $( "#sortable1, #sortable2, #sortable3" ).disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<ul id="sortable1" class='droptrue'> + <li class="ui-state-default">Can be dropped..</li> + <li class="ui-state-default">..on an empty list</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> + <li class="ui-state-default">Item 5</li> +</ul> + +<ul id="sortable2" class='dropfalse'> + <li class="ui-state-highlight">Cannot be dropped..</li> + <li class="ui-state-highlight">..on an empty list</li> + <li class="ui-state-highlight">Item 3</li> + <li class="ui-state-highlight">Item 4</li> + <li class="ui-state-highlight">Item 5</li> +</ul> + +<ul id="sortable3" class='droptrue'> +</ul> + +<br clear="both" /> + +</div><!-- End demo --> + + + +<div class="demo-description"> +<p> + Prevent all items in a list from being dropped into a separate, empty list + using the <code>dropOnEmpty</code> option set to <code>false</code>. By default, + sortable items can be dropped on empty lists. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/sortable/index.html b/include/jquery_ui/development-bundle/demos/sortable/index.html new file mode 100644 index 000000000..b307ef777 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/sortable/index.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable Demos</title> + <link rel="stylesheet" href="../demos.css"> +</head> +<body> + +<div class="demos-nav"> + <h4>Examples</h4> + <ul> + <li class="demo-config-on"><a href="default.html">Default functionality</a></li> + <li><a href="placeholder.html">Drop placeholder</a></li> + <li><a href="connect-lists.html">Connect lists</a></li> + <li><a href="connect-lists-through-tabs.html">Connect lists through tabs</a></li> + <li><a href="empty-lists.html">Handle empty lists</a></li> + <li><a href="items.html">Include / exclude items</a></li> + <li><a href="delay-start.html">Delay start</a></li> + <li><a href="display-grid.html">Display as grid</a></li> + <li><a href="portlets.html">Portlets</a></li> + </ul> +</div> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/sortable/items.html b/include/jquery_ui/development-bundle/demos/sortable/items.html new file mode 100644 index 000000000..07a2ca963 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/sortable/items.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Include / exclude items</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; } + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; } + </style> + <script> + $(function() { + $( "#sortable1" ).sortable({ + items: "li:not(.ui-state-disabled)" + }); + + $( "#sortable2" ).sortable({ + cancel: ".ui-state-disabled" + }); + + $( "#sortable1 li, #sortable2 li" ).disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<h3 class="docs">Specify which items are sortable:</h3> + +<ul id="sortable1"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li> + <li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li> + <li class="ui-state-default">Item 4</li> +</ul> + +<h3 class="docs">Cancel sorting (but keep as drop targets):</h3> + +<ul id="sortable2"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li> + <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li> + <li class="ui-state-default">Item 4</li> +</ul> + +</div><!-- End demo --> + + + +<div class="demo-description"> +<p> + Specify which items are eligible to sort by passing a jQuery selector into + the <code>items</code> option. Items excluded from this option are not + sortable, nor are they valid targets for sortable items. +</p> +<p> + To only prevent sorting on certain items, pass a jQuery selector into the + <code>cancel</code> option. Cancelled items remain valid sort targets for + others. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/sortable/placeholder.html b/include/jquery_ui/development-bundle/demos/sortable/placeholder.html new file mode 100644 index 000000000..4aa07ce15 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/sortable/placeholder.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Drop placeholder</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } + #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } + html>body #sortable li { height: 1.5em; line-height: 1.2em; } + .ui-state-highlight { height: 1.5em; line-height: 1.2em; } + </style> + <script> + $(function() { + $( "#sortable" ).sortable({ + placeholder: "ui-state-highlight" + }); + $( "#sortable" ).disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<ul id="sortable"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default">Item 2</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> + <li class="ui-state-default">Item 5</li> + <li class="ui-state-default">Item 6</li> + <li class="ui-state-default">Item 7</li> +</ul> + +</div><!-- End demo --> + + + +<div class="demo-description"> +<p> + When dragging a sortable item to a new location, other items will make room + for the that item by shifting to allow white space between them. Pass a + class into the <code>placeholder</code> option to style that space to + be visible. Use the boolean <code>forcePlaceholderSize</code> option + to set dimensions on the placeholder. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/sortable/portlets.html b/include/jquery_ui/development-bundle/demos/sortable/portlets.html new file mode 100644 index 000000000..a932dbc1a --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/sortable/portlets.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Portlets</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .column { width: 170px; float: left; padding-bottom: 100px; } + .portlet { margin: 0 1em 1em 0; } + .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; } + .portlet-header .ui-icon { float: right; } + .portlet-content { padding: 0.4em; } + .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; } + .ui-sortable-placeholder * { visibility: hidden; } + </style> + <script> + $(function() { + $( ".column" ).sortable({ + connectWith: ".column" + }); + + $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ) + .find( ".portlet-header" ) + .addClass( "ui-widget-header ui-corner-all" ) + .prepend( "<span class='ui-icon ui-icon-minusthick'></span>") + .end() + .find( ".portlet-content" ); + + $( ".portlet-header .ui-icon" ).click(function() { + $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" ); + $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle(); + }); + + $( ".column" ).disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<div class="column"> + + <div class="portlet"> + <div class="portlet-header">Feeds</div> + <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> + </div> + + <div class="portlet"> + <div class="portlet-header">News</div> + <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> + </div> + +</div> + +<div class="column"> + + <div class="portlet"> + <div class="portlet-header">Shopping</div> + <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> + </div> + +</div> + +<div class="column"> + + <div class="portlet"> + <div class="portlet-header">Links</div> + <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> + </div> + + <div class="portlet"> + <div class="portlet-header">Images</div> + <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> + </div> + +</div> + +</div><!-- End demo --> + + + +<div class="demo-description"> +<p> + Enable portlets (styled divs) as sortables and use the <code>connectWith</code> + option to allow sorting between columns. +</p> +</div><!-- End demo-description --> + +</body> +</html> |