http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/button/radio.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/button/radio.html b/content/development-bundle/demos/button/radio.html new file mode 100644 index 0000000..1197083 --- /dev/null +++ b/content/development-bundle/demos/button/radio.html @@ -0,0 +1,32 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Button - Radios</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.button.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#radio" ).buttonset(); + }); + </script> +</head> +<body> + +<form> + <div id="radio"> + <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> + <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> + <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> + </div> +</form> + +<div class="demo-description"> +<p>A set of three radio buttons transformed into a button set.</p> +</div> +</body> +</html>
http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/button/splitbutton.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/button/splitbutton.html b/content/development-bundle/demos/button/splitbutton.html new file mode 100644 index 0000000..7826975 --- /dev/null +++ b/content/development-bundle/demos/button/splitbutton.html @@ -0,0 +1,69 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Button - Split button</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.button.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-menu { position: absolute; width: 100px; } + </style> + <script> + $(function() { + $( "#rerun" ) + .button() + .click(function() { + alert( "Running the last action" ); + }) + .next() + .button({ + text: false, + icons: { + primary: "ui-icon-triangle-1-s" + } + }) + .click(function() { + var menu = $( this ).parent().next().show().position({ + my: "left top", + at: "left bottom", + of: this + }); + $( document ).one( "click", function() { + menu.hide(); + }); + return false; + }) + .parent() + .buttonset() + .next() + .hide() + .menu(); + }); + </script> +</head> +<body> + +<div> + <div> + <button id="rerun">Run last action</button> + <button id="select">Select an action</button> + </div> + <ul> + <li><a href="#">Open...</a></li> + <li><a href="#">Save</a></li> + <li><a href="#">Delete</a></li> + </ul> +</div> + +<div class="demo-description"> +<p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon +and no text. Both are grouped together in a set.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/button/toolbar.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/button/toolbar.html b/content/development-bundle/demos/button/toolbar.html new file mode 100644 index 0000000..eb1d2c3 --- /dev/null +++ b/content/development-bundle/demos/button/toolbar.html @@ -0,0 +1,113 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Button - Toolbar</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.button.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #toolbar { + padding: 10px 4px; + } + </style> + <script> + $(function() { + $( "#beginning" ).button({ + text: false, + icons: { + primary: "ui-icon-seek-start" + } + }); + $( "#rewind" ).button({ + text: false, + icons: { + primary: "ui-icon-seek-prev" + } + }); + $( "#play" ).button({ + text: false, + icons: { + primary: "ui-icon-play" + } + }) + .click(function() { + var options; + if ( $( this ).text() === "play" ) { + options = { + label: "pause", + icons: { + primary: "ui-icon-pause" + } + }; + } else { + options = { + label: "play", + icons: { + primary: "ui-icon-play" + } + }; + } + $( this ).button( "option", options ); + }); + $( "#stop" ).button({ + text: false, + icons: { + primary: "ui-icon-stop" + } + }) + .click(function() { + $( "#play" ).button( "option", { + label: "play", + icons: { + primary: "ui-icon-play" + } + }); + }); + $( "#forward" ).button({ + text: false, + icons: { + primary: "ui-icon-seek-next" + } + }); + $( "#end" ).button({ + text: false, + icons: { + primary: "ui-icon-seek-end" + } + }); + $( "#shuffle" ).button(); + $( "#repeat" ).buttonset(); + }); + </script> +</head> +<body> + +<span id="toolbar" class="ui-widget-header ui-corner-all"> + <button id="beginning">go to beginning</button> + <button id="rewind">rewind</button> + <button id="play">play</button> + <button id="stop">stop</button> + <button id="forward">fast forward</button> + <button id="end">go to end</button> + + <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label> + + <span id="repeat"> + <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label> + <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label> + <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label> + </span> +</span> + +<div class="demo-description"> +<p> + A mediaplayer toolbar. Take a look at the underlying markup: A few button elements, + an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options. +</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/alt-field.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/alt-field.html b/content/development-bundle/demos/datepicker/alt-field.html new file mode 100644 index 0000000..e783b93 --- /dev/null +++ b/content/development-bundle/demos/datepicker/alt-field.html @@ -0,0 +1,29 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Populate alternate field</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.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#datepicker" ).datepicker({ + altField: "#alternate", + altFormat: "DD, d MM, yy" + }); + }); + </script> +</head> +<body> + +<p>Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"/></p> + +<div class="demo-description"> +<p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/animation.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/animation.html b/content/development-bundle/demos/datepicker/animation.html new file mode 100644 index 0000000..4a3ddd0 --- /dev/null +++ b/content/development-bundle/demos/datepicker/animation.html @@ -0,0 +1,51 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Animations</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.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-fold.js"></script> + <script src="../../ui/jquery.ui.effect-slide.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#datepicker" ).datepicker(); + $( "#anim" ).change(function() { + $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() ); + }); + }); + </script> +</head> +<body> + +<p>Date: <input type="text" id="datepicker" size="30"/></p> + +<p>Animations:<br /> + <select id="anim"> + <option value="show">Show (default)</option> + <option value="slideDown">Slide down</option> + <option value="fadeIn">Fade in</option> + <option value="blind">Blind (UI Effect)</option> + <option value="bounce">Bounce (UI Effect)</option> + <option value="clip">Clip (UI Effect)</option> + <option value="drop">Drop (UI Effect)</option> + <option value="fold">Fold (UI Effect)</option> + <option value="slide">Slide (UI Effect)</option> + <option value="">None</option> + </select> +</p> + +<div class="demo-description"> +<p>Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/buttonbar.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/buttonbar.html b/content/development-bundle/demos/datepicker/buttonbar.html new file mode 100644 index 0000000..b22ecb3 --- /dev/null +++ b/content/development-bundle/demos/datepicker/buttonbar.html @@ -0,0 +1,28 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Display button bar</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.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#datepicker" ).datepicker({ + showButtonPanel: true + }); + }); + </script> +</head> +<body> + +<p>Date: <input type="text" id="datepicker"></p> + +<div class="demo-description"> +<p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/date-formats.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/date-formats.html b/content/development-bundle/demos/datepicker/date-formats.html new file mode 100644 index 0000000..a6d8daf --- /dev/null +++ b/content/development-bundle/demos/datepicker/date-formats.html @@ -0,0 +1,40 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Format date</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.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#datepicker" ).datepicker(); + $( "#format" ).change(function() { + $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() ); + }); + }); + </script> +</head> +<body> + +<p>Date: <input type="text" id="datepicker" size="30"/></p> + +<p>Format options:<br /> + <select id="format"> + <option value="mm/dd/yy">Default - mm/dd/yy</option> + <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option> + <option value="d M, y">Short - d M, y</option> + <option value="d MM, y">Medium - d MM, y</option> + <option value="DD, d MM, yy">Full - DD, d MM, yy</option> + <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option> + </select> +</p> + +<div class="demo-description"> +<p>Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/date-range.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/date-range.html b/content/development-bundle/demos/datepicker/date-range.html new file mode 100644 index 0000000..b4e59e2 --- /dev/null +++ b/content/development-bundle/demos/datepicker/date-range.html @@ -0,0 +1,44 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Select a Date Range</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.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#from" ).datepicker({ + defaultDate: "+1w", + changeMonth: true, + numberOfMonths: 3, + onClose: function( selectedDate ) { + $( "#to" ).datepicker( "option", "minDate", selectedDate ); + } + }); + $( "#to" ).datepicker({ + defaultDate: "+1w", + changeMonth: true, + numberOfMonths: 3, + onClose: function( selectedDate ) { + $( "#from" ).datepicker( "option", "maxDate", selectedDate ); + } + }); + }); + </script> +</head> +<body> + +<label for="from">From</label> +<input type="text" id="from" name="from"/> +<label for="to">to</label> +<input type="text" id="to" name="to"/> + +<div class="demo-description"> +<p>Select the date range to search for.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/default.html b/content/development-bundle/demos/datepicker/default.html new file mode 100644 index 0000000..60753c8 --- /dev/null +++ b/content/development-bundle/demos/datepicker/default.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - 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.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#datepicker" ).datepicker(); + }); + </script> +</head> +<body> + +<p>Date: <input type="text" id="datepicker"></p> + +<div class="demo-description"> +<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/dropdown-month-year.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/dropdown-month-year.html b/content/development-bundle/demos/datepicker/dropdown-month-year.html new file mode 100644 index 0000000..6ab86fc --- /dev/null +++ b/content/development-bundle/demos/datepicker/dropdown-month-year.html @@ -0,0 +1,29 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Display month & year menus</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.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#datepicker" ).datepicker({ + changeMonth: true, + changeYear: true + }); + }); + </script> +</head> +<body> + +<p>Date: <input type="text" id="datepicker"></p> + +<div class="demo-description"> +<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/icon-trigger.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/icon-trigger.html b/content/development-bundle/demos/datepicker/icon-trigger.html new file mode 100644 index 0000000..f6692f1 --- /dev/null +++ b/content/development-bundle/demos/datepicker/icon-trigger.html @@ -0,0 +1,30 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Icon trigger</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.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#datepicker" ).datepicker({ + showOn: "button", + buttonImage: "images/calendar.gif", + buttonImageOnly: true + }); + }); + </script> +</head> +<body> + +<p>Date: <input type="text" id="datepicker"></p> + +<div class="demo-description"> +<p>Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/images/calendar.gif ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/images/calendar.gif b/content/development-bundle/demos/datepicker/images/calendar.gif new file mode 100644 index 0000000..d0abaa7 Binary files /dev/null and b/content/development-bundle/demos/datepicker/images/calendar.gif differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/index.html b/content/development-bundle/demos/datepicker/index.html new file mode 100644 index 0000000..eb903a2 --- /dev/null +++ b/content/development-bundle/demos/datepicker/index.html @@ -0,0 +1,27 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="date-formats.html">Format date</a></li> + <li><a href="min-max.html">Restrict date range</a></li> + <li><a href="localization.html">Localize calendar</a></li> + <li><a href="alt-field.html">Populate alternate field</a></li> + <li><a href="inline.html">Display inline</a></li> + <li><a href="buttonbar.html">Display button bar</a></li> + <li><a href="dropdown-month-year.html">Display month & year menus</a></li> + <li><a href="other-months.html">Dates in other months</a></li> + <li><a href="show-week.html">Show week of the year</a></li> + <li><a href="multiple-calendars.html">Display multiple months</a></li> + <li><a href="icon-trigger.html">Icon trigger</a></li> + <li><a href="animation.html">Animations</a></li> + <li><a href="date-range.html">Date Range</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/inline.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/inline.html b/content/development-bundle/demos/datepicker/inline.html new file mode 100644 index 0000000..8c5ccb0 --- /dev/null +++ b/content/development-bundle/demos/datepicker/inline.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Display inline</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.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#datepicker" ).datepicker(); + }); + </script> +</head> +<body> + +Date: <div id="datepicker"></div> + +<div class="demo-description"> +<p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/localization.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/localization.html b/content/development-bundle/demos/datepicker/localization.html new file mode 100644 index 0000000..082313d --- /dev/null +++ b/content/development-bundle/demos/datepicker/localization.html @@ -0,0 +1,169 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Localize calendar</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.datepicker.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-af.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ar.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ar-DZ.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-az.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-bg.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-bs.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ca.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-cs.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-cy-GB.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-da.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-de.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-el.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-en-AU.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-en-GB.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-en-NZ.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-eo.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-es.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-et.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-eu.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-fa.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-fi.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-fo.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-fr.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-gl.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-he.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-hi.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-hr.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-hu.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-hy.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-id.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-is.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-it.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ja.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ka.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-kk.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-km.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ko.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-lb.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-lt.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-lv.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-mk.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ml.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ms.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-nl.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-nl-BE.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-no.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-pl.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-pt.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-rm.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ro.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ru.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-sk.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-sl.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-sq.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-sr.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-sv.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ta.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-th.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-tj.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-tr.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-uk.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-vi.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $.datepicker.setDefaults( $.datepicker.regional[ "" ] ); + $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] ); + $( "#locale" ).change(function() { + $( "#datepicker" ).datepicker( "option", + $.datepicker.regional[ $( this ).val() ] ); + }); + }); + </script> +</head> +<body> + +<p>Date: <input type="text" id="datepicker"/> + <select id="locale"> + <option value="af">Afrikaans</option> + <option value="sq">Albanian (Gjuha shqipe)</option> + <option value="ar-DZ">Algerian Arabic</option> + <option value="ar">Arabic (‫(لعربي</option> + <option value="hy">Armenian (Հայերեն)</option> + <option value="az">Azerbaijani (Azərbaycan dili)</option> + <option value="eu">Basque (Euskara)</option> + <option value="bs">Bosnian (Bosanski)</option> + <option value="bg">Bulgarian (български език)</option> + <option value="ca">Catalan (Català)</option> + <option value="zh-HK">Chinese Hong Kong (繁體中文)</option> + <option value="zh-CN">Chinese Simplified (简体中文)</option> + <option value="zh-TW">Chinese Traditional (繁體中文)</option> + <option value="hr">Croatian (Hrvatski jezik)</option> + <option value="cs">Czech (čeština)</option> + <option value="da">Danish (Dansk)</option> + <option value="nl-BE">Dutch (Belgium)</option> + <option value="nl">Dutch (Nederlands)</option> + <option value="en-AU">English/Australia</option> + <option value="en-NZ">English/New Zealand</option> + <option value="en-GB">English/UK</option> + <option value="eo">Esperanto</option> + <option value="et">Estonian (eesti keel)</option> + <option value="fo">Faroese (føroyskt)</option> + <option value="fa">Farsi/Persian (‫(فارسی</option> + <option value="fi">Finnish (suomi)</option> + <option value="fr" selected="selected">French (Français)</option> + <option value="fr-CH">French/Swiss (Français de Suisse)</option> + <option value="gl">Galician</option> + <option value="ge">Georgian</option> + <option value="de">German (Deutsch)</option> + <option value="el">Greek (Ελληνικά)</option> + <option value="he">Hebrew (‫(עברית</option> + <option value="hi">Hindi (हिंदी)</option> + <option value="hu">Hungarian (Magyar)</option> + <option value="is">Icelandic (Õslenska)</option> + <option value="id">Indonesian (Bahasa Indonesia)</option> + <option value="it">Italian (Italiano)</option> + <option value="ja">Japanese (日本語)</option> + <option value="kk">Kazakhstan (Kazakh)</option> + <option value="km">Khmer</option> + <option value="ko">Korean (한국어)</option> + <option value="lv">Latvian (Latvieöu Valoda)</option> + <option value="lt">Lithuanian (lietuviu kalba)</option> + <option value="lb">Luxembourgish</option> + <option value="mk">Macedonian</option> + <option value="ml">Malayalam</option> + <option value="ms">Malaysian (Bahasa Malaysia)</option> + <option value="no">Norwegian (Norsk)</option> + <option value="pl">Polish (Polski)</option> + <option value="pt">Portuguese (Português)</option> + <option value="pt-BR">Portuguese/Brazilian (Português)</option> + <option value="rm">Rhaeto-Romanic (Romansh)</option> + <option value="ro">Romanian (Română)</option> + <option value="ru">Russian (Русский)</option> + <option value="sr">Serbian (српски језик)</option> + <option value="sr-SR">Serbian (srpski jezik)</option> + <option value="sk">Slovak (Slovencina)</option> + <option value="sl">Slovenian (Slovenski Jezik)</option> + <option value="es">Spanish (Español)</option> + <option value="sv">Swedish (Svenska)</option> + <option value="ta">Tamil (தமிழ்)</option> + <option value="th">Thai (ภาษาไทย)</option> + <option value="tj">Tajikistan</option> + <option value="tr">Turkish (Türkçe)</option> + <option value="uk">Ukranian (Українська)</option> + <option value="vi">Vietnamese (Tiếng Việt)</option> + <option value="cy-GB">Welsh/UK (Cymraeg)</option> + </select></p> + +<div class="demo-description"> +<p>Localize the datepicker calendar language and format (English / Western formatting is the default). The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/min-max.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/min-max.html b/content/development-bundle/demos/datepicker/min-max.html new file mode 100644 index 0000000..847be9b --- /dev/null +++ b/content/development-bundle/demos/datepicker/min-max.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Restrict date range</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.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" }); + }); + </script> +</head> +<body> + +<p>Date: <input type="text" id="datepicker"></p> + +<div class="demo-description"> +<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/multiple-calendars.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/multiple-calendars.html b/content/development-bundle/demos/datepicker/multiple-calendars.html new file mode 100644 index 0000000..eedc9d0 --- /dev/null +++ b/content/development-bundle/demos/datepicker/multiple-calendars.html @@ -0,0 +1,29 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Display multiple months</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.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#datepicker" ).datepicker({ + numberOfMonths: 3, + showButtonPanel: true + }); + }); + </script> +</head> +<body> + +<p>Date: <input type="text" id="datepicker"></p> + +<div class="demo-description"> +<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/other-months.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/other-months.html b/content/development-bundle/demos/datepicker/other-months.html new file mode 100644 index 0000000..e63d50b --- /dev/null +++ b/content/development-bundle/demos/datepicker/other-months.html @@ -0,0 +1,30 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Dates in other months</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.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#datepicker" ).datepicker({ + showOtherMonths: true, + selectOtherMonths: true + }); + }); + </script> +</head> +<body> + +<p>Date: <input type="text" id="datepicker"></p> + +<div class="demo-description"> +<p>The datepicker can show dates that come from other than the main month + being displayed. These other dates can also be made selectable.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/datepicker/show-week.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/datepicker/show-week.html b/content/development-bundle/demos/datepicker/show-week.html new file mode 100644 index 0000000..baa5fe9 --- /dev/null +++ b/content/development-bundle/demos/datepicker/show-week.html @@ -0,0 +1,32 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Datepicker - Show week of the year</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.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#datepicker" ).datepicker({ + showWeek: true, + firstDay: 1 + }); + }); + </script> +</head> +<body> + +<p>Date: <input type="text" id="datepicker"></p> + +<div class="demo-description"> +<p>The datepicker can show the week of the year. The default calculation follows + the ISO 8601 definition: the week starts on Monday, the first week of the year + contains the first Thursday of the year. This means that some days from one + year may be placed into weeks 'belonging' to another year.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/demos.css ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/demos.css b/content/development-bundle/demos/demos.css new file mode 100644 index 0000000..da9ad83 --- /dev/null +++ b/content/development-bundle/demos/demos.css @@ -0,0 +1,19 @@ +body { + font-size: 62.5%; + font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; +} + +table { + font-size: 1em; +} + +.demo-description { + clear: both; + padding: 12px; + font-size: 1.3em; + line-height: 1.4em; +} + +.ui-draggable, .ui-droppable { + background-position: top; +} http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/dialog/animated.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/dialog/animated.html b/content/development-bundle/demos/dialog/animated.html new file mode 100644 index 0000000..e79133a --- /dev/null +++ b/content/development-bundle/demos/dialog/animated.html @@ -0,0 +1,49 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Dialog - Animation</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../external/jquery.bgiframe-2.1.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.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-explode.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + // increase the default animation speed to exaggerate the effect + $.fx.speeds._default = 1000; + $(function() { + $( "#dialog" ).dialog({ + autoOpen: false, + show: "blind", + hide: "explode" + }); + + $( "#opener" ).click(function() { + $( "#dialog" ).dialog( "open" ); + return false; + }); + }); + </script> +</head> +<body> + +<div id="dialog" title="Basic dialog"> + <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> +</div> + +<button id="opener">Open Dialog</button> + +<div class="demo-description"> +<p>Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/dialog/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/dialog/default.html b/content/development-bundle/demos/dialog/default.html new file mode 100644 index 0000000..0502214 --- /dev/null +++ b/content/development-bundle/demos/dialog/default.html @@ -0,0 +1,33 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Dialog - 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.bgiframe-2.1.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#dialog" ).dialog(); + }); + </script> +</head> +<body> + +<div id="dialog" title="Basic dialog"> + <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> +</div> + +<div class="demo-description"> +<p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/dialog/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/dialog/index.html b/content/development-bundle/demos/dialog/index.html new file mode 100644 index 0000000..6aaa3ec --- /dev/null +++ b/content/development-bundle/demos/dialog/index.html @@ -0,0 +1,19 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Dialog Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="animated.html">Animated dialog</a></li> + <li><a href="modal.html">Modal dialog</a></li> + <li><a href="modal-message.html">Modal message</a></li> + <li><a href="modal-confirmation.html">Modal confirmation</a></li> + <li><a href="modal-form.html">Modal form</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/dialog/modal-confirmation.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/dialog/modal-confirmation.html b/content/development-bundle/demos/dialog/modal-confirmation.html new file mode 100644 index 0000000..359b8e7 --- /dev/null +++ b/content/development-bundle/demos/dialog/modal-confirmation.html @@ -0,0 +1,47 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Dialog - Modal confirmation</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../external/jquery.bgiframe-2.1.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#dialog-confirm" ).dialog({ + resizable: false, + height:140, + modal: true, + buttons: { + "Delete all items": function() { + $( this ).dialog( "close" ); + }, + Cancel: function() { + $( this ).dialog( "close" ); + } + } + }); + }); + </script> +</head> +<body> + +<div id="dialog-confirm" title="Empty the recycle bin?"> + <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p> +</div> + +<p>Sed vel diam id libero <a href="http://example.com";>rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> + +<div class="demo-description"> +<p>Confirm an action that may be destructive or important. Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/dialog/modal-form.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/dialog/modal-form.html b/content/development-bundle/demos/dialog/modal-form.html new file mode 100644 index 0000000..1025171 --- /dev/null +++ b/content/development-bundle/demos/dialog/modal-form.html @@ -0,0 +1,157 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Dialog - Modal form</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../external/jquery.bgiframe-2.1.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <script src="../../ui/jquery.ui.effect.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + body { font-size: 62.5%; } + label, input { display:block; } + input.text { margin-bottom:12px; width:95%; padding: .4em; } + fieldset { padding:0; border:0; margin-top:25px; } + h1 { font-size: 1.2em; margin: .6em 0; } + div#users-contain { width: 350px; margin: 20px 0; } + div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } + div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } + .ui-dialog .ui-state-error { padding: .3em; } + .validateTips { border: 1px solid transparent; padding: 0.3em; } + </style> + <script> + $(function() { + var name = $( "#name" ), + email = $( "#email" ), + password = $( "#password" ), + allFields = $( [] ).add( name ).add( email ).add( password ), + tips = $( ".validateTips" ); + + function updateTips( t ) { + tips + .text( t ) + .addClass( "ui-state-highlight" ); + setTimeout(function() { + tips.removeClass( "ui-state-highlight", 1500 ); + }, 500 ); + } + + function checkLength( o, n, min, max ) { + if ( o.val().length > max || o.val().length < min ) { + o.addClass( "ui-state-error" ); + updateTips( "Length of " + n + " must be between " + + min + " and " + max + "." ); + return false; + } else { + return true; + } + } + + function checkRegexp( o, regexp, n ) { + if ( !( regexp.test( o.val() ) ) ) { + o.addClass( "ui-state-error" ); + updateTips( n ); + return false; + } else { + return true; + } + } + + $( "#dialog-form" ).dialog({ + autoOpen: false, + height: 300, + width: 350, + modal: true, + buttons: { + "Create an account": function() { + var bValid = true; + allFields.removeClass( "ui-state-error" ); + + bValid = bValid && checkLength( name, "username", 3, 16 ); + bValid = bValid && checkLength( email, "email", 6, 80 ); + bValid = bValid && checkLength( password, "password", 5, 16 ); + + bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." ); + // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ + bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. u...@jquery.com" ); + bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" ); + + if ( bValid ) { + $( "#users tbody" ).append( "<tr>" + + "<td>" + name.val() + "</td>" + + "<td>" + email.val() + "</td>" + + "<td>" + password.val() + "</td>" + + "</tr>" ); + $( this ).dialog( "close" ); + } + }, + Cancel: function() { + $( this ).dialog( "close" ); + } + }, + close: function() { + allFields.val( "" ).removeClass( "ui-state-error" ); + } + }); + + $( "#create-user" ) + .button() + .click(function() { + $( "#dialog-form" ).dialog( "open" ); + }); + }); + </script> +</head> +<body> + +<div id="dialog-form" title="Create new user"> + <p class="validateTips">All form fields are required.</p> + + <form> + <fieldset> + <label for="name">Name</label> + <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> + <label for="email">Email</label> + <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> + <label for="password">Password</label> + <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> + </fieldset> + </form> +</div> + + +<div id="users-contain" class="ui-widget"> + <h1>Existing Users:</h1> + <table id="users" class="ui-widget ui-widget-content"> + <thead> + <tr class="ui-widget-header "> + <th>Name</th> + <th>Email</th> + <th>Password</th> + </tr> + </thead> + <tbody> + <tr> + <td>John Doe</td> + <td>john....@example.com</td> + <td>johndoe1</td> + </tr> + </tbody> + </table> +</div> +<button id="create-user">Create new user</button> + +<div class="demo-description"> +<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/dialog/modal-message.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/dialog/modal-message.html b/content/development-bundle/demos/dialog/modal-message.html new file mode 100644 index 0000000..496762d --- /dev/null +++ b/content/development-bundle/demos/dialog/modal-message.html @@ -0,0 +1,49 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Dialog - Modal message</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../external/jquery.bgiframe-2.1.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#dialog-message" ).dialog({ + modal: true, + buttons: { + Ok: function() { + $( this ).dialog( "close" ); + } + } + }); + }); + </script> +</head> +<body> + +<div id="dialog-message" title="Download complete"> + <p> + <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> + Your files have downloaded successfully into the My Downloads folder. + </p> + <p> + Currently using <b>36% of your storage space</b>. + </p> +</div> + +<p>Sed vel diam id libero <a href="http://example.com";>rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> + +<div class="demo-description"> +<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/dialog/modal.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/dialog/modal.html b/content/development-bundle/demos/dialog/modal.html new file mode 100644 index 0000000..e62238d --- /dev/null +++ b/content/development-bundle/demos/dialog/modal.html @@ -0,0 +1,38 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Dialog - Basic modal</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../external/jquery.bgiframe-2.1.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#dialog-modal" ).dialog({ + height: 140, + modal: true + }); + }); + </script> +</head> +<body> + +<div id="dialog-modal" title="Basic modal dialog"> + <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p> +</div> + +<p>Sed vel diam id libero <a href="http://example.com";>rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> + +<div class="demo-description"> +<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/draggable/constrain-movement.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/draggable/constrain-movement.html b/content/development-bundle/demos/draggable/constrain-movement.html new file mode 100644 index 0000000..ddc8336 --- /dev/null +++ b/content/development-bundle/demos/draggable/constrain-movement.html @@ -0,0 +1,58 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Draggable - Constrain movement</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } + #draggable, #draggable2 { margin-bottom:20px; } + #draggable { cursor: n-resize; } + #draggable2 { cursor: e-resize; } + #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; } + h3 { clear: left; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable({ axis: "y" }); + $( "#draggable2" ).draggable({ axis: "x" }); + + $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false }); + $( "#draggable5" ).draggable({ containment: "parent" }); + }); + </script> +</head> +<body> + +<h3>Constrain movement along an axis:</h3> + +<div id="draggable" class="draggable ui-widget-content"> + <p>I can be dragged only vertically</p> +</div> + +<div id="draggable2" class="draggable ui-widget-content"> + <p>I can be dragged only horizontally</p> +</div> + +<h3>Or to within another DOM element:</h3> +<div id="containment-wrapper"> + <div id="draggable3" class="draggable ui-widget-content"> + <p>I'm contained within the box</p> + </div> + + <div class="draggable ui-widget-content"> + <p id="draggable5" class="ui-widget-header">I'm contained within my parent</p> + </div> +</div> + +<div class="demo-description"> +<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/draggable/cursor-style.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/draggable/cursor-style.html b/content/development-bundle/demos/draggable/cursor-style.html new file mode 100644 index 0000000..bf35721 --- /dev/null +++ b/content/development-bundle/demos/draggable/cursor-style.html @@ -0,0 +1,42 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Draggable - Cursor style</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } }); + $( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } }); + $( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } }); + }); + </script> +</head> +<body> + +<div id="draggable" class="ui-widget-content"> + <p>I will always stick to the center (relative to the mouse)</p> +</div> + +<div id="draggable2" class="ui-widget-content"> + <p>My cursor is at left -5 and top -5</p> +</div> + +<div id="draggable3" class="ui-widget-content"> + <p>My cursor position is only controlled for the 'bottom' value</p> +</div> + +<div class="demo-description"> +<p>Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/draggable/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/draggable/default.html b/content/development-bundle/demos/draggable/default.html new file mode 100644 index 0000000..32ed8bf --- /dev/null +++ b/content/development-bundle/demos/draggable/default.html @@ -0,0 +1,32 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Draggable - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable { width: 150px; height: 150px; padding: 0.5em; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable(); + }); + </script> +</head> +<body> + +<div id="draggable" class="ui-widget-content"> + <p>Drag me around</p> +</div> + +<div class="demo-description"> +<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/draggable/delay-start.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/draggable/delay-start.html b/content/development-bundle/demos/draggable/delay-start.html new file mode 100644 index 0000000..0e0ee9f --- /dev/null +++ b/content/development-bundle/demos/draggable/delay-start.html @@ -0,0 +1,38 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Draggable - 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.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable({ distance: 20 }); + $( "#draggable2" ).draggable({ delay: 1000 }); + $( ".ui-draggable" ).disableSelection(); + }); + </script> +</head> +<body> + +<div id="draggable" class="ui-widget-content"> + <p>Only if you drag me by 20 pixels, the dragging will start</p> +</div> + +<div id="draggable2" class="ui-widget-content"> + <p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p> +</div> + +<div class="demo-description"> +<p>Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. </p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/draggable/events.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/draggable/events.html b/content/development-bundle/demos/draggable/events.html new file mode 100644 index 0000000..4146cd6 --- /dev/null +++ b/content/development-bundle/demos/draggable/events.html @@ -0,0 +1,70 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Draggable - Events</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable { width: 16em; padding: 0 1em; } + #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; } + #draggable ul li span.ui-icon { float: left; } + #draggable ul li span.count { font-weight: bold; } + </style> + <script> + $(function() { + var $start_counter = $( "#event-start" ), + $drag_counter = $( "#event-drag" ), + $stop_counter = $( "#event-stop" ), + counts = [ 0, 0, 0 ]; + + $( "#draggable" ).draggable({ + start: function() { + counts[ 0 ]++; + updateCounterStatus( $start_counter, counts[ 0 ] ); + }, + drag: function() { + counts[ 1 ]++; + updateCounterStatus( $drag_counter, counts[ 1 ] ); + }, + stop: function() { + counts[ 2 ]++; + updateCounterStatus( $stop_counter, counts[ 2 ] ); + } + }); + + function updateCounterStatus( $event_counter, new_count ) { + // first update the status visually... + if ( !$event_counter.hasClass( "ui-state-hover" ) ) { + $event_counter.addClass( "ui-state-hover" ) + .siblings().removeClass( "ui-state-hover" ); + } + // ...then update the numbers + $( "span.count", $event_counter ).text( new_count ); + } + }); + </script> +</head> +<body> + +<div id="draggable" class="ui-widget ui-widget-content"> + + <p>Drag me to trigger the chain of events.</p> + + <ul class="ui-helper-reset"> + <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li> + <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li> + <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li> + </ul> +</div> + +<div class="demo-description"> +<p>Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/draggable/handle.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/draggable/handle.html b/content/development-bundle/demos/draggable/handle.html new file mode 100644 index 0000000..0dc540a --- /dev/null +++ b/content/development-bundle/demos/draggable/handle.html @@ -0,0 +1,41 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Draggable - Handles</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } + #draggable p { cursor: move; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable({ handle: "p" }); + $( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" }); + $( "div, p" ).disableSelection(); + }); + </script> +</head> +<body> + +<div id="draggable" class="ui-widget-content"> + <p class="ui-widget-header">I can be dragged only by this handle</p> +</div> + +<div id="draggable2" class="ui-widget-content"> + <p>You can drag me around…</p> + <p class="ui-widget-header">…but you can't drag me by this handle.</p> +</div> + +<div class="demo-description"> +<p>Allow dragging only when the cursor is over a specific part of the draggable. Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p> +<p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/draggable/index.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/draggable/index.html b/content/development-bundle/demos/draggable/index.html new file mode 100644 index 0000000..9385068 --- /dev/null +++ b/content/development-bundle/demos/draggable/index.html @@ -0,0 +1,24 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Draggable Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="events.html">Events</a></li> + <li><a href="constrain-movement.html">Constrain movement</a></li> + <li><a href="delay-start.html">Delay start</a></li> + <li><a href="snap-to.html">Snap to element or grid</a></li> + <li><a href="scroll.html">Auto-scroll</a></li> + <li><a href="revert.html">Revert position</a></li> + <li><a href="visual-feedback.html">Visual feedback</a></li> + <li><a href="handle.html">Drag handle</a></li> + <li><a href="cursor-style.html">Cursor style</a></li> + <li><a href="sortable.html">Draggable + Sortable</a></li> +</ul> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/draggable/revert.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/draggable/revert.html b/content/development-bundle/demos/draggable/revert.html new file mode 100644 index 0000000..742fc1d --- /dev/null +++ b/content/development-bundle/demos/draggable/revert.html @@ -0,0 +1,37 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Draggable - Revert position</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable({ revert: true }); + $( "#draggable2" ).draggable({ revert: true, helper: "clone" }); + }); + </script> +</head> +<body> + +<div id="draggable" class="ui-widget-content"> + <p>Revert the original</p> +</div> + +<div id="draggable2" class="ui-widget-content"> + <p>Revert the helper</p> +</div> + +<div class="demo-description"> +<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/draggable/scroll.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/draggable/scroll.html b/content/development-bundle/demos/draggable/scroll.html new file mode 100644 index 0000000..5b64d6c --- /dev/null +++ b/content/development-bundle/demos/draggable/scroll.html @@ -0,0 +1,44 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Draggable - Auto-scroll</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable({ scroll: true }); + $( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 }); + $( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 }); + }); + </script> +</head> +<body> + +<div id="draggable" class="ui-widget-content"> + <p>Scroll set to true, default settings</p> +</div> + +<div id="draggable2" class="ui-widget-content"> + <p>scrollSensitivity set to 100</p> +</div> + +<div id="draggable3" class="ui-widget-content"> + <p>scrollSpeed set to 100</p> +</div> + +<div style='height: 5000px; width: 1px;'></div> + +<div class="demo-description"> +<p>Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/draggable/snap-to.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/draggable/snap-to.html b/content/development-bundle/demos/draggable/snap-to.html new file mode 100644 index 0000000..c7bc5f4 --- /dev/null +++ b/content/development-bundle/demos/draggable/snap-to.html @@ -0,0 +1,61 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Draggable - Snap to element or 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.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } + .ui-widget-header p, .ui-widget-content p { margin: 0; } + #snaptarget { height: 140px; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable({ snap: true }); + $( "#draggable2" ).draggable({ snap: ".ui-widget-header" }); + $( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" }); + $( "#draggable4" ).draggable({ grid: [ 20,20 ] }); + $( "#draggable5" ).draggable({ grid: [ 80, 80 ] }); + }); + </script> +</head> +<body> + +<div id="snaptarget" class="ui-widget-header"> + <p>I'm a snap target</p> +</div> + +<br style="clear:both" /> + +<div id="draggable" class="draggable ui-widget-content"> + <p>Default (snap: true), snaps to all other draggable elements</p> +</div> + +<div id="draggable2" class="draggable ui-widget-content"> + <p>I only snap to the big box</p> +</div> + +<div id="draggable3" class="draggable ui-widget-content"> + <p>I only snap to the outer edges of the big box</p> +</div> + +<div id="draggable4" class="draggable ui-widget-content"> + <p>I snap to a 20 x 20 grid</p> +</div> + +<div id="draggable5" class="draggable ui-widget-content"> + <p>I snap to a 80 x 80 grid</p> +</div> + +<div class="demo-description"> +<p>Snap the draggable to the inner or outer boundaries of a DOM element. Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p> +<p>Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/draggable/sortable.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/draggable/sortable.html b/content/development-bundle/demos/draggable/sortable.html new file mode 100644 index 0000000..77f7053 --- /dev/null +++ b/content/development-bundle/demos/draggable/sortable.html @@ -0,0 +1,50 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Draggable + Sortable</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } + li { margin: 5px; padding: 5px; width: 150px; } + </style> + <script> + $(function() { + $( "#sortable" ).sortable({ + revert: true + }); + $( "#draggable" ).draggable({ + connectToSortable: "#sortable", + helper: "clone", + revert: "invalid" + }); + $( "ul, li" ).disableSelection(); + }); + </script> +</head> +<body> + +<ul> + <li id="draggable" class="ui-state-highlight">Drag me down</li> +</ul> + +<ul id="sortable"> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default">Item 2</li> + <li class="ui-state-default">Item 3</li> + <li class="ui-state-default">Item 4</li> + <li class="ui-state-default">Item 5</li> +</ul> + +<div class="demo-description"> +<p>Draggables are built to interact seamlessly with <a href="http://jqueryui.com/sortable";>sortables</a>.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/draggable/visual-feedback.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/draggable/visual-feedback.html b/content/development-bundle/demos/draggable/visual-feedback.html new file mode 100644 index 0000000..80e230c --- /dev/null +++ b/content/development-bundle/demos/draggable/visual-feedback.html @@ -0,0 +1,70 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Draggable - Visual feedback</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } + #draggable, #draggable2, #draggable3 { margin-bottom:20px; } + #set { clear:both; float:left; width: 368px; height: 120px; } + p { clear:both; margin:0; padding:1em 0; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable({ helper: "original" }); + $( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" }); + $( "#draggable3" ).draggable({ + cursor: "move", + cursorAt: { top: -12, left: -20 }, + helper: function( event ) { + return $( "<div class='ui-widget-header'>I'm a custom helper</div>" ); + } + }); + $( "#set div" ).draggable({ stack: "#set div" }); + }); + </script> +</head> +<body> + +<h3 class="docs">With helpers:</h3> + +<div id="draggable" class="ui-widget-content"> + <p>Original</p> +</div> + +<div id="draggable2" class="ui-widget-content"> + <p>Semi-transparent clone</p> +</div> + +<div id="draggable3" class="ui-widget-content"> + <p>Custom helper (in combination with cursorAt)</p> +</div> + +<h3 class="docs">Stacked:</h3> +<div id="set"> + <div class="ui-widget-content"> + <p>We are draggables..</p> + </div> + + <div class="ui-widget-content"> + <p>..whose z-indexes are controlled automatically..</p> + </div> + + <div class="ui-widget-content"> + <p>..with the stack option.</p> + </div> +</div> + +<div class="demo-description"> +<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p> +<p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/accepted-elements.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/accepted-elements.html b/content/development-bundle/demos/droppable/accepted-elements.html new file mode 100644 index 0000000..6e2f764 --- /dev/null +++ b/content/development-bundle/demos/droppable/accepted-elements.html @@ -0,0 +1,53 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Droppable - Accept</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } + #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } + </style> + <script> + $(function() { + $( "#draggable, #draggable-nonvalid" ).draggable(); + $( "#droppable" ).droppable({ + accept: "#draggable", + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); + } + }); + }); + </script> +</head> +<body> + +<div id="draggable-nonvalid" class="ui-widget-content"> + <p>I'm draggable but can't be dropped</p> +</div> + +<div id="draggable" class="ui-widget-content"> + <p>Drag me to my target</p> +</div> + +<div id="droppable" class="ui-widget-header"> + <p>accept: '#draggable'</p> +</div> + +<div class="demo-description"> +<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/default.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/default.html b/content/development-bundle/demos/droppable/default.html new file mode 100644 index 0000000..88699dc --- /dev/null +++ b/content/development-bundle/demos/droppable/default.html @@ -0,0 +1,46 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Droppable - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.8.3.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } + #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } + </style> + <script> + $(function() { + $( "#draggable" ).draggable(); + $( "#droppable" ).droppable({ + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); + } + }); + }); + </script> +</head> +<body> + +<div id="draggable" class="ui-widget-content"> + <p>Drag me to my target</p> +</div> + +<div id="droppable" class="ui-widget-header"> + <p>Drop here</p> +</div> + +<div class="demo-description"> +<p>Enable any DOM element to be droppable, a target for draggable elements.</p> +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/images/high_tatras.jpg ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/images/high_tatras.jpg b/content/development-bundle/demos/droppable/images/high_tatras.jpg new file mode 100644 index 0000000..5723680 Binary files /dev/null and b/content/development-bundle/demos/droppable/images/high_tatras.jpg differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/images/high_tatras2.jpg ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/images/high_tatras2.jpg b/content/development-bundle/demos/droppable/images/high_tatras2.jpg new file mode 100644 index 0000000..1acad3a Binary files /dev/null and b/content/development-bundle/demos/droppable/images/high_tatras2.jpg differ http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/demos/droppable/images/high_tatras2_min.jpg ---------------------------------------------------------------------- diff --git a/content/development-bundle/demos/droppable/images/high_tatras2_min.jpg b/content/development-bundle/demos/droppable/images/high_tatras2_min.jpg new file mode 100644 index 0000000..493e082 Binary files /dev/null and b/content/development-bundle/demos/droppable/images/high_tatras2_min.jpg differ --------------------------------------------------------------------- To unsubscribe, e-mail: server-dev-unsubscr...@james.apache.org For additional commands, e-mail: server-dev-h...@james.apache.org
