http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/show/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/show/default.html b/content/development-bundle/demos/show/default.html new file mode 100644 index 0000000..0938ed0 --- /dev/null +++ b/content/development-bundle/demos/show/default.html @@ -0,0 +1,97 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects - Show Demo</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.effect.js"></script> + <script src="../../ui/jquery.ui.effect-blind.js"></script> + <script src="../../ui/jquery.ui.effect-bounce.js"></script> + <script src="../../ui/jquery.ui.effect-clip.js"></script> + <script src="../../ui/jquery.ui.effect-drop.js"></script> + <script src="../../ui/jquery.ui.effect-explode.js"></script> + <script src="../../ui/jquery.ui.effect-fold.js"></script> + <script src="../../ui/jquery.ui.effect-highlight.js"></script> + <script src="../../ui/jquery.ui.effect-pulsate.js"></script> + <script src="../../ui/jquery.ui.effect-scale.js"></script> + <script src="../../ui/jquery.ui.effect-shake.js"></script> + <script src="../../ui/jquery.ui.effect-slide.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .toggler { width: 500px; height: 200px; } + #button { padding: .5em 1em; text-decoration: none; } + #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } + #effect h3 { margin: 0; padding: 0.4em; text-align: center; } + </style> + <script> + $(function() { + // run the currently selected effect + function runEffect() { + // get effect type from + var selectedEffect = $( "#effectTypes" ).val(); + + // most effect types need no options passed by default + var options = {}; + // some effects have required parameters + if ( selectedEffect === "scale" ) { + options = { percent: 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" ).fadeOut(); + }, 1000 ); + }; + + // set effect from select menu value + $( "#button" ).click(function() { + runEffect(); + return false; + }); + + $( "#effect" ).hide(); + }); + </script> +</head> +<body> + +<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 class="demo-description"> +<p>Click the button above to preview the effect.</p> +</div> +</body> +</html>
http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/show/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/show/index.html b/content/development-bundle/demos/show/index.html new file mode 100644 index 0000000..3620fd7 --- /dev/null +++ b/content/development-bundle/demos/show/index.html @@ -0,0 +1,14 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/slider/colorpicker.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/slider/colorpicker.html b/content/development-bundle/demos/slider/colorpicker.html new file mode 100644 index 0000000..f453a7c --- /dev/null +++ b/content/development-bundle/demos/slider/colorpicker.html @@ -0,0 +1,87 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider - Colorpicker</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.slider.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #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; } + </style> + <script> + 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;"> + +<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 class="demo-description"> +<p>Combine three sliders to create a simple RGB colorpicker.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/slider/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/slider/default.html b/content/development-bundle/demos/slider/default.html new file mode 100644 index 0000000..5092c66 --- /dev/null +++ b/content/development-bundle/demos/slider/default.html @@ -0,0 +1,27 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8" > + <title>jQuery UI Slider - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.slider.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#slider" ).slider(); + }); + </script> +</head> +<body> + +<div id="slider"></div> + +<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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/slider/hotelrooms.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/slider/hotelrooms.html b/content/development-bundle/demos/slider/hotelrooms.html new file mode 100644 index 0000000..24b6672 --- /dev/null +++ b/content/development-bundle/demos/slider/hotelrooms.html @@ -0,0 +1,49 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider - Slider bound to select</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.slider.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(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" ).change(function() { + slider.slider( "value", this.selectedIndex + 1 ); + }); + }); + </script> +</head> +<body> + +<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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/slider/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/slider/index.html b/content/development-bundle/demos/slider/index.html new file mode 100644 index 0000000..2d05bb5 --- /dev/null +++ b/content/development-bundle/demos/slider/index.html @@ -0,0 +1,24 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider Demos</title> +</head> +<body> + +<ul> + <li><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> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/slider/multiple-vertical.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/slider/multiple-vertical.html b/content/development-bundle/demos/slider/multiple-vertical.html new file mode 100644 index 0000000..0ce36d5 --- /dev/null +++ b/content/development-bundle/demos/slider/multiple-vertical.html @@ -0,0 +1,69 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider - Multiple sliders</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.slider.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #eq span { + height:120px; float:left; margin:15px + } + </style> + <script> + $(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(), 10 ); + $( this ).empty().slider({ + value: value, + range: "min", + animate: true, + orientation: "vertical" + }); + }); + }); + </script> +</head> +<body> + +<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 class="demo-description"> +<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/slider/range-vertical.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/slider/range-vertical.html b/content/development-bundle/demos/slider/range-vertical.html new file mode 100644 index 0000000..d024aee --- /dev/null +++ b/content/development-bundle/demos/slider/range-vertical.html @@ -0,0 +1,41 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider - Vertical range slider</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.slider.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(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> + +<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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/slider/range.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/slider/range.html b/content/development-bundle/demos/slider/range.html new file mode 100644 index 0000000..fce03e3 --- /dev/null +++ b/content/development-bundle/demos/slider/range.html @@ -0,0 +1,42 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider - Range slider</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.slider.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(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> + +<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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/slider/rangemax.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/slider/rangemax.html b/content/development-bundle/demos/slider/rangemax.html new file mode 100644 index 0000000..85385a2 --- /dev/null +++ b/content/development-bundle/demos/slider/rangemax.html @@ -0,0 +1,40 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider - Range with fixed maximum</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.slider.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(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> + +<p> + <label 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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/slider/rangemin.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/slider/rangemin.html b/content/development-bundle/demos/slider/rangemin.html new file mode 100644 index 0000000..8aec589 --- /dev/null +++ b/content/development-bundle/demos/slider/rangemin.html @@ -0,0 +1,41 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider - Range with fixed minimum</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.slider.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(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> + +<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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/slider/side-scroll.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/slider/side-scroll.html b/content/development-bundle/demos/slider/side-scroll.html new file mode 100644 index 0000000..e84c5b0 --- /dev/null +++ b/content/development-bundle/demos/slider/side-scroll.html @@ -0,0 +1,132 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider - Slider scrollbar</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.slider.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .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> + $(function() { + //scrollpane parts + var scrollPane = $( ".scroll-pane" ), + scrollContent = $( ".scroll-content" ); + + //build slider + var scrollbar = $( ".scroll-bar" ).slider({ + slide: function( event, 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" ), 10 ); + var gap = scrollPane.width() - showing; + if ( gap > 0 ) { + scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + 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="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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/slider/slider-vertical.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/slider/slider-vertical.html b/content/development-bundle/demos/slider/slider-vertical.html new file mode 100644 index 0000000..264ef2a --- /dev/null +++ b/content/development-bundle/demos/slider/slider-vertical.html @@ -0,0 +1,42 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider - Vertical slider</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.slider.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(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> + +<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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/slider/steps.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/slider/steps.html b/content/development-bundle/demos/slider/steps.html new file mode 100644 index 0000000..bd5e890 --- /dev/null +++ b/content/development-bundle/demos/slider/steps.html @@ -0,0 +1,41 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider - Snap to increments</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.slider.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(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> + +<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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/sortable/connect-lists-through-tabs.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/sortable/connect-lists-through-tabs.html b/content/development-bundle/demos/sortable/connect-lists-through-tabs.html new file mode 100644 index 0000000..2ef6fdc --- /dev/null +++ b/content/development-bundle/demos/sortable/connect-lists-through-tabs.html @@ -0,0 +1,72 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Connect lists with Tabs</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <script src="../../ui/jquery.ui.tabs.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } + </style> + <script> + $(function() { + $( "#sortable1, #sortable2" ).sortable().disableSelection(); + + var $tabs = $( "#tabs" ).tabs(); + + var $tab_items = $( "ul:first li", $tabs ).droppable({ + accept: ".connectedSortable li", + hoverClass: "ui-state-hover", + drop: function( event, ui ) { + var $item = $( this ); + var $list = $( $item.find( "a" ).attr( "href" ) ) + .find( ".connectedSortable" ); + + ui.draggable.hide( "slow", function() { + $tabs.tabs( "select", $tab_items.index( $item ) ); + $( this ).appendTo( $list ).show( "slow" ); + }); + } + }); + }); + </script> +</head> +<body> + +<div 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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/sortable/connect-lists.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/sortable/connect-lists.html b/content/development-bundle/demos/sortable/connect-lists.html new file mode 100644 index 0000000..dd845ad --- /dev/null +++ b/content/development-bundle/demos/sortable/connect-lists.html @@ -0,0 +1,52 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Connect lists</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; } + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } + </style> + <script> + $(function() { + $( "#sortable1, #sortable2" ).sortable({ + connectWith: ".connectedSortable" + }).disableSelection(); + }); + </script> +</head> +<body> + +<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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/sortable/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/sortable/default.html b/content/development-bundle/demos/sortable/default.html new file mode 100644 index 0000000..843be32 --- /dev/null +++ b/content/development-bundle/demos/sortable/default.html @@ -0,0 +1,45 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } + #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } + #sortable li span { position: absolute; margin-left: -1.3em; } + </style> + <script> + $(function() { + $( "#sortable" ).sortable(); + $( "#sortable" ).disableSelection(); + }); + </script> +</head> +<body> + +<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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/sortable/delay-start.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/sortable/delay-start.html b/content/development-bundle/demos/sortable/delay-start.html new file mode 100644 index 0000000..5c2cd36 --- /dev/null +++ b/content/development-bundle/demos/sortable/delay-start.html @@ -0,0 +1,61 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Delay start</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; } + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; } + </style> + <script> + $(function() { + $( "#sortable1" ).sortable({ + delay: 300 + }); + + $( "#sortable2" ).sortable({ + distance: 15 + }); + + $( "li" ).disableSelection(); + }); + </script> +</head> +<body> + +<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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/sortable/display-grid.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/sortable/display-grid.html b/content/development-bundle/demos/sortable/display-grid.html new file mode 100644 index 0000000..af02a45 --- /dev/null +++ b/content/development-bundle/demos/sortable/display-grid.html @@ -0,0 +1,48 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Display as grid</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; } + #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } + </style> + <script> + $(function() { + $( "#sortable" ).sortable(); + $( "#sortable" ).disableSelection(); + }); + </script> +</head> +<body> + +<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 class="demo-description"> +<p> + To arrange sortable items as a grid, give them identical dimensions and + float them using CSS. +</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/sortable/empty-lists.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/sortable/empty-lists.html b/content/development-bundle/demos/sortable/empty-lists.html new file mode 100644 index 0000000..cd8fa31 --- /dev/null +++ b/content/development-bundle/demos/sortable/empty-lists.html @@ -0,0 +1,63 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Handle empty lists</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;} + #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; } + </style> + <script> + $(function() { + $( "ul.droptrue" ).sortable({ + connectWith: "ul" + }); + + $( "ul.dropfalse" ).sortable({ + connectWith: "ul", + dropOnEmpty: false + }); + + $( "#sortable1, #sortable2, #sortable3" ).disableSelection(); + }); + </script> +</head> +<body> + +<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 style="clear:both"> + +<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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/sortable/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/sortable/index.html b/content/development-bundle/demos/sortable/index.html new file mode 100644 index 0000000..66b0b5c --- /dev/null +++ b/content/development-bundle/demos/sortable/index.html @@ -0,0 +1,22 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable Demos</title> +</head> +<body> + +<ul> + <li><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> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/sortable/items.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/sortable/items.html b/content/development-bundle/demos/sortable/items.html new file mode 100644 index 0000000..bbdcba0 --- /dev/null +++ b/content/development-bundle/demos/sortable/items.html @@ -0,0 +1,64 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Include / exclude items</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; } + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; } + </style> + <script> + $(function() { + $( "#sortable1" ).sortable({ + items: "li:not(.ui-state-disabled)" + }); + + $( "#sortable2" ).sortable({ + cancel: ".ui-state-disabled" + }); + + $( "#sortable1 li, #sortable2 li" ).disableSelection(); + }); + </script> +</head> +<body> + +<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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/sortable/placeholder.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/sortable/placeholder.html b/content/development-bundle/demos/sortable/placeholder.html new file mode 100644 index 0000000..609324f --- /dev/null +++ b/content/development-bundle/demos/sortable/placeholder.html @@ -0,0 +1,50 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Drop placeholder</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } + #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } + html>body #sortable li { height: 1.5em; line-height: 1.2em; } + .ui-state-highlight { height: 1.5em; line-height: 1.2em; } + </style> + <script> + $(function() { + $( "#sortable" ).sortable({ + placeholder: "ui-state-highlight" + }); + $( "#sortable" ).disableSelection(); + }); + </script> +</head> +<body> + +<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 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> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/sortable/portlets.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/sortable/portlets.html b/content/development-bundle/demos/sortable/portlets.html new file mode 100644 index 0000000..68c668c --- /dev/null +++ b/content/development-bundle/demos/sortable/portlets.html @@ -0,0 +1,90 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Sortable - Portlets</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .column { width: 170px; float: left; padding-bottom: 100px; } + .portlet { margin: 0 1em 1em 0; } + .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; } + .portlet-header .ui-icon { float: right; } + .portlet-content { padding: 0.4em; } + .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; } + .ui-sortable-placeholder * { visibility: hidden; } + </style> + <script> + $(function() { + $( ".column" ).sortable({ + connectWith: ".column" + }); + + $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ) + .find( ".portlet-header" ) + .addClass( "ui-widget-header ui-corner-all" ) + .prepend( "<span class='ui-icon ui-icon-minusthick'></span>") + .end() + .find( ".portlet-content" ); + + $( ".portlet-header .ui-icon" ).click(function() { + $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" ); + $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle(); + }); + + $( ".column" ).disableSelection(); + }); + </script> +</head> +<body> + +<div class="column"> + + <div class="portlet"> + <div class="portlet-header">Feeds</div> + <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> + </div> + + <div class="portlet"> + <div class="portlet-header">News</div> + <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> + </div> + +</div> + +<div class="column"> + + <div class="portlet"> + <div class="portlet-header">Shopping</div> + <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> + </div> + +</div> + +<div class="column"> + + <div class="portlet"> + <div class="portlet-header">Links</div> + <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> + </div> + + <div class="portlet"> + <div class="portlet-header">Images</div> + <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> + </div> + +</div> + +<div class="demo-description"> +<p> + Enable portlets (styled divs) as sortables and use the <code>connectWith</code> + option to allow sorting between columns. +</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/spinner/currency.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/spinner/currency.html b/content/development-bundle/demos/spinner/currency.html new file mode 100644 index 0000000..98ff5f6 --- /dev/null +++ b/content/development-bundle/demos/spinner/currency.html @@ -0,0 +1,52 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Spinner - Currency</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../external/jquery.mousewheel.js"></script> + <script src="../../external/globalize.js"></script> + <script src="../../external/globalize.culture.de-DE.js"></script> + <script src="../../external/globalize.culture.ja-JP.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.spinner.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#currency" ).change(function() { + $( "#spinner" ).spinner( "option", "culture", $( this ).val() ); + }); + + $( "#spinner" ).spinner({ + min: 5, + max: 2500, + step: 25, + start: 1000, + numberFormat: "C" + }); + }); + </script> +</head> +<body> + +<p> + <label for="currency">Currency to donate</label> + <select id="currency" name="currency"> + <option value="en-US">US $</option> + <option value="de-DE">EUR â¬</option> + <option value="ja-JP">YEN Â¥</option> + </select> +</p> +<p> + <label for="spinner">Amount to donate:</label> + <input id="spinner" name="spinner" value="5"> +</p> + +<div class="demo-description"> +<p>Example of a donation form, with currency selection and amount spinner.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/spinner/decimal.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/spinner/decimal.html b/content/development-bundle/demos/spinner/decimal.html new file mode 100644 index 0000000..a6dfb98 --- /dev/null +++ b/content/development-bundle/demos/spinner/decimal.html @@ -0,0 +1,56 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Spinner - Decimal</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../external/jquery.mousewheel.js"></script> + <script src="../../external/globalize.js"></script> + <script src="../../external/globalize.culture.de-DE.js"></script> + <script src="../../external/globalize.culture.ja-JP.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.spinner.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#spinner" ).spinner({ + step: 0.01, + numberFormat: "n" + }); + + $( "#culture" ).change(function() { + var current = $( "#spinner" ).spinner( "value" ); + Globalize.culture( $(this).val() ); + $( "#spinner" ).spinner( "value", current ); + }); + }); + </script> +</head> +<body> + +<p> + <label for="spinner">Decimal spinner:</label> + <input id="spinner" name="spinner" value="5.06"> +</p> +<p> + <label for="culture">Select a culture to use for formatting:</label> + <select id="culture"> + <option value="en-EN" selected="selected">English</option> + <option value="de-DE">German</option> + <option value="ja-JP">Japanese</option> + </select> +</p> + +<div class="demo-description"> +<p> + Example of a decimal spinner. Step is set to 0.01. + <br>The code handling the culture change reads the current spinner value, + then changes the culture, then sets the value again, resulting in an updated + formatting, based on the new culture. +</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/spinner/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/spinner/default.html b/content/development-bundle/demos/spinner/default.html new file mode 100644 index 0000000..4739c89 --- /dev/null +++ b/content/development-bundle/demos/spinner/default.html @@ -0,0 +1,64 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Spinner - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../external/jquery.mousewheel.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.spinner.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + var spinner = $( "#spinner" ).spinner(); + + $( "#disable" ).click(function() { + if ( spinner.spinner( "option", "disabled" ) ) { + spinner.spinner( "enable" ); + } else { + spinner.spinner( "disable" ); + } + }); + $( "#destroy" ).click(function() { + if ( spinner.data( "ui-spinner" ) ) { + spinner.spinner( "destroy" ); + } else { + spinner.spinner(); + } + }); + $( "#getvalue" ).click(function() { + alert( spinner.spinner( "value" ) ); + }); + $( "#setvalue" ).click(function() { + spinner.spinner( "value", 5 ); + }); + + $( "button" ).button(); + }); + </script> +</head> +<body> + +<p> + <label for="spinner">Select a value:</label> + <input id="spinner" name="value"> +</p> + +<p> + <button id="disable">Toggle disable/enable</button> + <button id="destroy">Toggle widget</button> +</p> + +<p> + <button id="getvalue">Get value</button> + <button id="setvalue">Set value to 5</button> +</p> + +<div class="demo-description"> +<p>Default spinner.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/spinner/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/spinner/index.html b/content/development-bundle/demos/spinner/index.html new file mode 100644 index 0000000..f3c74d0 --- /dev/null +++ b/content/development-bundle/demos/spinner/index.html @@ -0,0 +1,19 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Spinner Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="decimal.html">Decimal</a></li> + <li><a href="currency.html">Currency</a></li> + <li><a href="latlong.html">Map</a></li> + <li><a href="time.html">Time</a></li> + <li><a href="overflow.html">Overflow</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/spinner/latlong.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/spinner/latlong.html b/content/development-bundle/demos/spinner/latlong.html new file mode 100644 index 0000000..a982cff --- /dev/null +++ b/content/development-bundle/demos/spinner/latlong.html @@ -0,0 +1,57 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Spinner - Map</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="http://maps.google.com/maps/api/js?sensor=false";></script> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../external/jquery.mousewheel.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.spinner.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + function latlong() { + return new google.maps.LatLng( $("#lat").val(), $("#lng").val() ); + } + function position() { + map.setCenter( latlong() ); + } + $( "#lat, #lng" ).spinner({ + step: .001, + change: position, + stop: position + }); + + var map = new google.maps.Map( $("#map")[0], { + zoom: 8, + center: latlong(), + mapTypeId: google.maps.MapTypeId.ROADMAP + }); + }); + </script> + <style> + #map { + width:500px; + height:500px; + } + </style> +</head> +<body> + +<label for="lat">Latitude</label> +<input id="lat" name="lat" value="44.797"> +<br> +<label for="lng">Longitude</label> +<input id="lng" name="lng" value="-93.278"> + +<div id="map"></div> + +<div class="demo-description"> +<p>Google Maps integration, using spinners to change latidude and longitude.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/spinner/overflow.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/spinner/overflow.html b/content/development-bundle/demos/spinner/overflow.html new file mode 100644 index 0000000..f26aeb9 --- /dev/null +++ b/content/development-bundle/demos/spinner/overflow.html @@ -0,0 +1,44 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Spinner - Overflow</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../external/jquery.mousewheel.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.spinner.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#spinner" ).spinner({ + spin: function( event, ui ) { + if ( ui.value > 10 ) { + $( this ).spinner( "value", -10 ); + return false; + } else if ( ui.value < -10 ) { + $( this ).spinner( "value", 10 ); + return false; + } + } + }); + }); + </script> +</head> +<body> + +<p> + <label for="spinner">Select a value:</label> + <input id="spinner" name="value" /> +</p> + +<div class="demo-description"> +<p> +Overflowing spinner restricted to a range of -10 to 10. +For anything above 10, it'll overflow to -10, and the other way round. +</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/spinner/time.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/spinner/time.html b/content/development-bundle/demos/spinner/time.html new file mode 100644 index 0000000..ee1963a --- /dev/null +++ b/content/development-bundle/demos/spinner/time.html @@ -0,0 +1,74 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Spinner - Time</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../external/jquery.mousewheel.js"></script> + <script src="../../external/globalize.js"></script> + <script src="../../external/globalize.culture.de-DE.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.spinner.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $.widget( "ui.timespinner", $.ui.spinner, { + options: { + // seconds + step: 60 * 1000, + // hours + page: 60 + }, + + _parse: function( value ) { + if ( typeof value === "string" ) { + // already a timestamp + if ( Number( value ) == value ) { + return Number( value ); + } + return +Globalize.parseDate( value ); + } + return value; + }, + + _format: function( value ) { + return Globalize.format( new Date(value), "t" ); + } + }); + + $(function() { + $( "#spinner" ).timespinner(); + + $( "#culture" ).change(function() { + var current = $( "#spinner" ).timespinner( "value" ); + Globalize.culture( $(this).val() ); + $( "#spinner" ).timespinner( "value", current ); + }); + }); + </script> +</head> +<body> + +<p> + <label for="spinner">Time spinner:</label> + <input id="spinner" name="spinner" value="08:30 PM"> +</p> +<p> + <label for="culture">Select a culture to use for formatting:</label> + <select id="culture"> + <option value="en-EN" selected="selected">English</option> + <option value="de-DE">German</option> + </select> +</p> + +<div class="demo-description"> +<p> + A custom widget extending spinner. Use the Globalization plugin to parse and output + a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down + spins hours. +</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/switchClass/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/switchClass/default.html b/content/development-bundle/demos/switchClass/default.html new file mode 100644 index 0000000..dbb28cf --- /dev/null +++ b/content/development-bundle/demos/switchClass/default.html @@ -0,0 +1,40 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects - switchClass Demo</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.effect.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .toggler { width: 500px; height: 200px; position: relative; } + #button { padding: .5em 1em; text-decoration: none; } + #effect { position: relative; } + .newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; } + .anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } + </style> + <script> + $(function() { + $( "#button" ).click(function(){ + $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 ); + $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 ); + return false; + }); + }); + </script> +</head> +<body> + +<div class="toggler"> + <div id="effect" class="newClass ui-corner-all"> + Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. + </div> +</div> +<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> + +<div class="demo-description"> +<p>Click the button above to preview the effect.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/switchClass/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/switchClass/index.html b/content/development-bundle/demos/switchClass/index.html new file mode 100644 index 0000000..3620fd7 --- /dev/null +++ b/content/development-bundle/demos/switchClass/index.html @@ -0,0 +1,14 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/ajax.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/tabs/ajax.html b/content/development-bundle/demos/tabs/ajax.html new file mode 100644 index 0000000..6adbc6d --- /dev/null +++ b/content/development-bundle/demos/tabs/ajax.html @@ -0,0 +1,46 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Tabs - Content via Ajax</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.tabs.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#tabs" ).tabs({ + beforeLoad: function( event, ui ) { + ui.jqXHR.error(function() { + ui.panel.html( + "Couldn't load this tab. We'll try to fix this as soon as possible. " + + "If this wouldn't be a demo." ); + }); + } + }); + }); + </script> +</head> +<body> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1">Preloaded</a></li> + <li><a href="ajax/content1.html">Tab 1</a></li> + <li><a href="ajax/content2.html">Tab 2</a></li> + <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> + <li><a href="ajax/content4-broken.php">Tab 4 (broken)</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> + +<div class="demo-description"> +<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p> +<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/ajax/content1.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/tabs/ajax/content1.html b/content/development-bundle/demos/tabs/ajax/content1.html new file mode 100644 index 0000000..472bdfb --- /dev/null +++ b/content/development-bundle/demos/tabs/ajax/content1.html @@ -0,0 +1,4 @@ +<p><strong>This content was loaded via ajax.</strong></p> +<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> +<p>Mauris vitae ante. Curabitur augue. Nulla purus nibh, lobortis ut, feugiat at, aliquam id, purus. Sed venenatis, lorem venenatis volutpat commodo, purus quam lacinia justo, mattis interdum pede pede a odio. Fusce nibh. Morbi nisl mauris, dapibus in, tristique eget, accumsan et, pede. Donec mauris risus, pulvinar ut, faucibus eu, mollis in, nunc. In augue massa, commodo a, cursus vehicula, varius eu, dui. Suspendisse sodales suscipit lorem. Morbi malesuada, eros quis condimentum dignissim, lectus nibh tristique urna, non bibendum diam massa vel risus. Morbi suscipit. Proin egestas, eros at scelerisque scelerisque, dolor lacus fringilla lacus, ut ullamcorper mi magna at quam. Aliquam sed elit. Aliquam turpis purus, congue quis, iaculis id, ullamcorper sit amet, justo. Maecenas sed mauris. Proin magna justo, interdum in, tincidunt eu, viverra eu, turpis. Suspendisse mollis. In magna. Phasellus pellentesque, urna pellentesque convallis pellentesque, augue sem blandit pede, at rhoncus libero nisl a odio.</p> +<p>Sed vitae nibh non magna semper tempor. Duis dolor. Nam congue laoreet arcu. Fusce lobortis enim quis ligula. Maecenas commodo odio id mi. Maecenas scelerisque tellus eu odio. Etiam dolor purus, lacinia a, imperdiet in, aliquam et, eros. In pellentesque. Nullam ac massa. Integer et turpis. Ut quam augue, congue non, imperdiet id, eleifend ac, nisi. Etiam ac arcu. Cras iaculis accumsan erat. Nullam vulputate sapien nec nisi pretium rhoncus. Aliquam a nibh. Vivamus est ante, fermentum a, tincidunt ut, imperdiet nec, velit. Aenean non tortor. Sed nec mauris eget tellus condimentum rutrum.</p> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/ajax/content2.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/tabs/ajax/content2.html b/content/development-bundle/demos/tabs/ajax/content2.html new file mode 100644 index 0000000..18b03e4 --- /dev/null +++ b/content/development-bundle/demos/tabs/ajax/content2.html @@ -0,0 +1,4 @@ +<p><strong>This other content was loaded via ajax.</strong></p> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis justo, et facilisis ligula. In congue interdum odio, a scelerisque eros posuere ac. Aenean massa tellus, dictum sit amet laoreet ut, aliquam in orci. Duis eu aliquam ligula. Nullam vel placerat ligula. Fusce venenatis viverra dictum. Phasellus dui dolor, imperdiet in sodales at, mattis sed libero. Morbi ac ipsum ligula. Quisque suscipit dui vel diam pretium nec cursus lacus malesuada. Donec sollicitudin, eros eget dignissim mollis, risus leo feugiat tellus, vel posuere nisl ipsum eu erat. Quisque posuere lacinia imperdiet. Quisque nunc leo, elementum quis ultricies et, vehicula sit amet turpis. Nullam sed nunc nec nibh condimentum mattis. Quisque sed ligula sit amet nisi ultricies bibendum eget id nisi.</p> +<p>Proin ut erat vel nunc tincidunt commodo. Curabitur feugiat, nisi et vehicula viverra, nisl orci eleifend arcu, sed blandit lectus nisl quis nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aenean rutrum gravida velit ac imperdiet. Integer vitae arcu risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt orci at leo egestas porta. Vivamus ac augue et enim bibendum hendrerit ut id urna. Donec sollicitudin pulvinar turpis vitae scelerisque. Etiam tempor porttitor est sed blandit. Phasellus varius consequat leo eget tincidunt. Aliquam ac dui lectus. In et consectetur orci. Duis posuere nulla ac turpis faucibus vestibulum. Sed ut velit et dolor rhoncus dapibus. Sed sit amet pellentesque est.</p> +<p>Nam in volutpat orci. Morbi sit amet orci in erat egestas dignissim. Etiam mi sapien, tempus sed iaculis a, adipiscing quis tellus. Suspendisse potenti. Nam malesuada tristique vestibulum. In tempor tellus dignissim neque consectetur eu vestibulum nisl pellentesque. Phasellus ultrices cursus velit, id aliquam nisl fringilla quis. Cras varius elit sed urna ultrices congue. Sed ornare odio sed velit pellentesque id varius nisl sodales. Sed auctor ligula egestas mi pharetra ut consectetur erat pharetra.</p> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/ajax/content3-slow.php ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/tabs/ajax/content3-slow.php b/content/development-bundle/demos/tabs/ajax/content3-slow.php new file mode 100644 index 0000000..7ad43ec --- /dev/null +++ b/content/development-bundle/demos/tabs/ajax/content3-slow.php @@ -0,0 +1,7 @@ +<?php +sleep(1); +?> +<p><strong>This content was loaded via ajax, though it took a second.</strong></p> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis justo, et facilisis ligula. In congue interdum odio, a scelerisque eros posuere ac. Aenean massa tellus, dictum sit amet laoreet ut, aliquam in orci. Duis eu aliquam ligula. Nullam vel placerat ligula. Fusce venenatis viverra dictum. Phasellus dui dolor, imperdiet in sodales at, mattis sed libero. Morbi ac ipsum ligula. Quisque suscipit dui vel diam pretium nec cursus lacus malesuada. Donec sollicitudin, eros eget dignissim mollis, risus leo feugiat tellus, vel posuere nisl ipsum eu erat. Quisque posuere lacinia imperdiet. Quisque nunc leo, elementum quis ultricies et, vehicula sit amet turpis. Nullam sed nunc nec nibh condimentum mattis. Quisque sed ligula sit amet nisi ultricies bibendum eget id nisi.</p> +<p>Proin ut erat vel nunc tincidunt commodo. Curabitur feugiat, nisi et vehicula viverra, nisl orci eleifend arcu, sed blandit lectus nisl quis nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aenean rutrum gravida velit ac imperdiet. Integer vitae arcu risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt orci at leo egestas porta. Vivamus ac augue et enim bibendum hendrerit ut id urna. Donec sollicitudin pulvinar turpis vitae scelerisque. Etiam tempor porttitor est sed blandit. Phasellus varius consequat leo eget tincidunt. Aliquam ac dui lectus. In et consectetur orci. Duis posuere nulla ac turpis faucibus vestibulum. Sed ut velit et dolor rhoncus dapibus. Sed sit amet pellentesque est.</p> +<p>Nam in volutpat orci. Morbi sit amet orci in erat egestas dignissim. Etiam mi sapien, tempus sed iaculis a, adipiscing quis tellus. Suspendisse potenti. Nam malesuada tristique vestibulum. In tempor tellus dignissim neque consectetur eu vestibulum nisl pellentesque. Phasellus ultrices cursus velit, id aliquam nisl fringilla quis. Cras varius elit sed urna ultrices congue. Sed ornare odio sed velit pellentesque id varius nisl sodales. Sed auctor ligula egestas mi pharetra ut consectetur erat pharetra.</p> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/ajax/content4-broken.php ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/tabs/ajax/content4-broken.php b/content/development-bundle/demos/tabs/ajax/content4-broken.php new file mode 100644 index 0000000..55ea2fe --- /dev/null +++ b/content/development-bundle/demos/tabs/ajax/content4-broken.php @@ -0,0 +1,3 @@ +<?php +header("HTTP/1.0 404 Not Found"); +?> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/bottom.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/tabs/bottom.html b/content/development-bundle/demos/tabs/bottom.html new file mode 100644 index 0000000..96a67be --- /dev/null +++ b/content/development-bundle/demos/tabs/bottom.html @@ -0,0 +1,58 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Tabs - Tabs at bottom</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.tabs.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#tabs" ).tabs(); + + // fix the classes + $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" ) + .removeClass( "ui-corner-all ui-corner-top" ) + .addClass( "ui-corner-bottom" ); + + // move the nav to the bottom + $( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" ); + }); + </script> + <style> + /* force a height so the tabs don't jump as content height changes */ + #tabs .tabs-spacer { float: left; height: 200px; } + .tabs-bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2em; } + .tabs-bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0; } + .tabs-bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; padding-top: 1px; } + </style> +</head> +<body> + +<div id="tabs" class="tabs-bottom"> + <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 class="tabs-spacer"></div> + <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 class="demo-description"> +<p>With some additional CSS (for positioning) and JS (to put the right classes on elements) the tabs can be placed below their content.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/tabs/collapsible.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/tabs/collapsible.html b/content/development-bundle/demos/tabs/collapsible.html new file mode 100644 index 0000000..b5a925b --- /dev/null +++ b/content/development-bundle/demos/tabs/collapsible.html @@ -0,0 +1,48 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Tabs - Collapse content</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.tabs.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#tabs" ).tabs({ + collapsible: true + }); + }); + </script> +</head> +<body> + +<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><strong>Click this tab again to close the content pane.</strong></p> + <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><strong>Click this tab again to close the content pane.</strong></p> + <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><strong>Click this tab again to close the content pane.</strong></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 class="demo-description"> +<p>Click the selected tab to toggle its content closed/open. To enable this functionality, set the <code>collapsible</code> option to true.</p> +<pre><code>collapsible: true +</code></pre> +</div> +</body> +</html> --------------------------------------------------------------------- To unsubscribe, e-mail: server-dev-unsubscr...@james.apache.org For additional commands, e-mail: server-dev-h...@james.apache.org
