http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/images/high_tatras3.jpg ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/images/high_tatras3.jpg b/content/development-bundle/demos/droppable/images/high_tatras3.jpg new file mode 100644 index 0000000..e158b1a Binary files /dev/null and b/content/development-bundle/demos/droppable/images/high_tatras3.jpg differ
http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/images/high_tatras3_min.jpg ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/images/high_tatras3_min.jpg b/content/development-bundle/demos/droppable/images/high_tatras3_min.jpg new file mode 100644 index 0000000..4aa96b0 Binary files /dev/null and b/content/development-bundle/demos/droppable/images/high_tatras3_min.jpg differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/images/high_tatras4.jpg ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/images/high_tatras4.jpg b/content/development-bundle/demos/droppable/images/high_tatras4.jpg new file mode 100644 index 0000000..da4124d Binary files /dev/null and b/content/development-bundle/demos/droppable/images/high_tatras4.jpg differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/images/high_tatras4_min.jpg ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/images/high_tatras4_min.jpg b/content/development-bundle/demos/droppable/images/high_tatras4_min.jpg new file mode 100644 index 0000000..794dbdf Binary files /dev/null and b/content/development-bundle/demos/droppable/images/high_tatras4_min.jpg differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/images/high_tatras_min.jpg ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/images/high_tatras_min.jpg b/content/development-bundle/demos/droppable/images/high_tatras_min.jpg new file mode 100644 index 0000000..51e0cde Binary files /dev/null and b/content/development-bundle/demos/droppable/images/high_tatras_min.jpg differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/index.html b/content/development-bundle/demos/droppable/index.html new file mode 100644 index 0000000..deca6e4 --- /dev/null +++ b/content/development-bundle/demos/droppable/index.html @@ -0,0 +1,20 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Droppable Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="accepted-elements.html">Accepted elements</a></li> + <li><a href="propagation.html">Prevent propagation</a></li> + <li><a href="visual-feedback.html">Visual feedback</a></li> + <li><a href="revert.html">Revert draggable position</a></li> + <li><a href="shopping-cart.html">Shopping Cart</a></li> + <li><a href="photo-manager.html">Simple photo manager</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/photo-manager.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/photo-manager.html b/content/development-bundle/demos/droppable/photo-manager.html new file mode 100644 index 0000000..5c3e520 --- /dev/null +++ b/content/development-bundle/demos/droppable/photo-manager.html @@ -0,0 +1,182 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Droppable - Simple photo manager</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.position.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.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */ + .gallery.custom-state-active { background: #eee; } + .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; } + .gallery li h5 { margin: 0 0 0.4em; cursor: move; } + .gallery li a { float: right; } + .gallery li a.ui-icon-zoomin { float: left; } + .gallery li img { width: 100%; cursor: move; } + + #trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */ + #trash h4 { line-height: 16px; margin: 0 0 0.4em; } + #trash h4 .ui-icon { float: left; } + #trash .gallery h5 { display: none; } + </style> + <script> + $(function() { + // there's the gallery and the trash + var $gallery = $( "#gallery" ), + $trash = $( "#trash" ); + + // let the gallery items be draggable + $( "li", $gallery ).draggable({ + cancel: "a.ui-icon", // clicking an icon won't initiate dragging + revert: "invalid", // when not dropped, the item will revert back to its initial position + containment: "document", + helper: "clone", + cursor: "move" + }); + + // let the trash be droppable, accepting the gallery items + $trash.droppable({ + accept: "#gallery > li", + activeClass: "ui-state-highlight", + drop: function( event, ui ) { + deleteImage( ui.draggable ); + } + }); + + // let the gallery be droppable as well, accepting items from the trash + $gallery.droppable({ + accept: "#trash li", + activeClass: "custom-state-active", + drop: function( event, ui ) { + recycleImage( ui.draggable ); + } + }); + + // image deletion function + var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>"; + function deleteImage( $item ) { + $item.fadeOut(function() { + var $list = $( "ul", $trash ).length ? + $( "ul", $trash ) : + $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash ); + + $item.find( "a.ui-icon-trash" ).remove(); + $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() { + $item + .animate({ width: "48px" }) + .find( "img" ) + .animate({ height: "36px" }); + }); + }); + } + + // image recycle function + var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>"; + function recycleImage( $item ) { + $item.fadeOut(function() { + $item + .find( "a.ui-icon-refresh" ) + .remove() + .end() + .css( "width", "96px") + .append( trash_icon ) + .find( "img" ) + .css( "height", "72px" ) + .end() + .appendTo( $gallery ) + .fadeIn(); + }); + } + + // image preview function, demonstrating the ui.dialog used as a modal window + function viewLargerImage( $link ) { + var src = $link.attr( "href" ), + title = $link.siblings( "img" ).attr( "alt" ), + $modal = $( "img[src$='" + src + "']" ); + + if ( $modal.length ) { + $modal.dialog( "open" ); + } else { + var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" ) + .attr( "src", src ).appendTo( "body" ); + setTimeout(function() { + img.dialog({ + title: title, + width: 400, + modal: true + }); + }, 1 ); + } + } + + // resolve the icons behavior with event delegation + $( "ul.gallery > li" ).click(function( event ) { + var $item = $( this ), + $target = $( event.target ); + + if ( $target.is( "a.ui-icon-trash" ) ) { + deleteImage( $item ); + } else if ( $target.is( "a.ui-icon-zoomin" ) ) { + viewLargerImage( $target ); + } else if ( $target.is( "a.ui-icon-refresh" ) ) { + recycleImage( $item ); + } + + return false; + }); + }); + </script> +</head> +<body> + +<div class="ui-widget ui-helper-clearfix"> + +<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> + <li class="ui-widget-content ui-corner-tr"> + <h5 class="ui-widget-header">High Tatras</h5> + <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" /> + <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> + <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> + </li> + <li class="ui-widget-content ui-corner-tr"> + <h5 class="ui-widget-header">High Tatras 2</h5> + <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" /> + <a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> + <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> + </li> + <li class="ui-widget-content ui-corner-tr"> + <h5 class="ui-widget-header">High Tatras 3</h5> + <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" /> + <a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> + <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> + </li> + <li class="ui-widget-content ui-corner-tr"> + <h5 class="ui-widget-header">High Tatras 4</h5> + <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" /> + <a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> + <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> + </li> +</ul> + +<div id="trash" class="ui-widget-content ui-state-default"> + <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4> +</div> + +</div> + +<div class="demo-description"> +<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p> +<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p> +<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/propagation.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/propagation.html b/content/development-bundle/demos/droppable/propagation.html new file mode 100644 index 0000000..2b7e168 --- /dev/null +++ b/content/development-bundle/demos/droppable/propagation.html @@ -0,0 +1,73 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Droppable - Prevent propagation</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } + #droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; } + #droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable(); + + $( "#droppable, #droppable-inner" ).droppable({ + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "> p" ) + .html( "Dropped!" ); + return false; + } + }); + + $( "#droppable2, #droppable2-inner" ).droppable({ + greedy: true, + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "> p" ) + .html( "Dropped!" ); + } + }); + }); + </script> +</head> +<body> + +<div id="draggable" class="ui-widget-content"> + <p>Drag me to my target</p> +</div> + +<div id="droppable" class="ui-widget-header"> + <p>Outer droppable</p> + <div id="droppable-inner" class="ui-widget-header"> + <p>Inner droppable (not greedy)</p> + </div> +</div> + +<div id="droppable2" class="ui-widget-header"> + <p>Outer droppable</p> + <div id="droppable2-inner" class="ui-widget-header"> + <p>Inner droppable (greedy)</p> + </div> +</div> + +<div class="demo-description"> +<p>When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/revert.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/revert.html b/content/development-bundle/demos/droppable/revert.html new file mode 100644 index 0000000..eed45c5 --- /dev/null +++ b/content/development-bundle/demos/droppable/revert.html @@ -0,0 +1,54 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Droppable - Revert draggable position</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } + #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable({ revert: "valid" }); + $( "#draggable2" ).draggable({ revert: "invalid" }); + + $( "#droppable" ).droppable({ + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); + } + }); + }); + </script> +</head> +<body> + +<div id="draggable" class="ui-widget-content"> + <p>I revert when I'm dropped</p> +</div> + +<div id="draggable2" class="ui-widget-content"> + <p>I revert when I'm not dropped</p> +</div> + +<div id="droppable" class="ui-widget-header"> + <p>Drop me here</p> +</div> + +<div class="demo-description"> +<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/shopping-cart.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/shopping-cart.html b/content/development-bundle/demos/droppable/shopping-cart.html new file mode 100644 index 0000000..9909f4f --- /dev/null +++ b/content/development-bundle/demos/droppable/shopping-cart.html @@ -0,0 +1,94 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Droppable - Shopping Cart Demo</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <script src="../../ui/jquery.ui.accordion.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + h1 { padding: .2em; margin: 0; } + #products { float:left; width: 500px; margin-right: 2em; } + #cart { width: 200px; float: left; margin-top: 1em; } + /* style the list to maximize the droppable hitarea */ + #cart ol { margin: 0; padding: 1em 0 1em 3em; } + </style> + <script> + $(function() { + $( "#catalog" ).accordion(); + $( "#catalog li" ).draggable({ + appendTo: "body", + helper: "clone" + }); + $( "#cart ol" ).droppable({ + activeClass: "ui-state-default", + hoverClass: "ui-state-hover", + accept: ":not(.ui-sortable-helper)", + drop: function( event, ui ) { + $( this ).find( ".placeholder" ).remove(); + $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this ); + } + }).sortable({ + items: "li:not(.placeholder)", + sort: function() { + // gets added unintentionally by droppable interacting with sortable + // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options + $( this ).removeClass( "ui-state-default" ); + } + }); + }); + </script> +</head> +<body> + +<div id="products"> + <h1 class="ui-widget-header">Products</h1> + <div id="catalog"> + <h2><a href="#">T-Shirts</a></h2> + <div> + <ul> + <li>Lolcat Shirt</li> + <li>Cheezeburger Shirt</li> + <li>Buckit Shirt</li> + </ul> + </div> + <h2><a href="#">Bags</a></h2> + <div> + <ul> + <li>Zebra Striped</li> + <li>Black Leather</li> + <li>Alligator Leather</li> + </ul> + </div> + <h2><a href="#">Gadgets</a></h2> + <div> + <ul> + <li>iPhone</li> + <li>iPod</li> + <li>iPad</li> + </ul> + </div> + </div> +</div> + +<div id="cart"> + <h1 class="ui-widget-header">Shopping Cart</h1> + <div class="ui-widget-content"> + <ol> + <li class="placeholder">Add your items here</li> + </ol> + </div> +</div> + +<div class="demo-description"> +<p>Demonstrate how to use an accordion to structure products into a catalog and make use of drag and drop for adding them to a shopping cart, where they are sortable.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/visual-feedback.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/visual-feedback.html b/content/development-bundle/demos/droppable/visual-feedback.html new file mode 100644 index 0000000..3af911f --- /dev/null +++ b/content/development-bundle/demos/droppable/visual-feedback.html @@ -0,0 +1,72 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Droppable - Visual feedback</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } + #droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; } + h3 { clear: left; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable(); + $( "#droppable" ).droppable({ + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); + } + }); + + $( "#draggable2" ).draggable(); + $( "#droppable2" ).droppable({ + accept: "#draggable2", + activeClass: "ui-state-hover", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); + } + }); + }); + </script> +</head> +<body> + +<h3>Feedback on hover:</h3> + +<div id="draggable" class="ui-widget-content"> + <p>Drag me to my target</p> +</div> + +<div id="droppable" class="ui-widget-header"> + <p>Drop here</p> +</div> + +<h3>Feedback on activating draggable:</h3> + +<div id="draggable2" class="ui-widget-content"> + <p>Drag me to my target</p> +</div> + +<div id="droppable2" class="ui-widget-header"> + <p>Drop here</p> +</div> + +<div class="demo-description"> +<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/effect/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/effect/default.html b/content/development-bundle/demos/effect/default.html new file mode 100644 index 0000000..af8bdd1 --- /dev/null +++ b/content/development-bundle/demos/effect/default.html @@ -0,0 +1,102 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects - Effect demo</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.effect.js"></script> + <script src="../../ui/jquery.ui.effect-blind.js"></script> + <script src="../../ui/jquery.ui.effect-bounce.js"></script> + <script src="../../ui/jquery.ui.effect-clip.js"></script> + <script src="../../ui/jquery.ui.effect-drop.js"></script> + <script src="../../ui/jquery.ui.effect-explode.js"></script> + <script src="../../ui/jquery.ui.effect-fade.js"></script> + <script src="../../ui/jquery.ui.effect-fold.js"></script> + <script src="../../ui/jquery.ui.effect-highlight.js"></script> + <script src="../../ui/jquery.ui.effect-pulsate.js"></script> + <script src="../../ui/jquery.ui.effect-scale.js"></script> + <script src="../../ui/jquery.ui.effect-shake.js"></script> + <script src="../../ui/jquery.ui.effect-slide.js"></script> + <script src="../../ui/jquery.ui.effect-transfer.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .toggler { width: 500px; height: 200px; position: relative; } + #button { padding: .5em 1em; text-decoration: none; } + #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } + #effect h3 { margin: 0; padding: 0.4em; text-align: center; } + .ui-effects-transfer { border: 2px dotted gray; } + </style> + <script> + $(function() { + // run the currently selected effect + function runEffect() { + // get effect type from + var selectedEffect = $( "#effectTypes" ).val(); + + // most effect types need no options passed by default + var options = {}; + // some effects have required parameters + if ( selectedEffect === "scale" ) { + options = { percent: 0 }; + } else if ( selectedEffect === "transfer" ) { + options = { to: "#button", className: "ui-effects-transfer" }; + } else if ( selectedEffect === "size" ) { + options = { to: { width: 200, height: 60 } }; + } + + // run the effect + $( "#effect" ).effect( selectedEffect, options, 500, callback ); + }; + + // callback function to bring a hidden box back + function callback() { + setTimeout(function() { + $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); + }, 1000 ); + }; + + // set effect from select menu value + $( "#button" ).click(function() { + runEffect(); + return false; + }); + }); + </script> +</head> +<body> + +<div class="toggler"> + <div id="effect" class="ui-widget-content ui-corner-all"> + <h3 class="ui-widget-header ui-corner-all">Effect</h3> + <p> + Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. + </p> + </div> +</div> + +<select name="effects" id="effectTypes"> + <option value="blind">Blind</option> + <option value="bounce">Bounce</option> + <option value="clip">Clip</option> + <option value="drop">Drop</option> + <option value="explode">Explode</option> + <option value="fade">Fade</option> + <option value="fold">Fold</option> + <option value="highlight">Highlight</option> + <option value="puff">Puff</option> + <option value="pulsate">Pulsate</option> + <option value="scale">Scale</option> + <option value="shake">Shake</option> + <option value="size">Size</option> + <option value="slide">Slide</option> + <option value="transfer">Transfer</option> +</select> + +<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> + +<div class="demo-description"> +<p>Click the button above to show the effect.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/effect/easing.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/effect/easing.html b/content/development-bundle/demos/effect/easing.html new file mode 100644 index 0000000..eb0835d --- /dev/null +++ b/content/development-bundle/demos/effect/easing.html @@ -0,0 +1,102 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects - Easing demo</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.effect.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .graph { + float: left; + margin-left: 10px; + } + </style> + <script> + $(function() { + if ( !$( "<canvas>" )[0].getContext ) { + $( "<div>" ).text( + "Your browser doesn't support canvas, which is required for this demo." + ).appendTo( "#graphs" ); + return; + } + + var i = 0, + width = 100, + height = 100; + + $.each( $.easing, function( name, impl ) { + var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ), + text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ), + wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ), + canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ]; + + canvas.width = width; + canvas.height = height; + var drawHeight = height * 0.8, + cradius = 10; + ctx = canvas.getContext( "2d" ); + ctx.fillStyle = "black"; + + // draw background + ctx.beginPath(); + ctx.moveTo( cradius, 0 ); + ctx.quadraticCurveTo( 0, 0, 0, cradius ); + ctx.lineTo( 0, height - cradius ); + ctx.quadraticCurveTo( 0, height, cradius, height ); + ctx.lineTo( width - cradius, height ); + ctx.quadraticCurveTo( width, height, width, height - cradius ); + ctx.lineTo( width, 0 ); + ctx.lineTo( cradius, 0 ); + ctx.fill(); + + // draw bottom line + ctx.strokeStyle = "#555"; + ctx.beginPath(); + ctx.moveTo( width * 0.1, drawHeight + .5 ); + ctx.lineTo( width * 0.9, drawHeight + .5 ); + ctx.stroke(); + + // draw top line + ctx.strokeStyle = "#555"; + ctx.beginPath(); + ctx.moveTo( width * 0.1, drawHeight * .3 - .5 ); + ctx.lineTo( width * 0.9, drawHeight * .3 - .5 ); + ctx.stroke(); + + // plot easing + ctx.strokeStyle = "white"; + ctx.beginPath(); + ctx.lineWidth = 2; + ctx.moveTo( width * 0.1, drawHeight ); + $.each( new Array( width ), function( position ) { + var state = position / width, + val = impl( state, position, 0, 1, width ); + ctx.lineTo( position * 0.8 + width * 0.1, + drawHeight - drawHeight * val * 0.7 ); + }); + ctx.stroke(); + + // animate on click + graph.click(function() { + wrap + .animate( { height: "hide" }, 2000, name ) + .delay( 800 ) + .animate( { height: "show" }, 2000, name ); + }); + + graph.width( width ).height( height + text.height() + 10 ); + }); + }); + </script> +</head> +<body> + +<div id="graphs"></div> + +<div class="demo-description"> +<p><strong>All easings provided by jQuery UI are drawn above, using a HTML canvas element</strong>. Click a diagram to see the easing in action.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/effect/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/effect/index.html b/content/development-bundle/demos/effect/index.html new file mode 100644 index 0000000..5da6bc6 --- /dev/null +++ b/content/development-bundle/demos/effect/index.html @@ -0,0 +1,15 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Effect showcase</a></li> + <li><a href="easing.html">Easing showcase</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/hide/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/hide/default.html b/content/development-bundle/demos/hide/default.html new file mode 100644 index 0000000..aeac408 --- /dev/null +++ b/content/development-bundle/demos/hide/default.html @@ -0,0 +1,95 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects - Hide Demo</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.effect.js"></script> + <script src="../../ui/jquery.ui.effect-blind.js"></script> + <script src="../../ui/jquery.ui.effect-bounce.js"></script> + <script src="../../ui/jquery.ui.effect-clip.js"></script> + <script src="../../ui/jquery.ui.effect-drop.js"></script> + <script src="../../ui/jquery.ui.effect-explode.js"></script> + <script src="../../ui/jquery.ui.effect-fold.js"></script> + <script src="../../ui/jquery.ui.effect-highlight.js"></script> + <script src="../../ui/jquery.ui.effect-pulsate.js"></script> + <script src="../../ui/jquery.ui.effect-scale.js"></script> + <script src="../../ui/jquery.ui.effect-shake.js"></script> + <script src="../../ui/jquery.ui.effect-slide.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .toggler { width: 500px; height: 200px; } + #button { padding: .5em 1em; text-decoration: none; } + #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } + #effect h3 { margin: 0; padding: 0.4em; text-align: center; } + </style> + <script> + $(function() { + // run the currently selected effect + function runEffect() { + // get effect type from + var selectedEffect = $( "#effectTypes" ).val(); + + // most effect types need no options passed by default + var options = {}; + // some effects have required parameters + if ( selectedEffect === "scale" ) { + options = { percent: 0 }; + } else if ( selectedEffect === "size" ) { + options = { to: { width: 200, height: 60 } }; + } + + // run the effect + $( "#effect" ).hide( selectedEffect, options, 1000, callback ); + }; + + // callback function to bring a hidden box back + function callback() { + setTimeout(function() { + $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); + }, 1000 ); + }; + + // set effect from select menu value + $( "#button" ).click(function() { + runEffect(); + return false; + }); + }); + </script> +</head> +<body> + +<div class="toggler"> + <div id="effect" class="ui-widget-content ui-corner-all"> + <h3 class="ui-widget-header ui-corner-all">Hide</h3> + <p> + Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. + </p> + </div> +</div> + +<select name="effects" id="effectTypes"> + <option value="blind">Blind</option> + <option value="bounce">Bounce</option> + <option value="clip">Clip</option> + <option value="drop">Drop</option> + <option value="explode">Explode</option> + <option value="fold">Fold</option> + <option value="highlight">Highlight</option> + <option value="puff">Puff</option> + <option value="pulsate">Pulsate</option> + <option value="scale">Scale</option> + <option value="shake">Shake</option> + <option value="size">Size</option> + <option value="slide">Slide</option> +</select> + +<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> + +<div class="demo-description"> +<p>Click the button above to preview the effect.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/hide/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/hide/index.html b/content/development-bundle/demos/hide/index.html new file mode 100644 index 0000000..3620fd7 --- /dev/null +++ b/content/development-bundle/demos/hide/index.html @@ -0,0 +1,14 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/images/calendar.gif ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/images/calendar.gif b/content/development-bundle/demos/images/calendar.gif new file mode 100644 index 0000000..d0abaa7 Binary files /dev/null and b/content/development-bundle/demos/images/calendar.gif differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/images/demo-config-on-tile.gif ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/images/demo-config-on-tile.gif b/content/development-bundle/demos/images/demo-config-on-tile.gif new file mode 100644 index 0000000..a96b5bf Binary files /dev/null and b/content/development-bundle/demos/images/demo-config-on-tile.gif differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/images/demo-config-on.gif ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/images/demo-config-on.gif b/content/development-bundle/demos/images/demo-config-on.gif new file mode 100644 index 0000000..e3b6d7c Binary files /dev/null and b/content/development-bundle/demos/images/demo-config-on.gif differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/images/demo-spindown-closed.gif ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/images/demo-spindown-closed.gif b/content/development-bundle/demos/images/demo-spindown-closed.gif new file mode 100644 index 0000000..ad4bd37 Binary files /dev/null and b/content/development-bundle/demos/images/demo-spindown-closed.gif differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/images/demo-spindown-open.gif ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/images/demo-spindown-open.gif b/content/development-bundle/demos/images/demo-spindown-open.gif new file mode 100644 index 0000000..e1c60aa Binary files /dev/null and b/content/development-bundle/demos/images/demo-spindown-open.gif differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/images/icon-docs-info.gif ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/images/icon-docs-info.gif b/content/development-bundle/demos/images/icon-docs-info.gif new file mode 100644 index 0000000..ea6d2be Binary files /dev/null and b/content/development-bundle/demos/images/icon-docs-info.gif differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/images/pbar-ani.gif ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/images/pbar-ani.gif b/content/development-bundle/demos/images/pbar-ani.gif new file mode 100644 index 0000000..cb59a04 Binary files /dev/null and b/content/development-bundle/demos/images/pbar-ani.gif differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/index.html b/content/development-bundle/demos/index.html new file mode 100644 index 0000000..4739d76 --- /dev/null +++ b/content/development-bundle/demos/index.html @@ -0,0 +1,40 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Demos</title> +</head> +<body> + +<ul> + <li><a href="accordion/">accordion</a></li> + <li><a href="addClass/">addClass</a></li> + <li><a href="animate/">animate</a></li> + <li><a href="autocomplete/">autocomplete</a></li> + <li><a href="button/">button</a></li> + <li><a href="datepicker/">datepicker</a></li> + <li><a href="dialog/">dialog</a></li> + <li><a href="draggable/">draggable</a></li> + <li><a href="droppable/">droppable</a></li> + <li><a href="effect/">effect</a></li> + <li><a href="hide/">hide</a></li> + <li><a href="menu/">menu</a></li> + <li><a href="position/">position</a></li> + <li><a href="progressbar/">progressbar</a></li> + <li><a href="removeClass/">removeClass</a></li> + <li><a href="resizable/">resizable</a></li> + <li><a href="selectable/">selectable</a></li> + <li><a href="show/">show</a></li> + <li><a href="slider/">slider</a></li> + <li><a href="sortable/">sortable</a></li> + <li><a href="spinner/">spinner</a></li> + <li><a href="switchClass/">switchClass</a></li> + <li><a href="tabs/">tabs</a></li> + <li><a href="toggle/">toggle</a></li> + <li><a href="toggleClass/">toggleClass</a></li> + <li><a href="tooltip/">tooltip</a></li> + <li><a href="widget/">widget</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/menu/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/menu/default.html b/content/development-bundle/demos/menu/default.html new file mode 100644 index 0000000..c12ac11 --- /dev/null +++ b/content/development-bundle/demos/menu/default.html @@ -0,0 +1,67 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Menu - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#menu" ).menu(); + }); + </script> + <style> + .ui-menu { width: 150px; } + </style> +</head> +<body> + +<ul id="menu"> + <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> + <li><a href="#">Ada</a></li> + <li><a href="#">Adamsville</a></li> + <li><a href="#">Addyston</a></li> + <li> + <a href="#">Delphi</a> + <ul> + <li class="ui-state-disabled"><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li><a href="#">Saarland</a></li> + <li> + <a href="#">Salzburg</a> + <ul> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li><a href="#">Perch</a></li> + </ul> + </li> + <li class="ui-state-disabled"><a href="#">Amesville</a></li> +</ul> + +<div class="demo-description"> +<p>A menu with the default configuration, disabled items and nested menus. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/menu/icons.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/menu/icons.html b/content/development-bundle/demos/menu/icons.html new file mode 100644 index 0000000..d613115 --- /dev/null +++ b/content/development-bundle/demos/menu/icons.html @@ -0,0 +1,44 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Menu - Icons</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#menu" ).menu(); + }); + </script> + <style> + .ui-menu { width: 150px; } + </style> +</head> +<body> + +<ul id="menu"> + <li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li> + <li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>Zoom In</a></li> + <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</a></li> + <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>Print...</a></li> + <li> + <a href="#">Playback</a> + <ul> + <li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>Prev</a></li> + <li><a href="#"><span class="ui-icon ui-icon-stop"></span>Stop</a></li> + <li><a href="#"><span class="ui-icon ui-icon-play"></span>Play</a></li> + <li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>Next</a></li> + </ul> + </li> +</ul> + +<div class="demo-description"> +<p>A menu with the default configuration, showing how to use a menu with icons.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/menu/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/menu/index.html b/content/development-bundle/demos/menu/index.html new file mode 100644 index 0000000..40e9e0b --- /dev/null +++ b/content/development-bundle/demos/menu/index.html @@ -0,0 +1,15 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Menu Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="icons.html">Icons</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/position/cycler.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/position/cycler.html b/content/development-bundle/demos/position/cycler.html new file mode 100644 index 0000000..2a6373c --- /dev/null +++ b/content/development-bundle/demos/position/cycler.html @@ -0,0 +1,107 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Position - Image Cycler</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + body { + margin: 0; + } + #container { + overflow: hidden; + position: relative; + height: 400px; + } + + img { + position: absolute; + } + </style> + <script> + $(function() { + // TODO refactor into a widget and get rid of these plugin methods + $.fn.left = function( using ) { + return this.position({ + my: "right middle", + at: "left+25 middle", + of: "#container", + collision: "none", + using: using + }); + }; + $.fn.right = function( using ) { + return this.position({ + my: "left middle", + at: "right-25 middle", + of: "#container", + collision: "none", + using: using + }); + }; + $.fn.center = function( using ) { + return this.position({ + my: "center middle", + at: "center middle", + of: "#container", + using: using + }); + }; + + $( "img:eq(0)" ).left(); + $( "img:eq(1)" ).center(); + $( "img:eq(2)" ).right(); + + function animate( to ) { + $( this ).stop( true, false ).animate( to ); + } + function next( event ) { + event.preventDefault(); + $( "img:eq(2)" ).center( animate ); + $( "img:eq(1)" ).left( animate ) + $( "img:eq(0)" ).right().appendTo( "#container" ); + } + function previous( event ) { + event.preventDefault(); + $( "img:eq(0)" ).center( animate ); + $( "img:eq(1)" ).right( animate ); + $( "img:eq(2)" ).left().prependTo( "#container" ); + } + $( "#previous" ).click( previous ); + $( "#next" ).click( next ); + + $( "img" ).click(function( event ) { + $( "img" ).index( this ) === 0 ? previous( event ) : next( event ); + }); + + $( window ).resize(function() { + $( "img:eq(0)" ).left( animate ); + $( "img:eq(1)" ).center( animate ); + $( "img:eq(2)" ).right( animate ); + }); + }); + </script> +</head> +<body> + +<div id="container"> + <img src="images/earth.jpg" width="458" height="308" alt="earth"> + <img src="images/flight.jpg" width="512" height="307" alt="flight"> + <img src="images/rocket.jpg" width="300" height="353" alt="rocket"> + + <a id="previous" href="#">Previous</a> + <a id="next" href="#">Next</a> +</div> + +<div class="demo-description"> +<p>A photoviewer prototype using Position to place images at the center, left and right and cycle them. +<br>Use the links at the top to cycle, or click on the images on the left and right. +<br>Note how the images are repositioned when resizing the window. +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/position/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/position/default.html b/content/development-bundle/demos/position/default.html new file mode 100644 index 0000000..f91bbaa --- /dev/null +++ b/content/development-bundle/demos/position/default.html @@ -0,0 +1,142 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Position - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #parent { + width: 60%; + height: 40px; + margin: 10px auto; + padding: 5px; + border: 1px solid #777; + background-color: #fbca93; + text-align: center; + } + .positionable { + position: absolute; + display: block; + right: 0; + bottom: 0; + background-color: #bcd5e6; + text-align: center; + } + #positionable1 { + width: 75px; + height: 75px; + } + #positionable2 { + width: 120px; + height: 40px; + } + select, input { + margin-left: 15px; + } + </style> + <script> + $(function() { + function position() { + $( ".positionable" ).position({ + of: $( "#parent" ), + my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), + at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), + offset: $( "#offset" ).val(), + collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() + }); + } + + $( ".positionable" ).css( "opacity", 0.5 ); + + $( "select, input" ).bind( "click keyup change", position ); + + $( "#parent" ).draggable({ + drag: position + }); + + position(); + }); + </script> +</head> +<body> + +<div id="parent"> + <p> + This is the position parent element. + </p> +</div> + +<div class="positionable" id="positionable1"> + <p> + to position + </p> +</div> + +<div class="positionable" id="positionable2"> + <p> + to position 2 + </p> +</div> + +<div style="padding: 20px; margin-top: 75px;"> + position... + <div style="padding-bottom: 20px;"> + <b>my:</b> + <select id="my_horizontal"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right">right</option> + </select> + <select id="my_vertical"> + <option value="top">top</option> + <option value="middle">center</option> + <option value="bottom">bottom</option> + </select> + </div> + <div style="padding-bottom: 20px;"> + <b>at:</b> + <select id="at_horizontal"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right">right</option> + </select> + <select id="at_vertical"> + <option value="top">top</option> + <option value="middle">center</option> + <option value="bottom">bottom</option> + </select> + </div> + <div style="padding-bottom: 20px;"> + <b>offset:</b> + <input id="offset"> + </div> + <div style="padding-bottom: 20px;"> + <b>collision:</b> + <select id="collision_horizontal"> + <option value="flip">flip</option> + <option value="fit">fit</option> + <option value="flipfit">flipfit</option> + <option value="none">none</option> + </select> + <select id="collision_vertical"> + <option value="flip">flip</option> + <option value="fit">fit</option> + <option value="flipfit">flipfit</option> + <option value="none">none</option> + </select> + </div> +</div> + +<div class="demo-description"> +<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset. +<br>Drag around the parent element to see collision detection in action.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/position/images/earth.jpg ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/position/images/earth.jpg b/content/development-bundle/demos/position/images/earth.jpg new file mode 100644 index 0000000..e5477f7 Binary files /dev/null and b/content/development-bundle/demos/position/images/earth.jpg differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/position/images/flight.jpg ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/position/images/flight.jpg b/content/development-bundle/demos/position/images/flight.jpg new file mode 100644 index 0000000..362bd1a Binary files /dev/null and b/content/development-bundle/demos/position/images/flight.jpg differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/position/images/rocket.jpg ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/position/images/rocket.jpg b/content/development-bundle/demos/position/images/rocket.jpg new file mode 100644 index 0000000..9c0495c Binary files /dev/null and b/content/development-bundle/demos/position/images/rocket.jpg differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/position/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/position/index.html b/content/development-bundle/demos/position/index.html new file mode 100644 index 0000000..a7b7548 --- /dev/null +++ b/content/development-bundle/demos/position/index.html @@ -0,0 +1,15 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Position Demo</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="cycler.html">Cycling images</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/progressbar/animated.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/progressbar/animated.html b/content/development-bundle/demos/progressbar/animated.html new file mode 100644 index 0000000..f030705 --- /dev/null +++ b/content/development-bundle/demos/progressbar/animated.html @@ -0,0 +1,37 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Progressbar - Animated</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.progressbar.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif); } + </style> + <script> + $(function() { + $( "#progressbar" ).progressbar({ + value: 59 + }); + }); + </script> +</head> +<body> + +<div id="progressbar"></div> + +<div class="demo-description"> +<p> +This progressbar has an animated fill by setting the +<code>background-image</code> +on the +<code>.ui-progressbar-value</code> +element, using css. +</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/progressbar/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/progressbar/default.html b/content/development-bundle/demos/progressbar/default.html new file mode 100644 index 0000000..b478c9c --- /dev/null +++ b/content/development-bundle/demos/progressbar/default.html @@ -0,0 +1,28 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Progressbar - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.progressbar.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#progressbar" ).progressbar({ + value: 37 + }); + }); + </script> +</head> +<body> + +<div id="progressbar"></div> + +<div class="demo-description"> +<p>Default determinate progress bar.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/progressbar/images/pbar-ani.gif ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/progressbar/images/pbar-ani.gif b/content/development-bundle/demos/progressbar/images/pbar-ani.gif new file mode 100644 index 0000000..cb59a04 Binary files /dev/null and b/content/development-bundle/demos/progressbar/images/pbar-ani.gif differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/progressbar/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/progressbar/index.html b/content/development-bundle/demos/progressbar/index.html new file mode 100644 index 0000000..5080520 --- /dev/null +++ b/content/development-bundle/demos/progressbar/index.html @@ -0,0 +1,16 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Progressbar Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="animated.html">Animated</a></li> + <li><a href="resize.html">Resizable progressbar</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/progressbar/resize.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/progressbar/resize.html b/content/development-bundle/demos/progressbar/resize.html new file mode 100644 index 0000000..eac40c0 --- /dev/null +++ b/content/development-bundle/demos/progressbar/resize.html @@ -0,0 +1,33 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Progressbar - Resizable</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.progressbar.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#progressbar" ).progressbar({ + value: 37 + }); + $( "#progressbarWrapper" ).resizable(); + }); + </script> +</head> +<body> + +<div id="progressbarWrapper" style="height:30px; " class="ui-widget-default"> + <div id="progressbar" style="height:100%;"></div> +</div> + +<div class="demo-description"> +<p>The progress bar's widths are specified in percentages for flexible sizing so it will resize to fit its container. Try resizing the height and width of this bar to see how it maintains the correct proportions. (This is not necessarily a real-world example, but it's a good illustration of how flexibly all the plugins are coded.)</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/removeClass/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/removeClass/default.html b/content/development-bundle/demos/removeClass/default.html new file mode 100644 index 0000000..8564b95 --- /dev/null +++ b/content/development-bundle/demos/removeClass/default.html @@ -0,0 +1,45 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects - removeClass Demo</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.effect.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .toggler { width: 500px; height: 200px; position: relative; } + #button { padding: .5em 1em; text-decoration: none; } + #effect { position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } + .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } + </style> + <script> + $(function() { + $( "#button" ).click(function() { + $( "#effect" ).removeClass( "newClass", 1000, callback ); + return false; + }); + + function callback() { + setTimeout(function() { + $( "#effect" ).addClass( "newClass" ); + }, 1500 ); + } + }); + </script> +</head> +<body> + +<div class="toggler"> + <div id="effect" class="newClass ui-corner-all"> + Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. + </div> +</div> + +<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> + +<div class="demo-description"> +<p>Click the button above to preview the effect.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/removeClass/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/removeClass/index.html b/content/development-bundle/demos/removeClass/index.html new file mode 100644 index 0000000..3620fd7 --- /dev/null +++ b/content/development-bundle/demos/removeClass/index.html @@ -0,0 +1,14 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/resizable/animate.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/resizable/animate.html b/content/development-bundle/demos/resizable/animate.html new file mode 100644 index 0000000..31db5db --- /dev/null +++ b/content/development-bundle/demos/resizable/animate.html @@ -0,0 +1,36 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable - Animate</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #resizable { width: 150px; height: 150px; padding: 0.5em; } + #resizable h3 { text-align: center; margin: 0; } + .ui-resizable-helper { border: 1px dotted gray; } + </style> + <script> + $(function() { + $( "#resizable" ).resizable({ + animate: true + }); + }); + </script> +</head> +<body> + +<div id="resizable" class="ui-widget-content"> + <h3 class="ui-widget-header">Animate</h3> +</div> + +<div class="demo-description"> +<p>Animate the resize action using the <code>animate</code> option (boolean). When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/resizable/aspect-ratio.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/resizable/aspect-ratio.html b/content/development-bundle/demos/resizable/aspect-ratio.html new file mode 100644 index 0000000..0f4fc5d --- /dev/null +++ b/content/development-bundle/demos/resizable/aspect-ratio.html @@ -0,0 +1,35 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable - Preserve aspect ratio</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #resizable { width: 160px; height: 90px; padding: 0.5em; } + #resizable h3 { text-align: center; margin: 0; } + </style> + <script> + $(function() { + $( "#resizable" ).resizable({ + aspectRatio: 16 / 9 + }); + }); + </script> +</head> +<body> + +<div id="resizable" class="ui-widget-content"> + <h3 class="ui-widget-header">Preserve aspect ratio</h3> +</div> + +<div class="demo-description"> +<p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the <code>aspectRatio</code> option to true, and optionally pass in a new ratio (i.e., 4/3)</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/resizable/constrain-area.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/resizable/constrain-area.html b/content/development-bundle/demos/resizable/constrain-area.html new file mode 100644 index 0000000..fdfdbd2 --- /dev/null +++ b/content/development-bundle/demos/resizable/constrain-area.html @@ -0,0 +1,40 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable - Constrain resize area</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #container { width: 300px; height: 300px; } + #container h3 { text-align: center; margin: 0; margin-bottom: 10px; } + #resizable { background-position: top left; width: 150px; height: 150px; } + #resizable, #container { padding: 0.5em; } + </style> + <script> + $(function() { + $( "#resizable" ).resizable({ + containment: "#container" + }); + }); + </script> +</head> +<body> + +<div id="container" class="ui-widget-content"> + <h3 class="ui-widget-header">Containment</h3> + <div id="resizable" class="ui-state-active"> + <h3 class="ui-widget-header">Resizable</h3> + </div> +</div> + +<div class="demo-description"> +<p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/resizable/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/resizable/default.html b/content/development-bundle/demos/resizable/default.html new file mode 100644 index 0000000..09e675e --- /dev/null +++ b/content/development-bundle/demos/resizable/default.html @@ -0,0 +1,33 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #resizable { width: 150px; height: 150px; padding: 0.5em; } + #resizable h3 { text-align: center; margin: 0; } + </style> + <script> + $(function() { + $( "#resizable" ).resizable(); + }); + </script> +</head> +<body> + +<div id="resizable" class="ui-widget-content"> + <h3 class="ui-widget-header">Resizable</h3> +</div> + +<div class="demo-description"> +<p>Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/resizable/delay-start.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/resizable/delay-start.html b/content/development-bundle/demos/resizable/delay-start.html new file mode 100644 index 0000000..eecb7ac --- /dev/null +++ b/content/development-bundle/demos/resizable/delay-start.html @@ -0,0 +1,45 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable - Delay start</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; } + #resizable h3, #resizable2 h3 { text-align: center; margin: 0; } + </style> + <script> + $(function() { + $( "#resizable" ).resizable({ + delay: 1000 + }); + + $( "#resizable2" ).resizable({ + distance: 40 + }); + }); + </script> +</head> +<body> + +<h3 class="docs">Time delay (ms):</h3> +<div id="resizable" class="ui-widget-content"> + <h3 class="ui-widget-header">Time</h3> +</div> + +<h3 class="docs">Distance delay (px):</h3> +<div id="resizable2" class="ui-widget-content"> + <h3 class="ui-widget-header">Distance</h3> +</div> + +<div class="demo-description"> +<p>Delay the start of resizng for a number of milliseconds with the <code>delay</code> option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/resizable/helper.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/resizable/helper.html b/content/development-bundle/demos/resizable/helper.html new file mode 100644 index 0000000..baafb44 --- /dev/null +++ b/content/development-bundle/demos/resizable/helper.html @@ -0,0 +1,36 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable - Helper</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #resizable { width: 150px; height: 150px; padding: 0.5em; } + #resizable h3 { text-align: center; margin: 0; } + .ui-resizable-helper { border: 2px dotted #00F; } + </style> + <script> + $(function() { + $( "#resizable" ).resizable({ + helper: "ui-resizable-helper" + }); + }); + </script> +</head> +<body> + +<div id="resizable" class="ui-widget-content"> + <h3 class="ui-widget-header">Helper</h3> +</div> + +<div class="demo-description"> +<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/resizable/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/resizable/index.html b/content/development-bundle/demos/resizable/index.html new file mode 100644 index 0000000..7c626e2 --- /dev/null +++ b/content/development-bundle/demos/resizable/index.html @@ -0,0 +1,24 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="aspect-ratio.html">Preserve aspect ratio</a></li> + <li><a href="max-min.html">Maximum / minimum size</a></li> + <li><a href="constrain-area.html">Constrain resize area</a></li> + <li><a href="delay-start.html">Delay start</a></li> + <li><a href="snap-to-grid.html">Snap to grid</a></li> + <li><a href="visual-feedback.html">Visual feedback</a></li> + <li><a href="synchronous-resize.html">Synchronous resize</a></li> + <li><a href="animate.html">Animate</a></li> + <li><a href="helper.html">Resize Helper</a></li> + <li><a href="textarea.html">Textarea</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/resizable/max-min.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/resizable/max-min.html b/content/development-bundle/demos/resizable/max-min.html new file mode 100644 index 0000000..3025b28 --- /dev/null +++ b/content/development-bundle/demos/resizable/max-min.html @@ -0,0 +1,38 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable - Maximum / minimum size</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #resizable { width: 200px; height: 150px; padding: 5px; } + #resizable h3 { text-align: center; margin: 0; } + </style> + <script> + $(function() { + $( "#resizable" ).resizable({ + maxHeight: 250, + maxWidth: 350, + minHeight: 150, + minWidth: 200 + }); + }); + </script> +</head> +<body> + +<div id="resizable" class="ui-widget-content"> + <h3 class="ui-widget-header">Resize larger / smaller</h3> +</div> + +<div class="demo-description"> +<p>Limit the resizable element to a maximum or minimum height or width using the <code>maxHeight</code>, <code>maxWidth</code>, <code>minHeight</code>, and <code>minWidth</code> options.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/resizable/snap-to-grid.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/resizable/snap-to-grid.html b/content/development-bundle/demos/resizable/snap-to-grid.html new file mode 100644 index 0000000..84e374d --- /dev/null +++ b/content/development-bundle/demos/resizable/snap-to-grid.html @@ -0,0 +1,35 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable - Snap to grid</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #resizable { width: 150px; height: 150px; padding: 0.5em; } + #resizable h3 { text-align: center; margin: 0; } + </style> + <script> + $(function() { + $( "#resizable" ).resizable({ + grid: 50 + }); + }); + </script> +</head> +<body> + +<div id="resizable" class="ui-widget-content"> + <h3 class="ui-widget-header">Grid</h3> +</div> + +<div class="demo-description"> +<p>Snap the resizable element to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/resizable/synchronous-resize.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/resizable/synchronous-resize.html b/content/development-bundle/demos/resizable/synchronous-resize.html new file mode 100644 index 0000000..e654560 --- /dev/null +++ b/content/development-bundle/demos/resizable/synchronous-resize.html @@ -0,0 +1,42 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable - Synchronous resize</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #resizable { background-position: top left; } + #resizable, #also { width: 150px; height: 120px; padding: 0.5em; } + #resizable h3, #also h3 { text-align: center; margin: 0; } + #also { margin-top: 1em; } + </style> + <script> + $(function() { + $( "#resizable" ).resizable({ + alsoResize: "#also" + }); + $( "#also" ).resizable(); + }); + </script> +</head> +<body> + +<div id="resizable" class="ui-widget-header"> + <h3 class="ui-state-active">Resize</h3> +</div> + +<div id="also" class="ui-widget-content"> + <h3 class="ui-widget-header">will also resize</h3> +</div> + +<div class="demo-description"> +<p>Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the <code>alsoResize</code> option.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/resizable/textarea.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/resizable/textarea.html b/content/development-bundle/demos/resizable/textarea.html new file mode 100644 index 0000000..3c7c3a4 --- /dev/null +++ b/content/development-bundle/demos/resizable/textarea.html @@ -0,0 +1,34 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable - Textarea</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-resizable-se { + bottom: 17px; + } + </style> + <script> + $(function() { + $( "#resizable" ).resizable({ + handles: "se" + }); + }); + </script> +</head> +<body> + +<textarea id="resizable" rows="5" cols="20"></textarea> + +<div class="demo-description"> +<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/resizable/visual-feedback.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/resizable/visual-feedback.html b/content/development-bundle/demos/resizable/visual-feedback.html new file mode 100644 index 0000000..211a3ae --- /dev/null +++ b/content/development-bundle/demos/resizable/visual-feedback.html @@ -0,0 +1,36 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable - Visual feedback</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #resizable { width: 150px; height: 150px; padding: 0.5em; } + #resizable h3 { text-align: center; margin: 0; } + .ui-resizable-ghost { border: 1px dotted gray; } + </style> + <script> + $(function() { + $( "#resizable" ).resizable({ + ghost: true + }); + }); + </script> +</head> +<body> + +<div id="resizable" class="ui-widget-content"> + <h3 class="ui-widget-header">Ghost</h3> +</div> + +<div class="demo-description"> +<p>Instead of showing the actual element during resize, set the <code>ghost</code> option to true to show a semi-transparent part of the element.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/selectable/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/selectable/default.html b/content/development-bundle/demos/selectable/default.html new file mode 100644 index 0000000..4e49b28 --- /dev/null +++ b/content/development-bundle/demos/selectable/default.html @@ -0,0 +1,43 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Selectable - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.selectable.js"></script> + <link rel="stylesheet" href="../demos.css"> + + <style> + #feedback { font-size: 1.4em; } + #selectable .ui-selecting { background: #FECA40; } + #selectable .ui-selected { background: #F39814; color: white; } + #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } + #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } + </style> + <script> + $(function() { + $( "#selectable" ).selectable(); + }); + </script> +</head> +<body> + +<ol id="selectable"> + <li class="ui-widget-content">Item 1</li> + <li class="ui-widget-content">Item 2</li> + <li class="ui-widget-content">Item 3</li> + <li class="ui-widget-content">Item 4</li> + <li class="ui-widget-content">Item 5</li> + <li class="ui-widget-content">Item 6</li> + <li class="ui-widget-content">Item 7</li> +</ol> + +<div class="demo-description"> +<p>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/selectable/display-grid.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/selectable/display-grid.html b/content/development-bundle/demos/selectable/display-grid.html new file mode 100644 index 0000000..7924c57 --- /dev/null +++ b/content/development-bundle/demos/selectable/display-grid.html @@ -0,0 +1,48 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Selectable - Display as grid</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.selectable.js"></script> + <link rel="stylesheet" href="../demos.css"> + + <style> + #feedback { font-size: 1.4em; } + #selectable .ui-selecting { background: #FECA40; } + #selectable .ui-selected { background: #F39814; color: white; } + #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; } + #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; } + </style> + <script> + $(function() { + $( "#selectable" ).selectable(); + }); + </script> +</head> +<body> + +<ol id="selectable"> + <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> +</ol> + +<div class="demo-description"> +<p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/selectable/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/selectable/index.html b/content/development-bundle/demos/selectable/index.html new file mode 100644 index 0000000..a82830c --- /dev/null +++ b/content/development-bundle/demos/selectable/index.html @@ -0,0 +1,16 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Selectable Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="serialize.html">Serialize</a></li> + <li><a href="display-grid.html">Display as grid</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/selectable/serialize.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/selectable/serialize.html b/content/development-bundle/demos/selectable/serialize.html new file mode 100644 index 0000000..cca6cdd --- /dev/null +++ b/content/development-bundle/demos/selectable/serialize.html @@ -0,0 +1,54 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Selectable - Serialize</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.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.selectable.js"></script> + <link rel="stylesheet" href="../demos.css"> + + <style> + #feedback { font-size: 1.4em; } + #selectable .ui-selecting { background: #FECA40; } + #selectable .ui-selected { background: #F39814; color: white; } + #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } + #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } + </style> + <script> + $(function() { + $( "#selectable" ).selectable({ + stop: function() { + var result = $( "#select-result" ).empty(); + $( ".ui-selected", this ).each(function() { + var index = $( "#selectable li" ).index( this ); + result.append( " #" + ( index + 1 ) ); + }); + } + }); + }); + </script> +</head> +<body> + +<p id="feedback"> +<span>You've selected:</span> <span id="select-result">none</span>. +</p> + +<ol id="selectable"> + <li class="ui-widget-content">Item 1</li> + <li class="ui-widget-content">Item 2</li> + <li class="ui-widget-content">Item 3</li> + <li class="ui-widget-content">Item 4</li> + <li class="ui-widget-content">Item 5</li> + <li class="ui-widget-content">Item 6</li> +</ol> + +<div class="demo-description"> +<p>Write a function that fires on the <code>stop</code> event to collect the index values of selected items. Present values as feedback, or pass as a data string.</p> +</div> +</body> +</html> --------------------------------------------------------------------- To unsubscribe, e-mail: server-dev-unsubscr...@james.apache.org For additional commands, e-mail: server-dev-h...@james.apache.org
