svn commit: r956651 [8/37] - in /ofbiz/branches/jquery: ./ framework/common/widget/ framework/images/webapp/images
Locked
svn commit: r956651 [8/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/selectable/serialize.html
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/selectable/serialize.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/selectable/serialize.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/selectable/serialize.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Selectable - Serialize</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.selectable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + + <style type="text/css"> + #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 type="text/javascript"> + $(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> +<div class="demo"> + +<p id="feedback"> +You've selected: <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><!-- End demo --> + +<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><!-- End demo-description --> +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/selectable/serialize.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/selectable/serialize.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/selectable/serialize.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/show/default.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/show/default.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/show/default.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/show/default.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Effects - Show 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: 100}; } + else if(selectedEffect == 'size'){ options = { to: {width: 280,height: 185} }; } + + //run the effect + $("#effect").show(selectedEffect,options,500,callback); + }; + + //callback function to bring a hidden box back + function callback(){ + setTimeout(function(){ + $("#effect:visible").removeAttr('style').hide().fadeOut(); + }, 1000); + }; + + //set effect from select menu value + $("#button").click(function() { + runEffect(); + return false; + }); + + $("#effect").hide(); + }); + </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">Show</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/show/default.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/show/default.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/show/default.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/show/index.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/show/index.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/show/index.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/show/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/show/index.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/show/index.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/show/index.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/colorpicker.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/colorpicker.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/colorpicker.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/colorpicker.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Slider - Colorpicker</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.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #red, #green, #blue { + float: left; + clear: left; + width: 300px; + margin: 15px; + } + #swatch { + width: 120px; + height: 100px; + margin-top: 18px; + margin-left: 350px; + background-image: none; + } + #red .ui-slider-range { background: #ef2929; } + #red .ui-slider-handle { border-color: #ef2929; } + #green .ui-slider-range { background: #8ae234; } + #green .ui-slider-handle { border-color: #8ae234; } + #blue .ui-slider-range { background: #729fcf; } + #blue .ui-slider-handle { border-color: #729fcf; } + #demo-frame > div.demo { padding: 10px !important; }; + </style> + <script type="text/javascript"> + function hexFromRGB (r, g, b) { + var hex = [ + r.toString(16), + g.toString(16), + b.toString(16) + ]; + $.each(hex, function (nr, val) { + if (val.length == 1) { + hex[nr] = '0' + val; + } + }); + return hex.join('').toUpperCase(); + } + function refreshSwatch() { + var red = $("#red").slider("value") + ,green = $("#green").slider("value") + ,blue = $("#blue").slider("value") + ,hex = hexFromRGB(red, green, blue); + $("#swatch").css("background-color", "#" + hex); + } + $(function() { + $("#red, #green, #blue").slider({ + orientation: 'horizontal', + range: "min", + max: 255, + value: 127, + slide: refreshSwatch, + change: refreshSwatch + }); + $("#red").slider("value", 255); + $("#green").slider("value", 140); + $("#blue").slider("value", 60); + }); + </script> +</head> +<body class="ui-widget-content" style="border:0;"> + +<div class="demo"> + +<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> +<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> +Simple Colorpicker +</p> + +<div id="red"></div> +<div id="green"></div> +<div id="blue"></div> + +<div id="swatch" class="ui-widget-content ui-corner-all"></div> + +</div><!-- End demo --> + +<div class="demo-description" style="clear:left;"> + +<p>Combine three sliders to create a simple RGB colorpicker.</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/colorpicker.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/colorpicker.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/colorpicker.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/default.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/default.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/default.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/default.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Slider - Default functionality</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.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #demo-frame > div.demo { padding: 10px !important; } + </style> + <script type="text/javascript"> + $(function() { + $("#slider").slider(); + }); + </script> +</head> +<body> + +<div class="demo"> + +<div id="slider"></div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/default.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/default.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/default.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/hotelrooms.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/hotelrooms.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/hotelrooms.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/hotelrooms.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Slider - Range with fixed minimum</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.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #demo-frame > div.demo { padding: 10px !important; }; + </style> + <script type="text/javascript"> + $(function() { + var select = $("#minbeds"); + var slider = $('<div id="slider"></div>').insertAfter(select).slider({ + min: 1, + max: 6, + range: "min", + value: select[0].selectedIndex + 1, + slide: function(event, ui) { + select[0].selectedIndex = ui.value - 1; + } + }); + $("#minbeds").click(function() { + slider.slider("value", this.selectedIndex + 1); + }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<form id="reservation"> + <label for="minbeds">Minimum number of beds</label> + <select name="minbeds" id="minbeds"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + <option>6</option> + </select> +</form> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/hotelrooms.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/hotelrooms.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/hotelrooms.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/index.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/index.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/index.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/index.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Slider 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="steps.html">Snap to increments</a></li> + <li><a href="range.html">Range slider</a></li> + <li><a href="rangemin.html">Range with fixed minimum</a></li> + <li><a href="hotelrooms.html">Room reservation</a></li> + <li><a href="rangemax.html">Range with fixed maximum</a></li> + <li><a href="slider-vertical.html">Vertical slider</a></li> + <li><a href="range-vertical.html">Vertical range slider</a></li> + <li><a href="multiple-vertical.html">Multiple sliders</a></li> + <li><a href="colorpicker.html">Simple colorpicker</a></li> + <li><a href="side-scroll.html">Simple scrollbar</a></li> + <li><a href="tabs.html">Slider controls tabs</a></li> + </ul> +</div> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/index.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/index.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/index.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/multiple-vertical.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/multiple-vertical.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/multiple-vertical.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/multiple-vertical.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Slider - Multiple sliders</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.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #demo-frame > div.demo { padding: 10px !important; } + #eq span { + height:120px; float:left; margin:15px + } + </style> + <script type="text/javascript"> + $(function() { + // setup master volume + $("#master").slider({ + value: 60, + orientation: "horizontal", + range: "min", + animate: true + }); + // setup graphic EQ + $("#eq > span").each(function() { + // read initial values from markup and remove that + var value = parseInt($(this).text()); + $(this).empty().slider({ + value: value, + range: "min", + animate: true, + orientation: "vertical" + }); + }); + }); + </script> +</head> +<body class="ui-widget-content" style="border:0;"> + +<div class="demo"> + +<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> +<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span> +Master volume +</p> + +<div id="master" style="width:260px; margin:15px;"></div> + +<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;"> +<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span> +Graphic EQ +</p> + +<div id="eq"> + <span>88</span> + <span>77</span> + <span>55</span> + <span>33</span> + <span>40</span> + <span>45</span> + <span>70</span> +</div> + +</div><!-- End demo --> + +<div class="demo-description" style="clear:left;"> + +<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/multiple-vertical.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/multiple-vertical.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/multiple-vertical.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range-vertical.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range-vertical.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range-vertical.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range-vertical.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Slider - Vertical range slider</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.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #demo-frame > div.demo { padding: 10px !important; }; + </style> + <script type="text/javascript"> + $(function() { + $("#slider-range").slider({ + orientation: "vertical", + range: true, + values: [17, 67], + slide: function(event, ui) { + $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]); + } + }); + $("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1)); + }); + </script> +</head> +<body> + +<div class="demo"> + +<p> +<label for="amount">Target sales goal (Millions):</label> +<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> +</p> + +<div id="slider-range" style="height:250px;"></div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Change the orientation of the range slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range-vertical.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range-vertical.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range-vertical.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range.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 Slider - Range slider</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.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #demo-frame > div.demo { padding: 10px !important; }; + </style> + <script type="text/javascript"> + $(function() { + $("#slider-range").slider({ + range: true, + min: 0, + max: 500, + values: [75, 300], + slide: function(event, ui) { + $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]); + } + }); + $("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1)); + }); + </script> +</head> +<body> + +<div class="demo"> + +<p> +<label for="amount">Price range:</label> +<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> +</p> + +<div id="slider-range"></div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Set the <code>range</code> option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/range.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemax.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemax.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemax.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemax.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Slider - Range with fixed maximum</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.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #demo-frame > div.demo { padding: 10px !important; }; + </style> + <script type="text/javascript"> + $(function() { + $("#slider-range-max").slider({ + range: "max", + min: 1, + max: 10, + value: 2, + slide: function(event, ui) { + $("#amount").val(ui.value); + } + }); + $("#amount").val($("#slider-range-max").slider("value")); + }); + </script> +</head> +<body> + +<div class="demo"> + +<p> +<labe for="amount">Minimum number of bedrooms:</label> +<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> +</p> +<div id="slider-range-max"></div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Fix the maximum value of the range slider so that the user can only select a minimum. Set the <code>range</code> option to "max."</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemax.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemax.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemax.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemin.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemin.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemin.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemin.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 Slider - Range with fixed minimum</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.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #demo-frame > div.demo { padding: 10px !important; }; + </style> + <script type="text/javascript"> + $(function() { + $("#slider-range-min").slider({ + range: "min", + value: 37, + min: 1, + max: 700, + slide: function(event, ui) { + $("#amount").val('$' + ui.value); + } + }); + $("#amount").val('$' + $("#slider-range-min").slider("value")); + }); + </script> +</head> +<body> + +<div class="demo"> + +<p> +<label for="amount">Maximum price:</label> +<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> +</p> + +<div id="slider-range-min"></div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Fix the minimum value of the range slider so that the user can only select a maximum. Set the <code>range</code> option to "min."</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemin.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemin.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/rangemin.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/side-scroll.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/side-scroll.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/side-scroll.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/side-scroll.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,138 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Slider - Slider scrollbar</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.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #demo-frame > div.demo { padding: 10px !important; } + .scroll-pane { overflow: auto; width: 99%; float:left; } + .scroll-content { width: 2440px; float: left; } + .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; } + * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */ + .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } + .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } + .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } + .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } + .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } + </style> + <script type="text/javascript"> + $(function() { + //scrollpane parts + var scrollPane = $('.scroll-pane'); + var scrollContent = $('.scroll-content'); + + //build slider + var scrollbar = $(".scroll-bar").slider({ + slide:function(e, ui){ + if( scrollContent.width() > scrollPane.width() ){ scrollContent.css('margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px'); } + else { scrollContent.css('margin-left', 0); } + } + }); + + //append icon to handle + var handleHelper = scrollbar.find('.ui-slider-handle') + .mousedown(function(){ + scrollbar.width( handleHelper.width() ); + }) + .mouseup(function(){ + scrollbar.width( '100%' ); + }) + .append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>') + .wrap('<div class="ui-handle-helper-parent"></div>').parent(); + + //change overflow to hidden now that slider handles the scrolling + scrollPane.css('overflow','hidden'); + + //size scrollbar and handle proportionally to scroll distance + function sizeScrollbar(){ + var remainder = scrollContent.width() - scrollPane.width(); + var proportion = remainder / scrollContent.width(); + var handleSize = scrollPane.width() - (proportion * scrollPane.width()); + scrollbar.find('.ui-slider-handle').css({ + width: handleSize, + 'margin-left': -handleSize/2 + }); + handleHelper.width('').width( scrollbar.width() - handleSize); + } + + //reset slider value based on scroll content position + function resetValue(){ + var remainder = scrollPane.width() - scrollContent.width(); + var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(scrollContent.css('margin-left')); + var percentage = Math.round(leftVal / remainder * 100); + scrollbar.slider("value", percentage); + } + //if the slider is 100% and window gets larger, reveal content + function reflowContent(){ + var showing = scrollContent.width() + parseInt( scrollContent.css('margin-left') ); + var gap = scrollPane.width() - showing; + if(gap > 0){ + scrollContent.css('margin-left', parseInt( scrollContent.css('margin-left') ) + gap); + } + } + + //change handle position on window resize + $(window) + .resize(function(){ + resetValue(); + sizeScrollbar(); + reflowContent(); + }); + //init scrollbar size + setTimeout(sizeScrollbar,10);//safari wants a timeout + }); + </script> +</head> +<body> + +<div class="demo"> + +<div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> + <div class="scroll-content"> + <div class="scroll-content-item ui-widget-header">1</div> + <div class="scroll-content-item ui-widget-header">2</div> + <div class="scroll-content-item ui-widget-header">3</div> + <div class="scroll-content-item ui-widget-header">4</div> + <div class="scroll-content-item ui-widget-header">5</div> + <div class="scroll-content-item ui-widget-header">6</div> + <div class="scroll-content-item ui-widget-header">7</div> + <div class="scroll-content-item ui-widget-header">8</div> + <div class="scroll-content-item ui-widget-header">9</div> + <div class="scroll-content-item ui-widget-header">10</div> + <div class="scroll-content-item ui-widget-header">11</div> + <div class="scroll-content-item ui-widget-header">12</div> + <div class="scroll-content-item ui-widget-header">13</div> + <div class="scroll-content-item ui-widget-header">14</div> + <div class="scroll-content-item ui-widget-header">15</div> + <div class="scroll-content-item ui-widget-header">16</div> + <div class="scroll-content-item ui-widget-header">17</div> + <div class="scroll-content-item ui-widget-header">18</div> + <div class="scroll-content-item ui-widget-header">19</div> + <div class="scroll-content-item ui-widget-header">20</div> + </div> + <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> + <div class="scroll-bar"></div> + </div> +</div> + + + +</div><!-- End demo --> + + + +<div class="demo-description"> + +<p>Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/side-scroll.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/side-scroll.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/side-scroll.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/slider-vertical.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/slider-vertical.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/slider-vertical.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/slider-vertical.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Slider - Vertical slider</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.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #demo-frame > div.demo { padding: 10px !important; }; + </style> + <script type="text/javascript"> + $(function() { + $("#slider-vertical").slider({ + orientation: "vertical", + range: "min", + min: 0, + max: 100, + value: 60, + slide: function(event, ui) { + $("#amount").val(ui.value); + } + }); + $("#amount").val($("#slider-vertical").slider("value")); + }); + </script> +</head> +<body> + +<div class="demo"> + +<p> +<label for="amount">Volume:</label> +<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> +</p> + +<div id="slider-vertical" style="height:200px;"></div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Change the orientation of the slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/slider-vertical.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/slider-vertical.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/slider-vertical.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/steps.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/steps.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/steps.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/steps.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 Slider - Snap to increments</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.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #demo-frame > div.demo { padding: 10px !important; }; + </style> + <script type="text/javascript"> + $(function() { + $("#slider").slider({ + value:100, + min: 0, + max: 500, + step: 50, + slide: function(event, ui) { + $("#amount").val('$' + ui.value); + } + }); + $("#amount").val('$' + $("#slider").slider("value")); + }); + </script> +</head> +<body> + +<div class="demo"> + +<p> +<label for="amount">Donation amount ($50 increments):</label> +<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> +</p> + +<div id="slider"></div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/steps.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/steps.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/steps.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/tabs.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/tabs.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/tabs.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/tabs.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Slider - Snap to increments</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.tabs.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #demo-frame > div.demo { padding: 10px !important; } + </style> + <script type="text/javascript"> + $(function() { + $("#tabs").tabs({ + select: function(event, ui) { + $("#slider").slider("value", ui.index); + } + }); + $("#slider").slider({ + min: 0, + max: $("#tabs").tabs("length") - 1, + slide: function(event, ui) { + $("#tabs").tabs("select", ui.value); + } + }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<div id="slider" style="width:100px"></div> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1">Nunc tincidunt</a></li> + <li><a href="#tabs-2">Proin dolor</a></li> + <li><a href="#tabs-3">Aenean lacinia</a></li> + </ul> + <div id="tabs-1"> + <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> + </div> + <div id="tabs-2"> + <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> + </div> + <div id="tabs-3"> + <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> + <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> + </div> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Control tabs with a slider.</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/tabs.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/tabs.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/slider/tabs.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists-through-tabs.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists-through-tabs.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists-through-tabs.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists-through-tabs.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Sortable - Connect lists with Tabs</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.sortable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } + </style> + <script type="text/javascript"> + $(function() { + $("#sortable1, #sortable2").sortable().disableSelection(); + + var $tabs = $("#tabs").tabs(); + + var $tab_items = $("ul:first li",$tabs).droppable({ + accept: ".connectedSortable li", + hoverClass: "ui-state-hover", + drop: function(ev, ui) { + var $item = $(this); + var $list = $($item.find('a').attr('href')).find('.connectedSortable'); + + ui.draggable.hide('slow', function() { + $tabs.tabs('select', $tab_items.index($item)); + $(this).appendTo($list).show('slow'); + }); + } + }); + }); + </script> +</head> +<body> +<div class="demo"> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1">Nunc tincidunt</a></li> + <li><a href="#tabs-2">Proin dolor</a></li> + </ul> + <div id="tabs-1"> + <ul id="sortable1" class="connectedSortable ui-helper-reset"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default">Item 2</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> + <li class="ui-state-default">Item 5</li> + </ul> + </div> + <div id="tabs-2"> + <ul id="sortable2" class="connectedSortable ui-helper-reset"> + <li class="ui-state-highlight">Item 1</li> + <li class="ui-state-highlight">Item 2</li> + <li class="ui-state-highlight">Item 3</li> + <li class="ui-state-highlight">Item 4</li> + <li class="ui-state-highlight">Item 5</li> + </ul> + </div> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> + Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above. +</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists-through-tabs.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists-through-tabs.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists-through-tabs.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists.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 Sortable - Connect lists</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.sortable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; } + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } + </style> + <script type="text/javascript"> + $(function() { + $("#sortable1, #sortable2").sortable({ + connectWith: '.connectedSortable' + }).disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<ul id="sortable1" class="connectedSortable"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default">Item 2</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> + <li class="ui-state-default">Item 5</li> +</ul> + +<ul id="sortable2" class="connectedSortable"> + <li class="ui-state-highlight">Item 1</li> + <li class="ui-state-highlight">Item 2</li> + <li class="ui-state-highlight">Item 3</li> + <li class="ui-state-highlight">Item 4</li> + <li class="ui-state-highlight">Item 5</li> +</ul> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> + Sort items from one list into another and vice versa, by passing a selector into + the <code>connectWith</code> option. The simplest way to do this is to + group all related lists with a CSS class, and then pass that class into the + sortable function (i.e., <code>connectWith: '.myclass'</code>). +</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/connect-lists.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/default.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/default.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/default.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/default.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 Sortable - Default functionality</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.sortable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } + #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } + #sortable li span { position: absolute; margin-left: -1.3em; } + </style> + <script type="text/javascript"> + $(function() { + $("#sortable").sortable(); + $("#sortable").disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<ul id="sortable"> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> + <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> +</ul> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> + Enable a group of DOM elements to be sortable. Click on and drag an + element to a new spot within the list, and the other items will adjust to + fit. By default, sortable items share <code>draggable</code> properties. +</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/default.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/default.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/default.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/delay-start.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/delay-start.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/delay-start.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/delay-start.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Sortable - Delay start</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.sortable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; } + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; } + </style> + <script type="text/javascript"> + $(function() { + $("#sortable1").sortable({ + delay: 300 + }); + + $("#sortable2").sortable({ + distance: 15 + }); + + $("li").disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<h3 class="docs">Time delay of 300ms:</h3> + +<ul id="sortable1"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default">Item 2</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> +</ul> + +<h3 class="docs">Distance delay of 15px:</h3> + +<ul id="sortable2"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default">Item 2</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> +</ul> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> + Prevent accidental sorting either by delay (time) or distance. Set a number of + milliseconds the element needs to be dragged before sorting starts + with the <code>delay</code> option. Set a distance in pixels the element + needs to be dragged before sorting starts with the <code>distance</code> + option. +</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/delay-start.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/delay-start.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/delay-start.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/display-grid.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/display-grid.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/display-grid.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/display-grid.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Sortable - Display as 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.sortable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #sortable { list-style-type: none; margin: 0; padding: 0; } + #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } + </style> + <script type="text/javascript"> + $(function() { + $("#sortable").sortable(); + $("#sortable").disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<ul id="sortable"> + <li class="ui-state-default">1</li> + <li class="ui-state-default">2</li> + <li class="ui-state-default">3</li> + <li class="ui-state-default">4</li> + <li class="ui-state-default">5</li> + <li class="ui-state-default">6</li> + <li class="ui-state-default">7</li> + <li class="ui-state-default">8</li> + <li class="ui-state-default">9</li> + <li class="ui-state-default">10</li> + <li class="ui-state-default">11</li> + <li class="ui-state-default">12</li> +</ul> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> + To arrange sortable items as a grid, give them identical dimensions and + float them using CSS. +</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/display-grid.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/display-grid.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/display-grid.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/empty-lists.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/empty-lists.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/empty-lists.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/empty-lists.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Sortable - Handle empty lists</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.sortable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;} + #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; } + </style> + <script type="text/javascript"> + $(function() { + $("ul.droptrue").sortable({ + connectWith: 'ul' + }); + + $("ul.dropfalse").sortable({ + connectWith: 'ul', + dropOnEmpty: false + }); + + $("#sortable1, #sortable2, #sortable3").disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<ul id="sortable1" class='droptrue'> + <li class="ui-state-default">Can be dropped..</li> + <li class="ui-state-default">..on an empty list</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> + <li class="ui-state-default">Item 5</li> +</ul> + +<ul id="sortable2" class='dropfalse'> + <li class="ui-state-highlight">Cannot be dropped..</li> + <li class="ui-state-highlight">..on an empty list</li> + <li class="ui-state-highlight">Item 3</li> + <li class="ui-state-highlight">Item 4</li> + <li class="ui-state-highlight">Item 5</li> +</ul> + +<ul id="sortable3" class='droptrue'> +</ul> + +<br clear="both" /> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> + Prevent all items in a list from being dropped into a separate, empty list + using the <code>dropOnEmpty</code> option set to <code>false</code>. By default, + sortable items can be dropped on empty lists. +</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/empty-lists.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/empty-lists.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/empty-lists.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/index.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/index.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/index.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/index.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Sortable 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="placeholder.html">Drop placeholder</a></li> + <li><a href="connect-lists.html">Connect lists</a></li> + <li><a href="connect-lists-through-tabs.html">Connect lists through tabs</a></li> + <li><a href="empty-lists.html">Handle empty lists</a></li> + <li><a href="items.html">Include / exclude items</a></li> + <li><a href="delay-start.html">Delay start</a></li> + <li><a href="display-grid.html">Display as grid</a></li> + <li><a href="portlets.html">Portlets</a></li> + </ul> +</div> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/index.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/index.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/index.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/items.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/items.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/items.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/items.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Sortable - Include / exclude items</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.sortable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; } + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; } + </style> + <script type="text/javascript"> + $(function() { + $("#sortable1").sortable({ + items: 'li:not(.ui-state-disabled)' + }); + + $("#sortable2").sortable({ + cancel: '.ui-state-disabled' + }); + + $("#sortable1 li, #sortable2 li").disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<h3 class="docs">Specify which items are sortable:</h3> + +<ul id="sortable1"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li> + <li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li> + <li class="ui-state-default">Item 4</li> +</ul> + +<h3 class="docs">Cancel sorting (but keep as drop targets):</h3> + +<ul id="sortable2"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li> + <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li> + <li class="ui-state-default">Item 4</li> +</ul> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> + Specify which items are eligible to sort by passing a jQuery selector into + the <code>items</code> option. Items excluded from this option are not + sortable, nor are they valid targets for sortable items. +</p> + +<p> + To only prevent sorting on certain items, pass a jQuery selector into the + <code>cancel</code> option. Cancelled items remain valid sort targets for + others. +</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/items.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/items.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/items.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/placeholder.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/placeholder.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/placeholder.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/placeholder.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Sortable - Drop placeholder</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.sortable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } + #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } + html>body #sortable li { height: 1.5em; line-height: 1.2em; } + .ui-state-highlight { height: 1.5em; line-height: 1.2em; } + </style> + <script type="text/javascript"> + $(function() { + $("#sortable").sortable({ + placeholder: 'ui-state-highlight' + }); + $("#sortable").disableSelection(); + }); + </script> +</head> +<body> +<div class="demo"> + +<ul id="sortable"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default">Item 2</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> + <li class="ui-state-default">Item 5</li> + <li class="ui-state-default">Item 6</li> + <li class="ui-state-default">Item 7</li> +</ul> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> + When dragging a sortable item to a new location, other items will make room + for the that item by shifting to allow white space between them. Pass a + class into the <code>placeholder</code> option to style that space to + be visible. Use the boolean <code>forcePlaceholderSize</code> option + to set dimensions on the placeholder. +</p> + +</div><!-- End demo-description --> + +</body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/placeholder.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/placeholder.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/demos/sortable/placeholder.html ------------------------------------------------------------------------------ svn:mime-type = text/html |
«
Return to OFBiz - Commits
|
1 view|%1 views
| Free forum by Nabble | Edit this page |