svn commit: r956651 [6/37] - in /ofbiz/branches/jquery: ./ framework/common/widget/ framework/images/webapp/images
Locked
svn commit: r956651 [6/37] - in /ofbiz/branches/jquery: ./ framework/common/widget/ framework/images/webapp/images
 
|
Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/handle.html
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/handle.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/handle.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/handle.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Draggable - Handles</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } + #draggable p { cursor: move; } + </style> + <script type="text/javascript"> + $(function() { + $("#draggable").draggable({ handle: 'p' }); + $("#draggable2").draggable({ cancel: "p.ui-widget-header" }); + $("div, p").disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<div id="draggable" class="ui-widget-content"> + <p class="ui-widget-header">I can be dragged only by this handle</p> +</div> + +<div id="draggable2" class="ui-widget-content"> + <p>You can drag me around…</p> + <p class="ui-widget-header">…but you can't drag me by this handle.</p> +</div> + +<!-- ADD CANCEL DEMO --> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Allow dragging only when the cursor is over a specific part of the draggable. Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p> +<p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p> + +</div><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/handle.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/handle.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/handle.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/index.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/index.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/index.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/index.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Draggable Demos</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> +</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="events.html">Events</a></li> + <li><a href="constrain-movement.html">Constrain movement</a></li> + <li><a href="delay-start.html">Delay start</a></li> + <li><a href="snap-to.html">Snap to element or grid</a></li> + <li><a href="scroll.html">Auto-scroll</a></li> + <li><a href="revert.html">Revert position</a></li> + <li><a href="visual-feedback.html">Visual feedback</a></li> + <li><a href="handle.html">Drag handle</a></li> + <li><a href="cursor-style.html">Cursor style</a></li> + <li><a href="sortable.html">Draggable + Sortable</a></li> + </ul> +</div> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/index.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/index.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/index.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/revert.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/revert.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/revert.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/revert.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Draggable - Revert position</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } + </style> + <script type="text/javascript"> + $(function() { + $("#draggable").draggable({ revert: true }); + $("#draggable2").draggable({ revert: true, helper: 'clone' }); + }); + </script> +</head> +<body> +<div class="demo"> + +<div id="draggable" class="ui-widget-content"> + <p>Revert the original</p> +</div> + +<div id="draggable2" class="ui-widget-content"> + <p>Revert the helper</p> +</div> + +</div><!-- End demo --> + +<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. +</p> + +</div><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/revert.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/revert.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/revert.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/scroll.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/scroll.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/scroll.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/scroll.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Draggable - Auto-scroll</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } + </style> + <script type="text/javascript"> + $(function() { + $("#draggable").draggable({ scroll: true }); + $("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 }); + $("#draggable3").draggable({ scroll: true, scrollSpeed: 100 }); + }); + </script> +</head> +<body> +<div class="demo"> + +<div id="draggable" class="ui-widget-content"> + <p>Scroll set to true, default settings</p> +</div> + +<div id="draggable2" class="ui-widget-content"> + <p>scrollSensitivity set to 100</p> +</div> + +<div id="draggable3" class="ui-widget-content"> + <p>scrollSpeed set to 100</p> +</div> + +<div style='height: 5000px; width: 1px;'></div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> +Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options. +</p> + +</div><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/scroll.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/scroll.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/scroll.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/snap-to.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/snap-to.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/snap-to.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/snap-to.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Draggable - Snap to element or grid</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } + .ui-widget-header p, .ui-widget-content p { margin: 0; } + #snaptarget { height: 140px; } + </style> + <script type="text/javascript"> + $(function() { + $("#draggable").draggable({ snap: true }); + $("#draggable2").draggable({ snap: '.ui-widget-header' }); + $("#draggable3").draggable({ snap: '.ui-widget-header', snapMode: 'outer' }); + $("#draggable4").draggable({ grid: [20,20] }); + $("#draggable5").draggable({ grid: [80, 80] }); + }); + </script> +</head> +<body> +<div class="demo"> + +<div id="snaptarget" class="ui-widget-header"> + <p>I'm a snap target</p> +</div> + +<br clear="both" /> + +<div id="draggable" class="draggable ui-widget-content"> + <p>Default (snap: true), snaps to all other draggable elements</p> +</div> + +<div id="draggable2" class="draggable ui-widget-content"> + <p>I only snap to the big box</p> +</div> + +<div id="draggable3" class="draggable ui-widget-content"> + <p>I only snap to the outer edges of the big box</p> +</div> + +<div id="draggable4" class="draggable ui-widget-content"> + <p>I snap to a 20 x 20 grid</p> +</div> + +<div id="draggable5" class="draggable ui-widget-content"> + <p>I snap to a 80 x 80 grid</p> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Snap the draggable to the inner or outer boundaries of a DOM element. Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p> + +<p>Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p> + +</div><!-- End demo-description --> + + + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/snap-to.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/snap-to.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/snap-to.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/sortable.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/sortable.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/sortable.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/sortable.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Draggable + Sortable</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } + .demo li { margin: 5px; padding: 5px; width: 150px; } + </style> + <script type="text/javascript"> + $(function() { + $("#sortable").sortable({ + revert: true + }); + $("#draggable").draggable({ + connectToSortable: '#sortable', + helper: 'clone', + revert: 'invalid' + }); + $("ul, li").disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<ul> + <li id="draggable" class="ui-state-highlight">Drag me down</li> +</ul> + +<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> +</ul> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> +Draggables are built to interact seamlessly with <a href="#">sortables</a>. +</p> + +</div><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/sortable.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/sortable.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/sortable.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/visual-feedback.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/visual-feedback.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/visual-feedback.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/visual-feedback.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Draggable - Visual feedback</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } + #draggable, #draggable2, #draggable3 { margin-bottom:20px; } + #set { clear:both; float:left; width: 368px; height: 120px; } + p { clear:both; margin:0; padding:1em 0; } + </style> + <script type="text/javascript"> + $(function() { + $("#draggable").draggable({ helper: 'original' }); + $("#draggable2").draggable({ opacity: 0.7, helper: 'clone' }); + $("#draggable3").draggable({ + cursor: 'move', + cursorAt: { top: -12, left: -20 }, + helper: function(event) { + return $('<div class="ui-widget-header">I\'m a custom helper</div>'); + } + }); + $("#set div").draggable({ stack: '#set div' }); + }); + </script> +</head> +<body> +<div class="demo"> + +<h3 class="docs">With helpers:</h3> + +<div id="draggable" class="ui-widget-content"> + <p>Original</p> +</div> + +<div id="draggable2" class="ui-widget-content"> + <p>Semi-transparent clone</p> +</div> + +<div id="draggable3" class="ui-widget-content"> + <p>Custom helper (in combination with cursorAt)</p> +</div> + +<h3 class="docs">Stacked:</h3> +<div id="set"> + <div class="ui-widget-content"> + <p>We are draggables..</p> + </div> + + <div class="ui-widget-content"> + <p>..whose z-indexes are controlled automatically..</p> + </div> + + <div class="ui-widget-content"> + <p>..with the stack option.</p> + </div> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p> + +<p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p> + +</div><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/visual-feedback.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/visual-feedback.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/draggable/visual-feedback.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/accepted-elements.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/accepted-elements.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/accepted-elements.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/accepted-elements.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Droppable - Accept Demo</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } + #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } + </style> + <script type="text/javascript"> + $(function() { + + $("#draggable, #draggable-nonvalid").draggable(); + + $("#droppable").droppable({ + accept: '#draggable', + 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 class="demo"> + +<div id="draggable-nonvalid" class="ui-widget-content"> + <p>I'm draggable but can't be dropped</p> +</div> + +<div id="draggable" class="ui-widget-content"> + <p>Drag me to my target</p> +</div> + +<div id="droppable" class="ui-widget-header"> + <p>accept: '#draggable'</p> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p> + +</div><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/accepted-elements.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/accepted-elements.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/accepted-elements.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/default.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/default.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/default.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/default.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Droppable - Default Demo</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #draggable { 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 type="text/javascript"> + $(function() { + $("#draggable").draggable(); + $("#droppable").droppable({ + drop: function(event, ui) { + $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); + } + }); + + }); + </script> +</head> +<body> +<div class="demo"> + +<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> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Enable any DOM element to be droppable, a target for draggable elements.</p> + +</div><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/default.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/default.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/default.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras.jpg URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras.jpg?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras.jpg ------------------------------------------------------------------------------ svn:mime-type = image/jpeg Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras2.jpg URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras2.jpg?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras2.jpg ------------------------------------------------------------------------------ svn:mime-type = image/jpeg Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras2_min.jpg URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras2_min.jpg?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras2_min.jpg ------------------------------------------------------------------------------ svn:mime-type = image/jpeg Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras3.jpg URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras3.jpg?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras3.jpg ------------------------------------------------------------------------------ svn:mime-type = image/jpeg Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras3_min.jpg URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras3_min.jpg?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras3_min.jpg ------------------------------------------------------------------------------ svn:mime-type = image/jpeg Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras4.jpg URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras4.jpg?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras4.jpg ------------------------------------------------------------------------------ svn:mime-type = image/jpeg Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras4_min.jpg URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras4_min.jpg?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras4_min.jpg ------------------------------------------------------------------------------ svn:mime-type = image/jpeg Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras_min.jpg URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras_min.jpg?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/images/high_tatras_min.jpg ------------------------------------------------------------------------------ svn:mime-type = image/jpeg Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/index.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/index.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/index.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/index.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Droppable Demos</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> +</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="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> +</div> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/index.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/index.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/index.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/photo-manager.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/photo-manager.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/photo-manager.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/photo-manager.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,167 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Droppable - Simple photo manager</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #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 type="text/javascript"> + $(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: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present + helper: 'clone', + cursor: 'move' + }); + + // let the trash be droppable, accepting the gallery items + $trash.droppable({ + accept: '#gallery > li', + activeClass: 'ui-state-highlight', + drop: function(ev, 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(ev, 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(); + $item.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'); + var title = $link.siblings('img').attr('alt'); + var $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(ev) { + var $item = $(this); + var $target = $(ev.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="demo 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><!-- End demo --> + + <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><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/photo-manager.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/photo-manager.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/photo-manager.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/propagation.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/propagation.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/propagation.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/propagation.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Droppable - Prevent propagation</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #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 type="text/javascript"> + $(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 class="demo"> + +<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><!-- End demo --> + +<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><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/propagation.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/propagation.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/propagation.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/revert.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/revert.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/revert.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/revert.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Droppable - Revert draggable position</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #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 type="text/javascript"> + $(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 class="demo"> + +<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><!-- End demo --> + +<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><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/revert.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/revert.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/revert.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/shopping-cart.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/shopping-cart.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/shopping-cart.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/shopping-cart.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Droppable - Shopping Cart Demo</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + h1 { padding: .2em; margin: 0; } + #products { float:left; width: 500px; margin-right: 2em; } + #cart { width: 200px; float: left; } + /* style the list to maximize the droppable hitarea */ + #cart ol { margin: 0; padding: 1em 0 1em 3em; } + </style> + <script type="text/javascript"> + $(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 class="demo"> + +<div id="products"> + <h1 class="ui-widget-header">Products</h1> + <div id="catalog"> + <h3><a href="#">T-Shirts</a></h3> + <div> + <ul> + <li>Lolcat Shirt</li> + <li>Cheezeburger Shirt</li> + <li>Buckit Shirt</li> + </ul> + </div> + <h3><a href="#">Bags</a></h3> + <div> + <ul> + <li>Zebra Striped</li> + <li>Black Leather</li> + <li>Alligator Leather</li> + </ul> + </div> + <h3><a href="#">Gadgets</a></h3> + <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><!-- End demo --> + +<div class="demo-description"> + +<p>Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding +them to a shopping cart, where they are sortable.</p> + +</div><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/shopping-cart.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/shopping-cart.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/shopping-cart.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/visual-feedback.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/visual-feedback.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/visual-feedback.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/visual-feedback.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Droppable - Visual feedback</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #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; } + </style> + <script type="text/javascript"> + $(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> +<div class="demo"> + +<h3 class="docs">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 class="docs">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> + +<!-- add active class demo --> + +</div><!-- End demo --> + +<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><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/visual-feedback.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/visual-feedback.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/droppable/visual-feedback.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/default.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/default.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/default.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/default.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Effects - Effect Demo</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + .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 type="text/javascript"> + $(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 = {}; + //check if it's scale, transfer, or size - they need options explicitly set + 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:hidden").removeAttr('style').hide().fadeIn(); + }, 1000); + }; + + //set effect from select menu value + $("#button").click(function() { + runEffect(); + return false; + }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<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><!-- End demo --> + +<div class="demo-description"> + +<p>Click the button above to show the effect.</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/default.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/default.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/default.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/easing.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/easing.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/easing.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/easing.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Effects - Effect Demo</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + .graph { + float: left; + margin-left: 10px; + } + </style> + <script type="text/javascript"> + $(function() { + if (!$("<canvas/>")[0].getContext) { + $("<div/>").text("Your browser doesn't support canvas, which is required for this demo. Give Firefox 3 a try!").appendTo("#graphs"); + return; + } + var i = 0; + var width = 100, + height = 100; + $.each($.easing, function(name, impl) { + // skip linera/jswing and any non functioning implementation + if (!$.isFunction(impl) || /jswing/.test(name)) + return; + var graph = $("<div/>").addClass("graph").appendTo("#graphs"); + var text = $("<div/>").text(++i + ". " + name).appendTo(graph); + + var canvas = $("<canvas/>").appendTo(graph)[0] + canvas.width = width; + canvas.height = height; + var drawHeight = height * 0.8; + var cradius = 10; + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "black"; + + 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(); + + ctx.strokeStyle = "#555"; + ctx.beginPath(); + ctx.moveTo(width * 0.1, drawHeight + .5); + ctx.lineTo(width * 0.9, drawHeight + .5); + ctx.stroke(); + + ctx.strokeStyle = "#555"; + ctx.beginPath(); + ctx.moveTo(width * 0.1, drawHeight * .3 - .5); + ctx.lineTo(width * 0.9, drawHeight * .3 - .5); + ctx.stroke(); + + ctx.strokeStyle = "white"; + ctx.beginPath(); + ctx.lineWidth = 2; + ctx.moveTo(width * 0.1, drawHeight); + $.each(new Array(width), function(position) { + var val = impl(0, position, 0, 1, height); + if (/linear|jswing/.test(name)) val = position / width; + ctx.lineTo(position * 0.8 + width * 0.1, drawHeight - drawHeight * val * 0.7); + }); + ctx.stroke(); + graph.click(function() { + $(canvas).animate({height: "hide"}, 2000, name).animate({"left": "0"}, 800).animate({height: "show"}, 2000, name); + }); + + graph.width(width).height(height + text.height() + 10); + //return false; + }); + }); + </script> +</head> +<body> + +<div class="demo"> + + <div id="graphs"></div> + + <div id="animted"></div> + +</div><!-- End demo --> + +<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><!-- End demo-description --> + +</body> +</html> + Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/easing.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/easing.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/easing.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/index.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/index.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/index.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/index.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Effect Demos</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> +</head> +<body> + +<div class="demos-nav"> + <h4>Examples</h4> + <ul> + <li class="demo-config-on"><a href="default.html">Effect showcase</a></li> + <li><a href="easing.html">Easing showcase</a></li> + <!-- WIP + <li class="demo-config-on"><a href="scale.html">Scale effect</a></li> + <li class="demo-config-on"><a href="size.html">Size effect</a></li> + <li class="demo-config-on"><a href="transfer.html">Transfer effect</a></li> + --> + </ul> +</div> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/index.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/index.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/effect/index.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/default.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/default.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/default.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/default.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Effects - Hide Demo</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + .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 type="text/javascript"> + $(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 = {}; + //check if it's scale or size - they need options explicitly set + if(selectedEffect == 'scale'){ options = {percent: 0}; } + else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; } + + //run the effect + $("#effect").hide(selectedEffect,options,500,callback); + }; + + //callback function to bring a hidden box back + function callback(){ + setTimeout(function(){ + $("#effect:hidden").removeAttr('style').hide().fadeIn(); + }, 1000); + }; + + //set effect from select menu value + $("#button").click(function() { + runEffect(); + return false; + }); + + }); + </script> +</head> +<body> + +<div class="demo"> + +<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><!-- End demo --> + +<div class="demo-description"> + +<p>Click the button above to preview the effect.</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/default.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/default.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/default.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/index.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/index.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/index.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/index.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Effects Demos</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> +</head> +<body> + +<div class="demos-nav"> + <h4>Examples</h4> + <ul> + <li class="demo-config-on"><a href="default.html">Default functionality</a></li> + </ul> +</div> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/index.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/index.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/hide/index.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/calendar.gif URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/calendar.gif?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/calendar.gif ------------------------------------------------------------------------------ svn:mime-type = image/gif Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/demo-config-on-tile.gif URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/demo-config-on-tile.gif?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/demo-config-on-tile.gif ------------------------------------------------------------------------------ svn:mime-type = image/gif Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/demo-config-on.gif URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/demo-config-on.gif?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/demo-config-on.gif ------------------------------------------------------------------------------ svn:mime-type = image/gif Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/demo-spindown-closed.gif URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/demo-spindown-closed.gif?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/demo-spindown-closed.gif ------------------------------------------------------------------------------ svn:mime-type = image/gif Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/demo-spindown-open.gif URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/demo-spindown-open.gif?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/demo-spindown-open.gif ------------------------------------------------------------------------------ svn:mime-type = image/gif Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/icon-docs-info.gif URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/icon-docs-info.gif?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/icon-docs-info.gif ------------------------------------------------------------------------------ svn:mime-type = image/gif Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/jquery_32x32.png URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/jquery_32x32.png?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/jquery_32x32.png ------------------------------------------------------------------------------ svn:mime-type = image/png Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/jqueryui_32x32.png URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/jqueryui_32x32.png?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/jqueryui_32x32.png ------------------------------------------------------------------------------ svn:mime-type = image/png Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/pbar-ani.gif URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/pbar-ani.gif?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/pbar-ani.gif ------------------------------------------------------------------------------ svn:mime-type = image/gif Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/sizzlejs_32x32.png URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/sizzlejs_32x32.png?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/sizzlejs_32x32.png ------------------------------------------------------------------------------ svn:mime-type = image/png Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/transparent_1x1.png URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/transparent_1x1.png?rev=956651&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/images/transparent_1x1.png ------------------------------------------------------------------------------ svn:mime-type = image/png |
«
Return to OFBiz - Commits
|
1 view|%1 views
| Free forum by Nabble | Edit this page |