From af15f2c4a192dea02aab9e519defc68c71763ec4 Mon Sep 17 00:00:00 2001 From: yvesf Date: Mon, 22 Nov 2010 14:34:55 +0100 Subject: jquery ui --- static/development-bundle/docs/accordion.html | 977 +++++++++ static/development-bundle/docs/addClass.html | 109 + static/development-bundle/docs/animate.html | 78 + static/development-bundle/docs/autocomplete.html | 710 ++++++ static/development-bundle/docs/button.html | 461 ++++ static/development-bundle/docs/datepicker.html | 2531 ++++++++++++++++++++++ static/development-bundle/docs/dialog.html | 1656 ++++++++++++++ static/development-bundle/docs/draggable.html | 1536 +++++++++++++ static/development-bundle/docs/droppable.html | 788 +++++++ static/development-bundle/docs/effect.html | 143 ++ static/development-bundle/docs/hide.html | 144 ++ static/development-bundle/docs/position.html | 227 ++ static/development-bundle/docs/progressbar.html | 420 ++++ static/development-bundle/docs/removeClass.html | 113 + static/development-bundle/docs/resizable.html | 1160 ++++++++++ static/development-bundle/docs/selectable.html | 807 +++++++ static/development-bundle/docs/show.html | 144 ++ static/development-bundle/docs/slider.html | 821 +++++++ static/development-bundle/docs/sortable.html | 1910 ++++++++++++++++ static/development-bundle/docs/switchClass.html | 129 ++ static/development-bundle/docs/tabs.html | 1513 +++++++++++++ static/development-bundle/docs/toggle.html | 144 ++ static/development-bundle/docs/toggleClass.html | 111 + 23 files changed, 16632 insertions(+) create mode 100644 static/development-bundle/docs/accordion.html create mode 100644 static/development-bundle/docs/addClass.html create mode 100644 static/development-bundle/docs/animate.html create mode 100644 static/development-bundle/docs/autocomplete.html create mode 100644 static/development-bundle/docs/button.html create mode 100644 static/development-bundle/docs/datepicker.html create mode 100644 static/development-bundle/docs/dialog.html create mode 100644 static/development-bundle/docs/draggable.html create mode 100644 static/development-bundle/docs/droppable.html create mode 100644 static/development-bundle/docs/effect.html create mode 100644 static/development-bundle/docs/hide.html create mode 100644 static/development-bundle/docs/position.html create mode 100644 static/development-bundle/docs/progressbar.html create mode 100644 static/development-bundle/docs/removeClass.html create mode 100644 static/development-bundle/docs/resizable.html create mode 100644 static/development-bundle/docs/selectable.html create mode 100644 static/development-bundle/docs/show.html create mode 100644 static/development-bundle/docs/slider.html create mode 100644 static/development-bundle/docs/sortable.html create mode 100644 static/development-bundle/docs/switchClass.html create mode 100644 static/development-bundle/docs/tabs.html create mode 100644 static/development-bundle/docs/toggle.html create mode 100644 static/development-bundle/docs/toggleClass.html (limited to 'static/development-bundle/docs') diff --git a/static/development-bundle/docs/accordion.html b/static/development-bundle/docs/accordion.html new file mode 100644 index 0000000..514492a --- /dev/null +++ b/static/development-bundle/docs/accordion.html @@ -0,0 +1,977 @@ + + +
+

jQuery UI Accordion

+
+

Overview

+
+

Make the selected elements Accordion widgets. Semantic requirements:

+

The markup of your accordion container needs pairs of headers and content panels:

+
<div id="accordion">
+    <h3><a href="#">First header</a></h3>
+    <div>First content</div>
+    <h3><a href="#">Second header</a></h3>
+    <div>Second content</div>
+</div>
+

If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'a.header'. The content element must be always next to its header.

+

If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.

+

Use activate(Number) to change the active content programmatically.

+
[edit]

NOTE: If you want multiple sections open at once, don't use an accordion

+

An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:

+
jQuery(document).ready(function(){
+	$('.accordion .head').click(function() {
+		$(this).next().toggle();
+		return false;
+	}).next().hide();
+});
+

Or animated:

+
jQuery(document).ready(function(){
+	$('.accordion .head').click(function() {
+		$(this).next().toggle('slow');
+		return false;
+	}).next().hide();
+});
+
+
+

Dependencies

+
    +
  • UI Core
    • +
  • UI Effects Core (Optional - only for non-default animations)
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Accordion.
+

+
$("#accordion").accordion();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#accordion").accordion();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="accordion">
+	<h3><a href="#">Section 1</a></h3>
+	<div>
+		<p>
+		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+		</p>
+	</div>
+	<h3><a href="#">Section 2</a></h3>
+	<div>
+		<p>
+		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+		suscipit faucibus urna.
+		</p>
+	</div>
+	<h3><a href="#">Section 3</a></h3>
+	<div>
+		<p>
+		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
+		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
+		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
+		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+		</p>
+		<ul>
+			<li>List item one</li>
+			<li>List item two</li>
+			<li>List item three</li>
+		</ul>
+	</div>
+	<h3><a href="#">Section 4</a></h3>
+	<div>
+		<p>
+		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+		mauris vel est.
+		</p>
+		<p>
+		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+		inceptos himenaeos.
+		</p>
+	</div>
+</div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the accordion. Can be set when initialising (first creating) the accordion.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the disabled option specified. +
    +
    +
    $( ".selector" ).accordion({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).accordion( "option", "disabled" );
+//setter
+$( ".selector" ).accordion( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    active

    +
    +
    Type:
    +
    Selector, Element, jQuery, Boolean, Number
    + +
    Default:
    +
    first child
    + +
    +
    +
    +

    Selector for the active element. Set to false to display none at start. Needs collapsible: true.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the active option specified. +
    +
    +
    $( ".selector" ).accordion({ active: 2 });
    +
    + + +
    + Get or set the active option, after init. +
    +
    +
    //getter
+var active = $( ".selector" ).accordion( "option", "active" );
+//setter
+$( ".selector" ).accordion( "option", "active", 2 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    animated

    +
    +
    Type:
    +
    Boolean, String
    + +
    Default:
    +
    'slide'
    + +
    +
    +
    +

    Choose your favorite animation, or disable them (set to false). In addition to the default, 'bounceslide' and all defined easing methods are supported ('bounceslide' requires UI Effects Core).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the animated option specified. +
    +
    +
    $( ".selector" ).accordion({ animated: 'bounceslide' });
    +
    + + +
    + Get or set the animated option, after init. +
    +
    +
    //getter
+var animated = $( ".selector" ).accordion( "option", "animated" );
+//setter
+$( ".selector" ).accordion( "option", "animated", 'bounceslide' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    autoHeight

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the autoHeight option specified. +
    +
    +
    $( ".selector" ).accordion({ autoHeight: false });
    +
    + + +
    + Get or set the autoHeight option, after init. +
    +
    +
    //getter
+var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
+//setter
+$( ".selector" ).accordion( "option", "autoHeight", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    clearStyle

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won't work together with autoHeight.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the clearStyle option specified. +
    +
    +
    $( ".selector" ).accordion({ clearStyle: true });
    +
    + + +
    + Get or set the clearStyle option, after init. +
    +
    +
    //getter
+var clearStyle = $( ".selector" ).accordion( "option", "clearStyle" );
+//setter
+$( ".selector" ).accordion( "option", "clearStyle", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    collapsible

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the collapsible option specified. +
    +
    +
    $( ".selector" ).accordion({ collapsible: true });
    +
    + + +
    + Get or set the collapsible option, after init. +
    +
    +
    //getter
+var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
+//setter
+$( ".selector" ).accordion( "option", "collapsible", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    event

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'click'
    + +
    +
    +
    +

    The event on which to trigger the accordion.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the event option specified. +
    +
    +
    $( ".selector" ).accordion({ event: 'mouseover' });
    +
    + + +
    + Get or set the event option, after init. +
    +
    +
    //getter
+var event = $( ".selector" ).accordion( "option", "event" );
+//setter
+$( ".selector" ).accordion( "option", "event", 'mouseover' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    fillSpace

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set, the accordion completely fills the height of the parent element. Overrides autoheight.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the fillSpace option specified. +
    +
    +
    $( ".selector" ).accordion({ fillSpace: true });
    +
    + + +
    + Get or set the fillSpace option, after init. +
    +
    +
    //getter
+var fillSpace = $( ".selector" ).accordion( "option", "fillSpace" );
+//setter
+$( ".selector" ).accordion( "option", "fillSpace", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    header

    +
    +
    Type:
    +
    Selector, jQuery
    + +
    Default:
    +
    '> li > :first-child,> :not(li):even'
    + +
    +
    +
    +

    Selector for the header element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the header option specified. +
    +
    +
    $( ".selector" ).accordion({ header: 'h3' });
    +
    + + +
    + Get or set the header option, after init. +
    +
    +
    //getter
+var header = $( ".selector" ).accordion( "option", "header" );
+//setter
+$( ".selector" ).accordion( "option", "header", 'h3' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    icons

    +
    +
    Type:
    +
    Object
    + +
    Default:
    +
    { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }
    + +
    +
    +
    +

    Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by jQuery UI ThemeRoller

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the icons option specified. +
    +
    +
    $( ".selector" ).accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });
    +
    + + +
    + Get or set the icons option, after init. +
    +
    +
    //getter
+var icons = $( ".selector" ).accordion( "option", "icons" );
+//setter
+$( ".selector" ).accordion( "option", "icons", { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } );
    +
    + +
    +
    +
    • + + +
  • +
    +

    navigation

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the navigation option specified. +
    +
    +
    $( ".selector" ).accordion({ navigation: true });
    +
    + + +
    + Get or set the navigation option, after init. +
    +
    +
    //getter
+var navigation = $( ".selector" ).accordion( "option", "navigation" );
+//setter
+$( ".selector" ).accordion( "option", "navigation", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    navigationFilter

    +
    +
    Type:
    +
    Function
    + +
    Default:
    +
    + +
    +
    +
    +

    Overwrite the default location.href-matching with your own matcher.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the navigationFilter option specified. +
    +
    +
    $( ".selector" ).accordion({ navigationFilter: function(){ ... } });
    +
    + + +
    + Get or set the navigationFilter option, after init. +
    +
    +
    //getter
+var navigationFilter = $( ".selector" ).accordion( "option", "navigationFilter" );
+//setter
+$( ".selector" ).accordion( "option", "navigationFilter", function(){ ... } );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    change

    +
    +
    Type:
    +
    accordionchange
    +
    +
    +
    +

    This event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately. +

    +
    $('.ui-accordion').bind('accordionchange', function(event, ui) {
+  ui.newHeader // jQuery object, activated header
+  ui.oldHeader // jQuery object, previous header
+  ui.newContent // jQuery object, activated content
+  ui.oldContent // jQuery object, previous content
+});

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the change event as an init option. +
    +
    +
    $( ".selector" ).accordion({
+   change: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the change event by type: accordionchange. +
    +
    +
    $( ".selector" ).bind( "accordionchange", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +

    +

  • +
    +

    changestart

    +
    +
    Type:
    +
    accordionchangestart
    +
    +
    +
    +

    This event is triggered every time the accordion starts to change. +

    +
    $('.ui-accordion').bind('accordionchangestart', function(event, ui) {
+  ui.newHeader // jQuery object, activated header
+  ui.oldHeader // jQuery object, previous header
+  ui.newContent // jQuery object, activated content
+  ui.oldContent // jQuery object, previous content
+});

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the changestart event as an init option. +
    +
    +
    $( ".selector" ).accordion({
+   changestart: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the changestart event by type: accordionchangestart. +
    +
    +
    $( ".selector" ).bind( "accordionchangestart", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .accordion( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the accordion functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + +

    +

  • +
    +

    disable

    +
    +
    Signature:
    +
    .accordion( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the accordion.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .accordion( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the accordion.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .accordion( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any accordion option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .accordion( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple accordion options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .accordion( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-accordion element.

    +
    +
    • + + +
  • +
    +

    activate

    +
    +
    Signature:
    +
    .accordion( "activate" + +, index + + + + + +)
    +
    +
    +
    +

    Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass false to close all (only possible with collapsible:true).

    +
    +
    • + + +
  • +
    +

    resize

    +
    +
    Signature:
    +
    .accordion( "resize" + + + + + + + +)
    +
    +
    +
    +

    Recompute heights of the accordion contents when using the fillSpace option and the container height changed. For example, when the container is a resizable, this method should be called by its resize-event.

    +
    +
    • + +
+
+
+

Theming

+

The jQuery UI Accordion plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.accordion.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-accordion ui-widget ui-helper-reset">
+  <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top">
+    <span class="ui-icon ui-icon-triangle-1-s"/>
+    <a href="#">Section 1</a>
+  </h3>
+  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
+    Section 1 content
+  </div>
+  <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
+    <span class="ui-icon ui-icon-triangle-1-e"/>
+    <a href="#">Section 2</a>
+  </h3>
+  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
+    Section 2 content
+  </div>
+  <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
+    <span class="ui-icon ui-icon-triangle-1-e"/>
+    <a href="#">Section 3</a>
+  </h3>
+  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
+    Section 3 content
+  </div>
+</div>
+

+ + Note: This is a sample of markup generated by the accordion plugin, not markup you should use to create a accordion. The only markup needed for that is
<div>
+   <h3><a href="#">Section 1</a></h3>
+   <div>
+      Section 1 content
+   </div>
+   <h3><a href="#">Section 2</a></h3>
+   <div>
+      Section 2 content
+   </div>
+   <h3><a href="#">Section 3</a></h3>
+   <div>
+      Section 3 content
+   </div>
+</div>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/addClass.html b/static/development-bundle/docs/addClass.html new file mode 100644 index 0000000..f48cc7e --- /dev/null +++ b/static/development-bundle/docs/addClass.html @@ -0,0 +1,109 @@ + + +
+

jQuery UI addClass

+
+

Overview

+
+
[edit]

addClass( class, [duration] )

+

Adds the specified class to each of the set of matched elements with an optional transition between the states.

+
+
+

Dependencies

+
    +
  • Effects Core
    • +
+
+
+

Example

+
+ +

+Adds the class 'selected' to the matched elements with a one second transition.
+

+
$("p").click(function () {
+      $(this).addClass("selected", 1000);
+    });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
+<style type="text/css">
+  p { cursor: pointer; font-size: 1.2em; }
+  .selected { color:red; }
+</style>
+  <script>
+  $(document).ready(function() {
+    $("p").click(function () {
+      $(this).addClass("selected", 1000);
+    });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  <p>Click me to add a 'selected' class.</p>
+<p>Click me to add a 'selected' class.</p>
+<p>Click me to add a 'selected' class.</p>
+</body>
+</html>
+
+

+

+
+
+
+

Arguments

+
    + +
  • +
    +

    class

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    One CSS class to add to the elements.

    +
    +
    • + + +
  • +
    +

    duration

    +
    +
    Type:
    +
    String, Number
    + +
    Optional
    + +
    +
    +
    +

    A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    +
    +
    • + +
+
+
+ +

+ + diff --git a/static/development-bundle/docs/animate.html b/static/development-bundle/docs/animate.html new file mode 100644 index 0000000..0e55820 --- /dev/null +++ b/static/development-bundle/docs/animate.html @@ -0,0 +1,78 @@ +

The jQuery UI effects core extends the animate function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties: +

+ +

with one of the following combinations: +

+ +


+

+
NameType
Example: +
+ +
+A simple color animation.
+

+
$(".block").toggle(function() {
+    $(this).animate({ backgroundColor: "black" }, 1000);
+},function() {
+    $(this).animate({ backgroundColor: "#68BFEF" }, 500);
+});
+
+
+

+

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
+                    "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <script src="http://code.jquery.com/jquery-latest.js"></script>
+  
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+
+  <script>
+  $(document).ready(function(){
+    $(".block").toggle(function() {
+    $(this).animate({ backgroundColor: "black" }, 1000);
+},function() {
+    $(this).animate({ backgroundColor: "#68BFEF" }, 500);
+});
+
+  });
+  </script>
+  <style>
+  .block { 
+    color: white;
+    background-color: #68BFEF;
+    width: 150px; 
+    height: 70px;
+    margin: 10px; 
+  }
+  </style>
+</head>
+<body>
+  <div class="block"> Click me</div>
+</body>
+</html>
+
+

+

+

NameType
+

+ + diff --git a/static/development-bundle/docs/autocomplete.html b/static/development-bundle/docs/autocomplete.html new file mode 100644 index 0000000..dc09197 --- /dev/null +++ b/static/development-bundle/docs/autocomplete.html @@ -0,0 +1,710 @@ + + +
+

jQuery UI Autocomplete

+
+

Overview

+
+

Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

+

By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

+

This can be used to enter previous selected values, for example you could use Autocomplete for entering tags, to complete an address, you could enter a city name and get the zip code, or maybe enter email addresses from an address book.

+

You can pull data in from a local and/or a remote source: Local is good for small data sets (like an address book with 50 entries), remote is necessary for big data sets, like a database with hundreds or millions of entries to select from.

+

Autocomplete can be customized to work with various data sources, by just specifying the source option. A data source can be:

+
    +
  • an Array with local data
    • +
  • a String, specifying a URL
    • +
  • a Callback
    • +
+

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.

+

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above.

+

The third variation, the callback, provides the most flexibility, and can be used to connect any data source to Autocomplete. The callback gets two arguments:

+
    +
  • A request object, with a single property called "term", which refers to the value currently in the text input. For example, when the user entered "new yo" in a city field, the Autocomplete term will equal "new yo".
    • +
  • A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties).
    • +
+

The demos all focus on different variations of the source-option - look for the one that matches your use case, and take a look at the code.

+
+
+

Dependencies

+
    +
  • UI Core
    • +
  • UI Widget
    • +
  • UI Position
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Autocomplete.
+

+
$("input#autocomplete").autocomplete({
+    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
+});
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("input#autocomplete").autocomplete({
+    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
+});
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<input id="autocomplete" />
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the autocomplete. Can be set when initialising (first creating) the autocomplete.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a autocomplete with the disabled option specified. +
    +
    +
    $( ".selector" ).autocomplete({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
+//setter
+$( ".selector" ).autocomplete( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    delay

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    300
    + +
    +
    +
    +

    The delay in milliseconds the Autocomplete waits after a keystroke to activate itself. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a autocomplete with the delay option specified. +
    +
    +
    $( ".selector" ).autocomplete({ delay: 0 });
    +
    + + +
    + Get or set the delay option, after init. +
    +
    +
    //getter
+var delay = $( ".selector" ).autocomplete( "option", "delay" );
+//setter
+$( ".selector" ).autocomplete( "option", "delay", 0 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    minLength

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    The minimum number of characters a user has to type before the Autocomplete activates. Zero is useful for local data with just a few items. Should be increased when there are a lot of items, where a single character would match a few thousand items.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a autocomplete with the minLength option specified. +
    +
    +
    $( ".selector" ).autocomplete({ minLength: 0 });
    +
    + + +
    + Get or set the minLength option, after init. +
    +
    +
    //getter
+var minLength = $( ".selector" ).autocomplete( "option", "minLength" );
+//setter
+$( ".selector" ).autocomplete( "option", "minLength", 0 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    source

    +
    +
    Type:
    +
    String, Array, Callback
    + +
    Default:
    +
    none, must be specified
    + +
    +
    +
    +

    Defines the data to use, must be specified. See Overview section for more details, and look at the various demos. +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a autocomplete with the source option specified. +
    +
    +
    $( ".selector" ).autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });
    +
    + + +
    + Get or set the source option, after init. +
    +
    +
    //getter
+var source = $( ".selector" ).autocomplete( "option", "source" );
+//setter
+$( ".selector" ).autocomplete( "option", "source", ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + + + + +
  • +
    +

    open

    +
    +
    Type:
    +
    autocompleteopen
    +
    +
    +
    +

    Triggered when the suggestion menu is opened.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the open event as an init option. +
    +
    +
    $( ".selector" ).autocomplete({
+   open: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the open event by type: autocompleteopen. +
    +
    +
    $( ".selector" ).bind( "autocompleteopen", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    focus

    +
    +
    Type:
    +
    autocompletefocus
    +
    +
    +
    +

    Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the focus event as an init option. +
    +
    +
    $( ".selector" ).autocomplete({
+   focus: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the focus event by type: autocompletefocus. +
    +
    +
    $( ".selector" ).bind( "autocompletefocus", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    select

    +
    +
    Type:
    +
    autocompleteselect
    +
    +
    +
    +

    Triggered when an item is selected from the menu; ui.item refers to the selected item. The default action of select is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the select event as an init option. +
    +
    +
    $( ".selector" ).autocomplete({
+   select: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the select event by type: autocompleteselect. +
    +
    +
    $( ".selector" ).bind( "autocompleteselect", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    close

    +
    +
    Type:
    +
    autocompleteclose
    +
    +
    +
    +

    When the list is hidden - doesn't have to occur together with a change.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the close event as an init option. +
    +
    +
    $( ".selector" ).autocomplete({
+   close: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the close event by type: autocompleteclose. +
    +
    +
    $( ".selector" ).bind( "autocompleteclose", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    change

    +
    +
    Type:
    +
    autocompletechange
    +
    +
    +
    +

    After an item was selected; ui.item refers to the selected item. Always triggered after the close event.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the change event as an init option. +
    +
    +
    $( ".selector" ).autocomplete({
+   change: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the change event by type: autocompletechange. +
    +
    +
    $( ".selector" ).bind( "autocompletechange", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .autocomplete( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the autocomplete functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .autocomplete( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the autocomplete.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .autocomplete( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the autocomplete.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .autocomplete( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any autocomplete option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .autocomplete( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple autocomplete options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .autocomplete( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-autocomplete element.

    +
    +
    • + + + + + +
  • +
    +

    close

    +
    +
    Signature:
    +
    .autocomplete( "close" + + + + + + + +)
    +
    +
    +
    +

    Close the Autocomplete menu. Useful in combination with the search method, to close the open menu.

    +
    +
    • + +
+
+
+

Theming

+

The jQuery UI Autocomplete plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.autocomplete.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <input class="ui-autocomplete-input"/>
+<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
+  <li class="ui-menu-item">
+    <a class="ui-corner-all">item 1</a>
+  </li>
+  <li class="ui-menu-item">
+    <a class="ui-corner-all">item 2</a>
+  </li>
+  <li class="ui-menu-item">
+    <a class="ui-corner-all">item 3</a>
+  </li>
+</ul> +

+ + Note: This is a sample of markup generated by the autocomplete plugin, not markup you should use to create a autocomplete. The only markup needed for that is <input/>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/button.html b/static/development-bundle/docs/button.html new file mode 100644 index 0000000..59bbf80 --- /dev/null +++ b/static/development-bundle/docs/button.html @@ -0,0 +1,461 @@ + + +
+

jQuery UI Button

+
+

Overview

+
+

Button enhances standard form elements like button, input of type submit or reset or anchors to themable buttons with appropiate mouseover and active styles.

+

In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons: Their associated label is styled to appear as the button, while the underlying input is updated on click.

+

In order to group radio buttons, Button also provides an additional widget-method, called Buttonset. Its used by selecting a container element (which contains the radio buttons) and calling buttonset(). Buttonset will also provide visual grouping, and therefore should be used whenever you have a group of buttons. It works by selecting all descendents and applying button() to them. You can enable and disable a buttonset, which will enable and disable all contained buttons. Destroying a buttonset also calls the button's destroy method.

+

When using an input of type button, submit or reset, support is limited to plain text labels with no icons.

+
+
+

Dependencies

+
    +
  • UI Core
    • +
  • UI Widget
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Button.
+

+
$("button").button();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("button").button();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<button>Button label</button>
+
+</body>
+</html>
+
+

+

+
+ +
+A simple jQuery UI Button.
+

+
$("#radio").buttonset();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#radio").buttonset();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<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>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the button. Can be set when initialising (first creating) the button.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a button with the disabled option specified. +
    +
    +
    $( ".selector" ).button({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).button( "option", "disabled" );
+//setter
+$( ".selector" ).button( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    text

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    Whether to show any text - when set to false (display no text), icons (see icons option) must be enabled, otherwise it'll be ignored.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a button with the text option specified. +
    +
    +
    $( ".selector" ).button({ text: false });
    +
    + + +
    + Get or set the text option, after init. +
    +
    +
    //getter
+var text = $( ".selector" ).button( "option", "text" );
+//setter
+$( ".selector" ).button( "option", "text", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    icons

    +
    +
    Type:
    +
    Options
    + +
    Default:
    +
    { primary: null, secondary: null }
    + +
    +
    +
    +

    Icons to display, with or without text (see text option). The primary icon is displayed by default on the left of the label text, the secondary by default is on the right. Value for the primary and secondary properties must be a classname (String), eg. "ui-icon-gear". For using only one icon: icons: {primary:'ui-icon-locked'}. For using two icons: icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a button with the icons option specified. +
    +
    +
    $( ".selector" ).button({ icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} });
    +
    + + +
    + Get or set the icons option, after init. +
    +
    +
    //getter
+var icons = $( ".selector" ).button( "option", "icons" );
+//setter
+$( ".selector" ).button( "option", "icons", {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} );
    +
    + +
    +
    +
    • + + +
  • +
    +

    label

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    HTML content of the button, or value attribute
    + +
    +
    +
    +

    Text to show on the button. When not specified (null), the element's html content is used, or its value attribute when it's an input element of type submit or reset; or the html content of the associated label element if its an input of type radio or checkbox

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a button with the label option specified. +
    +
    +
    $( ".selector" ).button({ label: "custom label" });
    +
    + + +
    + Get or set the label option, after init. +
    +
    +
    //getter
+var label = $( ".selector" ).button( "option", "label" );
+//setter
+
    
+$( ".selector" ).button( "option", "label", "custom label" );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    +

    There are no events for this plugin.

    +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .button( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the button functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + +

    +

  • +
    +

    disable

    +
    +
    Signature:
    +
    .button( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the button.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .button( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the button.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .button( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any button option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .button( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple button options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .button( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-button element.

    +
    +
    • + + +
  • +
    +

    refresh

    +
    +
    Signature:
    +
    .button( "refresh" + + + + + + + +)
    +
    +
    +
    +

    Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programatically.

    +
    +
    • + +
+
+
+

Theming

+

The jQuery UI Button plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.button.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
+   <span class="ui-button-text">Button Label</span>
</button> +

+ + Note: This is a sample of markup generated by the button plugin, not markup you should use to create a button. The only markup needed for that is <button>Button Label</button>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/datepicker.html b/static/development-bundle/docs/datepicker.html new file mode 100644 index 0000000..98bf6c8 --- /dev/null +++ b/static/development-bundle/docs/datepicker.html @@ -0,0 +1,2531 @@ + + +
+

jQuery UI Datepicker

+
+

Overview

+
+

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

+

By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span. +

You can use keyboard shortcuts to drive the datepicker: +

+
    +
  • page up/down - previous/next month
    • +
  • ctrl+page up/down - previous/next year
    • +
  • ctrl+home - current month or open when closed
    • +
  • ctrl+left/right - previous/next day
    • +
  • ctrl+up/down - previous/next week
    • +
  • enter - accept the selected date
    • +
  • ctrl+end - close and erase the date
    • +
  • escape - close the datepicker without selection
    • +
+
[edit]

Utility functions

+ +
[edit]

Localization

+

Datepicker provides support for localizing its content to cater for different languages + and date formats. Each localization is contained within its own file with the + language code appended to the name, e.g. jquery.ui.datepicker-fr.js for French. + The desired localization file should be include after the main datepicker code. They add their settings to the set + of available localizations and automatically apply them as defaults for all instances.

+

The $.datepicker.regional attribute holds an array of localizations, + indexed by language code, with '' referring to the default (English). Each entry is + an object with the following attributes: closeText, prevText, + nextText, currentText, monthNames, + monthNamesShort, dayNames, dayNamesShort, + dayNamesMin, weekHeader, dateFormat, + firstDay, isRTL, showMonthAfterYear, + and yearSuffix.

+

You can restore the default localizations with:

+

$.datepicker.setDefaults($.datepicker.regional['']); +

+

And can then override an individual datepicker for a specific locale:

+

$(selector).datepicker($.datepicker.regional['fr']); +

+The localization files are also available in the UI svn: http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/ +
+
+

Dependencies

+
    +
  • UI Core
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Datepicker.
+

+
$("#datepicker").datepicker();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#datepicker").datepicker();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div type="text" id="datepicker"></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the datepicker. Can be set when initialising (first creating) the datepicker.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the disabled option specified. +
    +
    +
    $( ".selector" ).datepicker({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).datepicker( "option", "disabled" );
+//setter
+$( ".selector" ).datepicker( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    altField

    +
    +
    Type:
    +
    Selector, jQuery, Element
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    The jQuery selector for another field that is to be updated with the selected date from the datepicker. Use the altFormat setting to change the format of the date within this field. Leave as blank for no alternate field.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the altField option specified. +
    +
    +
    $( ".selector" ).datepicker({ altField: '#actualDate' });
    +
    + + +
    + Get or set the altField option, after init. +
    +
    +
    //getter
+var altField = $( ".selector" ).datepicker( "option", "altField" );
+//setter
+$( ".selector" ).datepicker( "option", "altField", '#actualDate' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    altFormat

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the altFormat option specified. +
    +
    +
    $( ".selector" ).datepicker({ altFormat: 'yy-mm-dd' });
    +
    + + +
    + Get or set the altFormat option, after init. +
    +
    +
    //getter
+var altFormat = $( ".selector" ).datepicker( "option", "altFormat" );
+//setter
+$( ".selector" ).datepicker( "option", "altFormat", 'yy-mm-dd' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    appendText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    The text to display after each date field, e.g. to show the required format.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the appendText option specified. +
    +
    +
    $( ".selector" ).datepicker({ appendText: '(yyyy-mm-dd)' });
    +
    + + +
    + Get or set the appendText option, after init. +
    +
    +
    //getter
+var appendText = $( ".selector" ).datepicker( "option", "appendText" );
+//setter
+$( ".selector" ).datepicker( "option", "appendText", '(yyyy-mm-dd)' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    autoSize

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Set to true to automatically resize the input field to accomodate dates in the current dateFormat.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the autoSize option specified. +
    +
    +
    $( ".selector" ).datepicker({ autoSize: true });
    +
    + + +
    + Get or set the autoSize option, after init. +
    +
    +
    //getter
+var autoSize = $( ".selector" ).datepicker( "option", "autoSize" );
+//setter
+$( ".selector" ).datepicker( "option", "autoSize", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    buttonImage

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    The URL for the popup button image. If set, buttonText becomes the alt value and is not directly displayed.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the buttonImage option specified. +
    +
    +
    $( ".selector" ).datepicker({ buttonImage: '/images/datepicker.gif' });
    +
    + + +
    + Get or set the buttonImage option, after init. +
    +
    +
    //getter
+var buttonImage = $( ".selector" ).datepicker( "option", "buttonImage" );
+//setter
+$( ".selector" ).datepicker( "option", "buttonImage", '/images/datepicker.gif' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    buttonImageOnly

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Set to true to place an image after the field to use as the trigger without it appearing on a button.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the buttonImageOnly option specified. +
    +
    +
    $( ".selector" ).datepicker({ buttonImageOnly: true });
    +
    + + +
    + Get or set the buttonImageOnly option, after init. +
    +
    +
    //getter
+var buttonImageOnly = $( ".selector" ).datepicker( "option", "buttonImageOnly" );
+//setter
+$( ".selector" ).datepicker( "option", "buttonImageOnly", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    buttonText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    '...'
    + +
    +
    +
    +

    The text to display on the trigger button. Use in conjunction with showOn equal to 'button' or 'both'.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the buttonText option specified. +
    +
    +
    $( ".selector" ).datepicker({ buttonText: 'Choose' });
    +
    + + +
    + Get or set the buttonText option, after init. +
    +
    +
    //getter
+var buttonText = $( ".selector" ).datepicker( "option", "buttonText" );
+//setter
+$( ".selector" ).datepicker( "option", "buttonText", 'Choose' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    calculateWeek

    +
    +
    Type:
    +
    Function
    + +
    Default:
    +
    $.datepicker.iso8601Week
    + +
    +
    +
    +

    A function to calculate the week of the year for a given date. The default implementation uses the ISO 8601 definition: weeks start on a Monday; the first week of the year contains the first Thursday of the year.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the calculateWeek option specified. +
    +
    +
    $( ".selector" ).datepicker({ calculateWeek: myWeekCalc });
    +
    + + +
    + Get or set the calculateWeek option, after init. +
    +
    +
    //getter
+var calculateWeek = $( ".selector" ).datepicker( "option", "calculateWeek" );
+//setter
+$( ".selector" ).datepicker( "option", "calculateWeek", myWeekCalc );
    +
    + +
    +
    +
    • + + +
  • +
    +

    changeMonth

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Allows you to change the month by selecting from a drop-down list. You can enable this feature by setting the attribute to true.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the changeMonth option specified. +
    +
    +
    $( ".selector" ).datepicker({ changeMonth: true });
    +
    + + +
    + Get or set the changeMonth option, after init. +
    +
    +
    //getter
+var changeMonth = $( ".selector" ).datepicker( "option", "changeMonth" );
+//setter
+$( ".selector" ).datepicker( "option", "changeMonth", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    changeYear

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Allows you to change the year by selecting from a drop-down list. You can enable this feature by setting the attribute to true. Use the yearRange option to control which years are made available for selection.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the changeYear option specified. +
    +
    +
    $( ".selector" ).datepicker({ changeYear: true });
    +
    + + +
    + Get or set the changeYear option, after init. +
    +
    +
    //getter
+var changeYear = $( ".selector" ).datepicker( "option", "changeYear" );
+//setter
+$( ".selector" ).datepicker( "option", "changeYear", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    closeText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'Done'
    + +
    +
    +
    +

    The text to display for the close link. This attribute is one of the regionalisation attributes. Use the showButtonPanel to display this button.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the closeText option specified. +
    +
    +
    $( ".selector" ).datepicker({ closeText: 'X' });
    +
    + + +
    + Get or set the closeText option, after init. +
    +
    +
    //getter
+var closeText = $( ".selector" ).datepicker( "option", "closeText" );
+//setter
+$( ".selector" ).datepicker( "option", "closeText", 'X' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    constrainInput

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    When true entry in the input field is constrained to those characters allowed by the current dateFormat.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the constrainInput option specified. +
    +
    +
    $( ".selector" ).datepicker({ constrainInput: false });
    +
    + + +
    + Get or set the constrainInput option, after init. +
    +
    +
    //getter
+var constrainInput = $( ".selector" ).datepicker( "option", "constrainInput" );
+//setter
+$( ".selector" ).datepicker( "option", "constrainInput", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    currentText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'Today'
    + +
    +
    +
    +

    The text to display for the current day link. This attribute is one of the regionalisation attributes. Use the showButtonPanel to display this button.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the currentText option specified. +
    +
    +
    $( ".selector" ).datepicker({ currentText: 'Now' });
    +
    + + +
    + Get or set the currentText option, after init. +
    +
    +
    //getter
+var currentText = $( ".selector" ).datepicker( "option", "currentText" );
+//setter
+$( ".selector" ).datepicker( "option", "currentText", 'Now' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    dateFormat

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'mm/dd/yy'
    + +
    +
    +
    +

    The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the formatDate function.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the dateFormat option specified. +
    +
    +
    $( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
    +
    + + +
    + Get or set the dateFormat option, after init. +
    +
    +
    //getter
+var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
+//setter
+$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    dayNames

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
    + +
    +
    +
    +

    The list of long day names, starting from Sunday, for use as requested via the dateFormat setting. They also appear as popup hints when hovering over the corresponding column headings. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the dayNames option specified. +
    +
    +
    $( ".selector" ).datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });
    +
    + + +
    + Get or set the dayNames option, after init. +
    +
    +
    //getter
+var dayNames = $( ".selector" ).datepicker( "option", "dayNames" );
+//setter
+$( ".selector" ).datepicker( "option", "dayNames", ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    dayNamesMin

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
    + +
    +
    +
    +

    The list of minimised day names, starting from Sunday, for use as column headers within the datepicker. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the dayNamesMin option specified. +
    +
    +
    $( ".selector" ).datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });
    +
    + + +
    + Get or set the dayNamesMin option, after init. +
    +
    +
    //getter
+var dayNamesMin = $( ".selector" ).datepicker( "option", "dayNamesMin" );
+//setter
+$( ".selector" ).datepicker( "option", "dayNamesMin", ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    dayNamesShort

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    + +
    +
    +
    +

    The list of abbreviated day names, starting from Sunday, for use as requested via the dateFormat setting. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the dayNamesShort option specified. +
    +
    +
    $( ".selector" ).datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });
    +
    + + +
    + Get or set the dayNamesShort option, after init. +
    +
    +
    //getter
+var dayNamesShort = $( ".selector" ).datepicker( "option", "dayNamesShort" );
+//setter
+$( ".selector" ).datepicker( "option", "dayNamesShort", ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    defaultDate

    +
    +
    Type:
    +
    Date, Number, String
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the defaultDate option specified. +
    +
    +
    $( ".selector" ).datepicker({ defaultDate: +7 });
    +
    + + +
    + Get or set the defaultDate option, after init. +
    +
    +
    //getter
+var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
+//setter
+$( ".selector" ).datepicker( "option", "defaultDate", +7 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    duration

    +
    +
    Type:
    +
    String, Number
    + +
    Default:
    +
    'normal'
    + +
    +
    +
    +

    Control the speed at which the datepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds ("slow", "normal", "fast").

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the duration option specified. +
    +
    +
    $( ".selector" ).datepicker({ duration: 'slow' });
    +
    + + +
    + Get or set the duration option, after init. +
    +
    +
    //getter
+var duration = $( ".selector" ).datepicker( "option", "duration" );
+//setter
+$( ".selector" ).datepicker( "option", "duration", 'slow' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    firstDay

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the firstDay option specified. +
    +
    +
    $( ".selector" ).datepicker({ firstDay: 1 });
    +
    + + +
    + Get or set the firstDay option, after init. +
    +
    +
    //getter
+var firstDay = $( ".selector" ).datepicker( "option", "firstDay" );
+//setter
+$( ".selector" ).datepicker( "option", "firstDay", 1 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    gotoCurrent

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    When true the current day link moves to the currently selected date instead of today.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the gotoCurrent option specified. +
    +
    +
    $( ".selector" ).datepicker({ gotoCurrent: true });
    +
    + + +
    + Get or set the gotoCurrent option, after init. +
    +
    +
    //getter
+var gotoCurrent = $( ".selector" ).datepicker( "option", "gotoCurrent" );
+//setter
+$( ".selector" ).datepicker( "option", "gotoCurrent", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    hideIfNoPrevNext

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Normally the previous and next links are disabled when not applicable (see minDate/maxDate). You can hide them altogether by setting this attribute to true.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the hideIfNoPrevNext option specified. +
    +
    +
    $( ".selector" ).datepicker({ hideIfNoPrevNext: true });
    +
    + + +
    + Get or set the hideIfNoPrevNext option, after init. +
    +
    +
    //getter
+var hideIfNoPrevNext = $( ".selector" ).datepicker( "option", "hideIfNoPrevNext" );
+//setter
+$( ".selector" ).datepicker( "option", "hideIfNoPrevNext", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    isRTL

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    True if the current language is drawn from right to left. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the isRTL option specified. +
    +
    +
    $( ".selector" ).datepicker({ isRTL: true });
    +
    + + +
    + Get or set the isRTL option, after init. +
    +
    +
    //getter
+var isRTL = $( ".selector" ).datepicker( "option", "isRTL" );
+//setter
+$( ".selector" ).datepicker( "option", "isRTL", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    maxDate

    +
    +
    Type:
    +
    Date, Number, String
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    Set a maximum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +1w'), or null for no limit.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the maxDate option specified. +
    +
    +
    $( ".selector" ).datepicker({ maxDate: '+1m +1w' });
    +
    + + +
    + Get or set the maxDate option, after init. +
    +
    +
    //getter
+var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
+//setter
+$( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    minDate

    +
    +
    Type:
    +
    Date, Number, String
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    Set a minimum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the minDate option specified. +
    +
    +
    $( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) });
    +
    + + +
    + Get or set the minDate option, after init. +
    +
    +
    //getter
+var minDate = $( ".selector" ).datepicker( "option", "minDate" );
+//setter
+$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
    +
    + +
    +
    +
    • + + +
  • +
    +

    monthNames

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
    + +
    +
    +
    +

    The list of full month names, for use as requested via the dateFormat setting. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the monthNames option specified. +
    +
    +
    $( ".selector" ).datepicker({ monthNames: ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'] });
    +
    + + +
    + Get or set the monthNames option, after init. +
    +
    +
    //getter
+var monthNames = $( ".selector" ).datepicker( "option", "monthNames" );
+//setter
+$( ".selector" ).datepicker( "option", "monthNames", ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    monthNamesShort

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    + +
    +
    +
    +

    The list of abbreviated month names, as used in the month header on each datepicker and as requested via the dateFormat setting. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the monthNamesShort option specified. +
    +
    +
    $( ".selector" ).datepicker({ monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'] });
    +
    + + +
    + Get or set the monthNamesShort option, after init. +
    +
    +
    //getter
+var monthNamesShort = $( ".selector" ).datepicker( "option", "monthNamesShort" );
+//setter
+$( ".selector" ).datepicker( "option", "monthNamesShort", ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    navigationAsDateFormat

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    When true the formatDate function is applied to the prevText, nextText, and currentText values before display, allowing them to display the target month names for example.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the navigationAsDateFormat option specified. +
    +
    +
    $( ".selector" ).datepicker({ navigationAsDateFormat: true });
    +
    + + +
    + Get or set the navigationAsDateFormat option, after init. +
    +
    +
    //getter
+var navigationAsDateFormat = $( ".selector" ).datepicker( "option", "navigationAsDateFormat" );
+//setter
+$( ".selector" ).datepicker( "option", "navigationAsDateFormat", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    nextText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'Next'
    + +
    +
    +
    +

    The text to display for the next month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the nextText option specified. +
    +
    +
    $( ".selector" ).datepicker({ nextText: 'Later' });
    +
    + + +
    + Get or set the nextText option, after init. +
    +
    +
    //getter
+var nextText = $( ".selector" ).datepicker( "option", "nextText" );
+//setter
+$( ".selector" ).datepicker( "option", "nextText", 'Later' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    numberOfMonths

    +
    +
    Type:
    +
    Number, Array
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Set how many months to show at once. The value can be a straight integer, or can be a two-element array to define the number of rows and columns to display.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the numberOfMonths option specified. +
    +
    +
    $( ".selector" ).datepicker({ numberOfMonths: [2, 3] });
    +
    + + +
    + Get or set the numberOfMonths option, after init. +
    +
    +
    //getter
+var numberOfMonths = $( ".selector" ).datepicker( "option", "numberOfMonths" );
+//setter
+$( ".selector" ).datepicker( "option", "numberOfMonths", [2, 3] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    prevText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'Prev'
    + +
    +
    +
    +

    The text to display for the previous month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the prevText option specified. +
    +
    +
    $( ".selector" ).datepicker({ prevText: 'Earlier' });
    +
    + + +
    + Get or set the prevText option, after init. +
    +
    +
    //getter
+var prevText = $( ".selector" ).datepicker( "option", "prevText" );
+//setter
+$( ".selector" ).datepicker( "option", "prevText", 'Earlier' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    selectOtherMonths

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    When true days in other months shown before or after the current month are selectable. This only applies if showOtherMonths is also true.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the selectOtherMonths option specified. +
    +
    +
    $( ".selector" ).datepicker({ selectOtherMonths: true });
    +
    + + +
    + Get or set the selectOtherMonths option, after init. +
    +
    +
    //getter
+var selectOtherMonths = $( ".selector" ).datepicker( "option", "selectOtherMonths" );
+//setter
+$( ".selector" ).datepicker( "option", "selectOtherMonths", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    shortYearCutoff

    +
    +
    Type:
    +
    String, Number
    + +
    Default:
    +
    '+10'
    + +
    +
    +
    +

    Set the cutoff year for determining the century for a date (used in conjunction with dateFormat 'y'). If a numeric value (0-99) is provided then this value is used directly. If a string value is provided then it is converted to a number and added to the current year. Once the cutoff year is calculated, any dates entered with a year value less than or equal to it are considered to be in the current century, while those greater than it are deemed to be in the previous century.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the shortYearCutoff option specified. +
    +
    +
    $( ".selector" ).datepicker({ shortYearCutoff: 50 });
    +
    + + +
    + Get or set the shortYearCutoff option, after init. +
    +
    +
    //getter
+var shortYearCutoff = $( ".selector" ).datepicker( "option", "shortYearCutoff" );
+//setter
+$( ".selector" ).datepicker( "option", "shortYearCutoff", 50 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showAnim

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'show'
    + +
    +
    +
    +

    Set the name of the animation used to show/hide the datepicker. Use 'show' (the default), 'slideDown', 'fadeIn', any of the show/hide jQuery UI effects, or '' for no animation.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showAnim option specified. +
    +
    +
    $( ".selector" ).datepicker({ showAnim: 'fold' });
    +
    + + +
    + Get or set the showAnim option, after init. +
    +
    +
    //getter
+var showAnim = $( ".selector" ).datepicker( "option", "showAnim" );
+//setter
+$( ".selector" ).datepicker( "option", "showAnim", 'fold' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showButtonPanel

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Whether to show the button panel.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showButtonPanel option specified. +
    +
    +
    $( ".selector" ).datepicker({ showButtonPanel: true });
    +
    + + +
    + Get or set the showButtonPanel option, after init. +
    +
    +
    //getter
+var showButtonPanel = $( ".selector" ).datepicker( "option", "showButtonPanel" );
+//setter
+$( ".selector" ).datepicker( "option", "showButtonPanel", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showCurrentAtPos

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Specify where in a multi-month display the current month shows, starting from 0 at the top/left.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showCurrentAtPos option specified. +
    +
    +
    $( ".selector" ).datepicker({ showCurrentAtPos: 3 });
    +
    + + +
    + Get or set the showCurrentAtPos option, after init. +
    +
    +
    //getter
+var showCurrentAtPos = $( ".selector" ).datepicker( "option", "showCurrentAtPos" );
+//setter
+$( ".selector" ).datepicker( "option", "showCurrentAtPos", 3 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showMonthAfterYear

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Whether to show the month after the year in the header. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showMonthAfterYear option specified. +
    +
    +
    $( ".selector" ).datepicker({ showMonthAfterYear: true });
    +
    + + +
    + Get or set the showMonthAfterYear option, after init. +
    +
    +
    //getter
+var showMonthAfterYear = $( ".selector" ).datepicker( "option", "showMonthAfterYear" );
+//setter
+$( ".selector" ).datepicker( "option", "showMonthAfterYear", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showOn

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'focus'
    + +
    +
    +
    +

    Have the datepicker appear automatically when the field receives focus ('focus'), appear only when a button is clicked ('button'), or appear when either event takes place ('both').

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showOn option specified. +
    +
    +
    $( ".selector" ).datepicker({ showOn: 'both' });
    +
    + + +
    + Get or set the showOn option, after init. +
    +
    +
    //getter
+var showOn = $( ".selector" ).datepicker( "option", "showOn" );
+//setter
+$( ".selector" ).datepicker( "option", "showOn", 'both' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showOptions

    +
    +
    Type:
    +
    Options
    + +
    Default:
    +
    {}
    + +
    +
    +
    +

    If using one of the jQuery UI effects for showAnim, you can provide additional settings for that animation via this option.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showOptions option specified. +
    +
    +
    $( ".selector" ).datepicker({ showOptions: {direction: 'up' });
    +
    + + +
    + Get or set the showOptions option, after init. +
    +
    +
    //getter
+var showOptions = $( ".selector" ).datepicker( "option", "showOptions" );
+//setter
+$( ".selector" ).datepicker( "option", "showOptions", {direction: 'up' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showOtherMonths

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use selectOtherMonths.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showOtherMonths option specified. +
    +
    +
    $( ".selector" ).datepicker({ showOtherMonths: true });
    +
    + + +
    + Get or set the showOtherMonths option, after init. +
    +
    +
    //getter
+var showOtherMonths = $( ".selector" ).datepicker( "option", "showOtherMonths" );
+//setter
+$( ".selector" ).datepicker( "option", "showOtherMonths", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showWeek

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    When true a column is added to show the week of the year. The calculateWeek option determines how the week of the year is calculated. You may also want to change the firstDay option.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showWeek option specified. +
    +
    +
    $( ".selector" ).datepicker({ showWeek: true });
    +
    + + +
    + Get or set the showWeek option, after init. +
    +
    +
    //getter
+var showWeek = $( ".selector" ).datepicker( "option", "showWeek" );
+//setter
+$( ".selector" ).datepicker( "option", "showWeek", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    stepMonths

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Set how many months to move when clicking the Previous/Next links.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the stepMonths option specified. +
    +
    +
    $( ".selector" ).datepicker({ stepMonths: 3 });
    +
    + + +
    + Get or set the stepMonths option, after init. +
    +
    +
    //getter
+var stepMonths = $( ".selector" ).datepicker( "option", "stepMonths" );
+//setter
+$( ".selector" ).datepicker( "option", "stepMonths", 3 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    weekHeader

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'Wk'
    + +
    +
    +
    +

    The text to display for the week of the year column heading. This attribute is one of the regionalisation attributes. Use showWeek to display this column.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the weekHeader option specified. +
    +
    +
    $( ".selector" ).datepicker({ weekHeader: 'W' });
    +
    + + +
    + Get or set the weekHeader option, after init. +
    +
    +
    //getter
+var weekHeader = $( ".selector" ).datepicker( "option", "weekHeader" );
+//setter
+$( ".selector" ).datepicker( "option", "weekHeader", 'W' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    yearRange

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'c-10:c+10'
    + +
    +
    +
    +

    Control the range of years displayed in the year drop-down: either relative to today's year (-nn:+nn), relative to the currently selected year (c-nn:c+nn), absolute (nnnn:nnnn), or combinations of these formats (nnnn:-nn). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate and/or maxDate options.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the yearRange option specified. +
    +
    +
    $( ".selector" ).datepicker({ yearRange: '2000:2010' });
    +
    + + +
    + Get or set the yearRange option, after init. +
    +
    +
    //getter
+var yearRange = $( ".selector" ).datepicker( "option", "yearRange" );
+//setter
+$( ".selector" ).datepicker( "option", "yearRange", '2000:2010' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    yearSuffix

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    Additional text to display after the year in the month headers. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the yearSuffix option specified. +
    +
    +
    $( ".selector" ).datepicker({ yearSuffix: 'CE' });
    +
    + + +
    + Get or set the yearSuffix option, after init. +
    +
    +
    //getter
+var yearSuffix = $( ".selector" ).datepicker( "option", "yearSuffix" );
+//setter
+$( ".selector" ).datepicker( "option", "yearSuffix", 'CE' );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    beforeShow

    +
    +
    +
    function(input, inst)
    +
    +
    +
    +

    Can be a function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the beforeShow event as an init option. +
    +
    +
    $('.selector').datepicker({
+   beforeShow: function(input, inst) { ... }
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    beforeShowDay

    +
    +
    +
    function(date)
    +
    +
    +
    +

    The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the beforeShowDay event as an init option. +
    +
    +
    $('.selector').datepicker({
+   beforeShowDay: function(date) { ... }
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    onChangeMonthYear

    +
    +
    +
    function(year, month, inst)
    +
    +
    +
    +

    Allows you to define your own event when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. this refers to the associated input field.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the onChangeMonthYear event as an init option. +
    +
    +
    $('.selector').datepicker({
+   onChangeMonthYear: function(year, month, inst) { ... }
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    onClose

    +
    +
    +
    function(dateText, inst)
    +
    +
    +
    +

    Allows you to define your own event when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text ('' if none) and the datepicker instance as parameters. this refers to the associated input field.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the onClose event as an init option. +
    +
    +
    $('.selector').datepicker({
+   onClose: function(dateText, inst) { ... }
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    onSelect

    +
    +
    +
    function(dateText, inst)
    +
    +
    +
    +

    Allows you to define your own event when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the onSelect event as an init option. +
    +
    +
    $('.selector').datepicker({
+   onSelect: function(dateText, inst) { ... }
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .datepicker( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the datepicker functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .datepicker( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the datepicker.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .datepicker( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the datepicker.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .datepicker( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any datepicker option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .datepicker( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple datepicker options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .datepicker( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-datepicker element.

    +
    +
    • + + +
  • +
    +

    dialog

    +
    +
    Signature:
    +
    .datepicker( "dialog" + +, date + +, [onSelect] + +, [settings] + +, [pos] )
    +
    +
    +
    +

    Open a datepicker in a "dialog" box. +

    dateText: the initial date for the date picker as either a Date or a string in the current date format. +

    onSelect: A callback function when a date is selected. The function receives the date text and date picker instance as parameters. +

    settings: The new settings for the date picker. +

    pos: The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.

    +
    +
    • + + +
  • +
    +

    isDisabled

    +
    +
    Signature:
    +
    .datepicker( "isDisabled" + + + + + + + +)
    +
    +
    +
    +

    Determine whether a date picker has been disabled.

    +
    +
    • + + +
  • +
    +

    hide

    +
    +
    Signature:
    +
    .datepicker( "hide" + + + + + + + +)
    +
    +
    +
    +

    Close a previously opened date picker.

    +
    +
    • + + +
  • +
    +

    show

    +
    +
    Signature:
    +
    .datepicker( "show" + + + + + + + +)
    +
    +
    +
    +

    Call up a previously attached date picker.

    +
    +
    • + + +
  • +
    +

    refresh

    +
    +
    Signature:
    +
    .datepicker( "refresh" + + + + + + + +)
    +
    +
    +
    +

    Redraw a date picker, after having made some external modifications.

    +
    +
    • + + +
  • +
    +

    getDate

    +
    +
    Signature:
    +
    .datepicker( "getDate" + + + + + + + +)
    +
    +
    +
    +

    Returns the current date for the datepicker or null if no date has been selected.

    +
    +
    • + + +
  • +
    +

    setDate

    +
    +
    Signature:
    +
    .datepicker( "setDate" + +, date + + + + + +)
    +
    +
    +
    +

    Sets the current date for the datepicker. The new date may be a Date object or a string in the current date format (e.g. '01/26/2009'), a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null to clear the selected date.

    +
    +
    • + +
+
+
+

Theming

+

The jQuery UI Datepicker plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.datepicker.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible">
+   <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
+      <a class="ui-datepicker-prev ui-corner-all">title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
+      <a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
+      <div class="ui-datepicker-title">
+         <span class="ui-datepicker-month">January</span><span class="ui-datepicker-year">2009</span>
+      </div>
+   </div>
+   <table class="ui-datepicker-calendar">
+      <thead>
+      <tr>
+         <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
+         ...
+      </tr>
+      </thead>
+      <tbody><tr>
+         <td class="ui-datepicker-week-end ui-datepicker-other-month "> 1 </td>
+         ...
+      </tr>
+      </tbody>
+   </table>
+   <div class="ui-datepicker-buttonpane ui-widget-content">
+      <button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button>
+      <button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all">Done</button>
+   </div>
+</div>
+

+ + Note: This is a sample of markup generated by the datepicker plugin, not markup you should use to create a datepicker. The only markup needed for that is <input type="text" /> or <div></div>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/dialog.html b/static/development-bundle/docs/dialog.html new file mode 100644 index 0000000..9d490b1 --- /dev/null +++ b/static/development-bundle/docs/dialog.html @@ -0,0 +1,1656 @@ + + +
+

jQuery UI Dialog

+
+

Overview

+
+

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

+

If the content length exceeds the maximum height, a scrollbar will automatically appear.

+

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

+

A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: $(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open'). To close it, use $(foo).dialog('close'). A more in-depth explanation with a full demo is available on the Nemikor blog.

+
+
+

Dependencies

+
    +
  • UI Core
    • +
  • UI Draggable (Optional)
    • +
  • UI Resizable (Optional)
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Dialog.
+

+
$("#dialog").dialog();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#dialog").dialog();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="dialog" title="Dialog Title">I'm in a dialog</div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the dialog. Can be set when initialising (first creating) the dialog.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the disabled option specified. +
    +
    +
    $( ".selector" ).dialog({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).dialog( "option", "disabled" );
+//setter
+$( ".selector" ).dialog( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    autoOpen

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    When autoOpen is true the dialog will open automatically when dialog is called. If false it will stay hidden until .dialog("open") is called on it.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the autoOpen option specified. +
    +
    +
    $( ".selector" ).dialog({ autoOpen: false });
    +
    + + +
    + Get or set the autoOpen option, after init. +
    +
    +
    //getter
+var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
+//setter
+$( ".selector" ).dialog( "option", "autoOpen", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    buttons

    +
    +
    Type:
    +
    Object
    + +
    Default:
    +
    { }
    + +
    +
    +
    +

    Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object. +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the buttons option specified. +
    +
    +
    $( ".selector" ).dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
    +
    + + +
    + Get or set the buttons option, after init. +
    +
    +
    //getter
+var buttons = $( ".selector" ).dialog( "option", "buttons" );
+//setter
+$( ".selector" ).dialog( "option", "buttons", { "Ok": function() { $(this).dialog("close"); } } );
    +
    + +
    +
    +
    • + + +
  • +
    +

    buttons

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    [ ]
    + +
    +
    +
    +

    Specifies which buttons should be displayed on the dialog. Each element of the array must be an Object defining the properties to set on the button. +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the buttons option specified. +
    +
    +
    $( ".selector" ).dialog({ buttons: [
+    {
+        text: "Ok",
+        click: function() { $(this).dialog("close"); }
+    }
+] });
    +
    + + +
    + Get or set the buttons option, after init. +
    +
    +
    //getter
+var buttons = $( ".selector" ).dialog( "option", "buttons" );
+//setter
+$( ".selector" ).dialog( "option", "buttons", [
+    {
+        text: "Ok",
+        click: function() { $(this).dialog("close"); }
+    }
+] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    closeOnEscape

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the closeOnEscape option specified. +
    +
    +
    $( ".selector" ).dialog({ closeOnEscape: false });
    +
    + + +
    + Get or set the closeOnEscape option, after init. +
    +
    +
    //getter
+var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
+//setter
+$( ".selector" ).dialog( "option", "closeOnEscape", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    closeText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'close'
    + +
    +
    +
    +

    Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the closeText option specified. +
    +
    +
    $( ".selector" ).dialog({ closeText: 'hide' });
    +
    + + +
    + Get or set the closeText option, after init. +
    +
    +
    //getter
+var closeText = $( ".selector" ).dialog( "option", "closeText" );
+//setter
+$( ".selector" ).dialog( "option", "closeText", 'hide' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    dialogClass

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    The specified class name(s) will be added to the dialog, for additional theming.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the dialogClass option specified. +
    +
    +
    $( ".selector" ).dialog({ dialogClass: 'alert' });
    +
    + + +
    + Get or set the dialogClass option, after init. +
    +
    +
    //getter
+var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
+//setter
+$( ".selector" ).dialog( "option", "dialogClass", 'alert' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    draggable

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to true, the dialog will be draggable will be draggable by the titlebar.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the draggable option specified. +
    +
    +
    $( ".selector" ).dialog({ draggable: false });
    +
    + + +
    + Get or set the draggable option, after init. +
    +
    +
    //getter
+var draggable = $( ".selector" ).dialog( "option", "draggable" );
+//setter
+$( ".selector" ).dialog( "option", "draggable", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    height

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    'auto'
    + +
    +
    +
    +

    The height of the dialog, in pixels. Specifying 'auto' is also supported to make the dialog adjust based on its content.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the height option specified. +
    +
    +
    $( ".selector" ).dialog({ height: 530 });
    +
    + + +
    + Get or set the height option, after init. +
    +
    +
    //getter
+var height = $( ".selector" ).dialog( "option", "height" );
+//setter
+$( ".selector" ).dialog( "option", "height", 530 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    hide

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    The effect to be used when the dialog is closed.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the hide option specified. +
    +
    +
    $( ".selector" ).dialog({ hide: 'slide' });
    +
    + + +
    + Get or set the hide option, after init. +
    +
    +
    //getter
+var hide = $( ".selector" ).dialog( "option", "hide" );
+//setter
+$( ".selector" ).dialog( "option", "hide", 'slide' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    maxHeight

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    The maximum height to which the dialog can be resized, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the maxHeight option specified. +
    +
    +
    $( ".selector" ).dialog({ maxHeight: 400 });
    +
    + + +
    + Get or set the maxHeight option, after init. +
    +
    +
    //getter
+var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );
+//setter
+$( ".selector" ).dialog( "option", "maxHeight", 400 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    maxWidth

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    The maximum width to which the dialog can be resized, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the maxWidth option specified. +
    +
    +
    $( ".selector" ).dialog({ maxWidth: 600 });
    +
    + + +
    + Get or set the maxWidth option, after init. +
    +
    +
    //getter
+var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );
+//setter
+$( ".selector" ).dialog( "option", "maxWidth", 600 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    minHeight

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    150
    + +
    +
    +
    +

    The minimum height to which the dialog can be resized, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the minHeight option specified. +
    +
    +
    $( ".selector" ).dialog({ minHeight: 300 });
    +
    + + +
    + Get or set the minHeight option, after init. +
    +
    +
    //getter
+var minHeight = $( ".selector" ).dialog( "option", "minHeight" );
+//setter
+$( ".selector" ).dialog( "option", "minHeight", 300 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    minWidth

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    150
    + +
    +
    +
    +

    The minimum width to which the dialog can be resized, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the minWidth option specified. +
    +
    +
    $( ".selector" ).dialog({ minWidth: 400 });
    +
    + + +
    + Get or set the minWidth option, after init. +
    +
    +
    //getter
+var minWidth = $( ".selector" ).dialog( "option", "minWidth" );
+//setter
+$( ".selector" ).dialog( "option", "minWidth", 400 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    modal

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the modal option specified. +
    +
    +
    $( ".selector" ).dialog({ modal: true });
    +
    + + +
    + Get or set the modal option, after init. +
    +
    +
    //getter
+var modal = $( ".selector" ).dialog( "option", "modal" );
+//setter
+$( ".selector" ).dialog( "option", "modal", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    position

    +
    +
    Type:
    +
    String, Array
    + +
    Default:
    +
    'center'
    + +
    +
    +
    +

    Specifies where the dialog should be displayed. Possible values:
    1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'.
    2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100])
    3) an array containing x,y position string values (e.g. ['right','top'] for top right corner).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the position option specified. +
    +
    +
    $( ".selector" ).dialog({ position: 'top' });
    +
    + + +
    + Get or set the position option, after init. +
    +
    +
    //getter
+var position = $( ".selector" ).dialog( "option", "position" );
+//setter
+$( ".selector" ).dialog( "option", "position", 'top' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    resizable

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to true, the dialog will be resizeable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the resizable option specified. +
    +
    +
    $( ".selector" ).dialog({ resizable: false });
    +
    + + +
    + Get or set the resizable option, after init. +
    +
    +
    //getter
+var resizable = $( ".selector" ).dialog( "option", "resizable" );
+//setter
+$( ".selector" ).dialog( "option", "resizable", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    show

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    The effect to be used when the dialog is opened.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the show option specified. +
    +
    +
    $( ".selector" ).dialog({ show: 'slide' });
    +
    + + +
    + Get or set the show option, after init. +
    +
    +
    //getter
+var show = $( ".selector" ).dialog( "option", "show" );
+//setter
+$( ".selector" ).dialog( "option", "show", 'slide' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    stack

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the stack option specified. +
    +
    +
    $( ".selector" ).dialog({ stack: false });
    +
    + + +
    + Get or set the stack option, after init. +
    +
    +
    //getter
+var stack = $( ".selector" ).dialog( "option", "stack" );
+//setter
+$( ".selector" ).dialog( "option", "stack", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    title

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the title attribute on the dialog source element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the title option specified. +
    +
    +
    $( ".selector" ).dialog({ title: 'Dialog Title' });
    +
    + + +
    + Get or set the title option, after init. +
    +
    +
    //getter
+var title = $( ".selector" ).dialog( "option", "title" );
+//setter
+$( ".selector" ).dialog( "option", "title", 'Dialog Title' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    width

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    300
    + +
    +
    +
    +

    The width of the dialog, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the width option specified. +
    +
    +
    $( ".selector" ).dialog({ width: 460 });
    +
    + + +
    + Get or set the width option, after init. +
    +
    +
    //getter
+var width = $( ".selector" ).dialog( "option", "width" );
+//setter
+$( ".selector" ).dialog( "option", "width", 460 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    zIndex

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1000
    + +
    +
    +
    +

    The starting z-index for the dialog.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the zIndex option specified. +
    +
    +
    $( ".selector" ).dialog({ zIndex: 3999 });
    +
    + + +
    + Get or set the zIndex option, after init. +
    +
    +
    //getter
+var zIndex = $( ".selector" ).dialog( "option", "zIndex" );
+//setter
+$( ".selector" ).dialog( "option", "zIndex", 3999 );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    beforeClose

    +
    +
    Type:
    +
    dialogbeforeclose
    +
    +
    +
    +

    This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the beforeClose event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   beforeClose: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the beforeClose event by type: dialogbeforeclose. +
    +
    +
    $( ".selector" ).bind( "dialogbeforeclose", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    open

    +
    +
    Type:
    +
    dialogopen
    +
    +
    +
    +

    This event is triggered when dialog is opened.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the open event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   open: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the open event by type: dialogopen. +
    +
    +
    $( ".selector" ).bind( "dialogopen", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    focus

    +
    +
    Type:
    +
    dialogfocus
    +
    +
    +
    +

    This event is triggered when the dialog gains focus.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the focus event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   focus: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the focus event by type: dialogfocus. +
    +
    +
    $( ".selector" ).bind( "dialogfocus", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    dragStart

    +
    +
    Type:
    +
    dialogdragstart
    +
    +
    +
    +

    This event is triggered at the beginning of the dialog being dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the dragStart event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   dragStart: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the dragStart event by type: dialogdragstart. +
    +
    +
    $( ".selector" ).bind( "dialogdragstart", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    drag

    +
    +
    Type:
    +
    dialogdrag
    +
    +
    +
    +

    This event is triggered when the dialog is dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the drag event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   drag: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the drag event by type: dialogdrag. +
    +
    +
    $( ".selector" ).bind( "dialogdrag", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    dragStop

    +
    +
    Type:
    +
    dialogdragstop
    +
    +
    +
    +

    This event is triggered after the dialog has been dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the dragStop event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   dragStop: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the dragStop event by type: dialogdragstop. +
    +
    +
    $( ".selector" ).bind( "dialogdragstop", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    resizeStart

    +
    +
    Type:
    +
    dialogresizestart
    +
    +
    +
    +

    This event is triggered at the beginning of the dialog being resized.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the resizeStart event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   resizeStart: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the resizeStart event by type: dialogresizestart. +
    +
    +
    $( ".selector" ).bind( "dialogresizestart", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    resize

    +
    +
    Type:
    +
    dialogresize
    +
    +
    +
    +

    This event is triggered when the dialog is resized. demo

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the resize event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   resize: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the resize event by type: dialogresize. +
    +
    +
    $( ".selector" ).bind( "dialogresize", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    resizeStop

    +
    +
    Type:
    +
    dialogresizestop
    +
    +
    +
    +

    This event is triggered after the dialog has been resized.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the resizeStop event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   resizeStop: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the resizeStop event by type: dialogresizestop. +
    +
    +
    $( ".selector" ).bind( "dialogresizestop", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    close

    +
    +
    Type:
    +
    dialogclose
    +
    +
    +
    +

    This event is triggered when the dialog is closed.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the close event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   close: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the close event by type: dialogclose. +
    +
    +
    $( ".selector" ).bind( "dialogclose", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .dialog( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the dialog functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .dialog( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the dialog.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .dialog( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the dialog.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .dialog( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any dialog option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .dialog( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple dialog options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .dialog( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-dialog element.

    +
    +
    • + + +
  • +
    +

    close

    +
    +
    Signature:
    +
    .dialog( "close" + + + + + + + +)
    +
    +
    +
    +

    Close the dialog.

    +
    +
    • + + +
  • +
    +

    isOpen

    +
    +
    Signature:
    +
    .dialog( "isOpen" + + + + + + + +)
    +
    +
    +
    +

    Returns true if the dialog is currently open.

    +
    +
    • + + +
  • +
    +

    moveToTop

    +
    +
    Signature:
    +
    .dialog( "moveToTop" + + + + + + + +)
    +
    +
    +
    +

    Move the dialog to the top of the dialogs stack.

    +
    +
    • + + +
  • +
    +

    open

    +
    +
    Signature:
    +
    .dialog( "open" + + + + + + + +)
    +
    +
    +
    +

    Open the dialog.

    +
    +
    • + +
+
+
+

Theming

+

The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.dialog.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
+   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
+      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
+      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
+   </div>
+   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
+      <p>Dialog content goes here.</p>
+   </div>
+</div>
+

+ + Note: This is a sample of markup generated by the dialog plugin, not markup you should use to create a dialog. The only markup needed for that is <div></div>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/draggable.html b/static/development-bundle/docs/draggable.html new file mode 100644 index 0000000..e910462 --- /dev/null +++ b/static/development-bundle/docs/draggable.html @@ -0,0 +1,1536 @@ + + +
+

jQuery UI Draggable

+
+

Overview

+
+

The jQuery UI Draggable plugin makes selected elements draggable by mouse.

+

Draggable elements gets a class of ui-draggable. During drag the element also gets a class of ui-draggable-dragging. If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.

+

All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

+
    +
  • ui.helper - the jQuery object representing the helper that's being dragged
    • +
  • ui.position - current position of the helper as { top, left } object, relative to the offset element
    • +
  • ui.offset - current absolute position of the helper as { top, left } object, relative to page
    • +
+


+

+

To manipulate the position of a draggable during drag, you can either use a wrapper as the draggable helper and position the wrapped element with absolute positioning, or you can correct internal values like so: $(this).data('draggable').offset.click.top -= x.

+
+
+

Dependencies

+
    +
  • UI Core
    • +
+
+
+

Example

+
+ +

+Initialize a draggable with default options.
+

+
$("#draggable").draggable();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <style type="text/css">
+    #draggable { width: 100px; height: 70px; background: silver; }
+  </style>
+  <script>
+  $(document).ready(function() {
+    $("#draggable").draggable();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="draggable">Drag me</div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the draggable. Can be set when initialising (first creating) the draggable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the disabled option specified. +
    +
    +
    $( ".selector" ).draggable({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).draggable( "option", "disabled" );
+//setter
+$( ".selector" ).draggable( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    addClasses

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to false, will prevent the ui-draggable class from being added. This may be desired as a performance optimization when calling .draggable() init on many hundreds of elements.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the addClasses option specified. +
    +
    +
    $( ".selector" ).draggable({ addClasses: false });
    +
    + + +
    + Get or set the addClasses option, after init. +
    +
    +
    //getter
+var addClasses = $( ".selector" ).draggable( "option", "addClasses" );
+//setter
+$( ".selector" ).draggable( "option", "addClasses", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    appendTo

    +
    +
    Type:
    +
    Element, Selector
    + +
    Default:
    +
    'parent'
    + +
    +
    +
    +

    The element passed to or selected by the appendTo option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the appendTo option specified. +
    +
    +
    $( ".selector" ).draggable({ appendTo: 'body' });
    +
    + + +
    + Get or set the appendTo option, after init. +
    +
    +
    //getter
+var appendTo = $( ".selector" ).draggable( "option", "appendTo" );
+//setter
+$( ".selector" ).draggable( "option", "appendTo", 'body' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    axis

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: 'x', 'y'.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the axis option specified. +
    +
    +
    $( ".selector" ).draggable({ axis: 'x' });
    +
    + + +
    + Get or set the axis option, after init. +
    +
    +
    //getter
+var axis = $( ".selector" ).draggable( "option", "axis" );
+//setter
+$( ".selector" ).draggable( "option", "axis", 'x' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    cancel

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    ':input,option'
    + +
    +
    +
    +

    Prevents dragging from starting on specified elements.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the cancel option specified. +
    +
    +
    $( ".selector" ).draggable({ cancel: 'button' });
    +
    + + +
    + Get or set the cancel option, after init. +
    +
    +
    //getter
+var cancel = $( ".selector" ).draggable( "option", "cancel" );
+//setter
+$( ".selector" ).draggable( "option", "cancel", 'button' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    connectToSortable

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Allows the draggable to be dropped onto the specified sortables. If this option is used (helper must be set to 'clone' in order to work flawlessly), a draggable can be dropped onto a sortable list and then becomes part of it. +

    Note: Specifying this option as an array of selectors has been removed.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the connectToSortable option specified. +
    +
    +
    $( ".selector" ).draggable({ connectToSortable: 'ul#myList' });
    +
    + + +
    + Get or set the connectToSortable option, after init. +
    +
    +
    //getter
+var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" );
+//setter
+$( ".selector" ).draggable( "option", "connectToSortable", 'ul#myList' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    containment

    +
    +
    Type:
    +
    Selector, Element, String, Array
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Constrains dragging to within the bounds of the specified element or region. Possible string values: 'parent', 'document', 'window', [x1, y1, x2, y2].

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the containment option specified. +
    +
    +
    $( ".selector" ).draggable({ containment: 'parent' });
    +
    + + +
    + Get or set the containment option, after init. +
    +
    +
    //getter
+var containment = $( ".selector" ).draggable( "option", "containment" );
+//setter
+$( ".selector" ).draggable( "option", "containment", 'parent' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    cursor

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'auto'
    + +
    +
    +
    +

    The css cursor during the drag operation.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the cursor option specified. +
    +
    +
    $( ".selector" ).draggable({ cursor: 'crosshair' });
    +
    + + +
    + Get or set the cursor option, after init. +
    +
    +
    //getter
+var cursor = $( ".selector" ).draggable( "option", "cursor" );
+//setter
+$( ".selector" ).draggable( "option", "cursor", 'crosshair' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    cursorAt

    +
    +
    Type:
    +
    Object
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the cursorAt option specified. +
    +
    +
    $( ".selector" ).draggable({ cursorAt: { left: 5 } });
    +
    + + +
    + Get or set the cursorAt option, after init. +
    +
    +
    //getter
+var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" );
+//setter
+$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } );
    +
    + +
    +
    +
    • + + +
  • +
    +

    delay

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the delay option specified. +
    +
    +
    $( ".selector" ).draggable({ delay: 500 });
    +
    + + +
    + Get or set the delay option, after init. +
    +
    +
    //getter
+var delay = $( ".selector" ).draggable( "option", "delay" );
+//setter
+$( ".selector" ).draggable( "option", "delay", 500 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    distance

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the distance option specified. +
    +
    +
    $( ".selector" ).draggable({ distance: 30 });
    +
    + + +
    + Get or set the distance option, after init. +
    +
    +
    //getter
+var distance = $( ".selector" ).draggable( "option", "distance" );
+//setter
+$( ".selector" ).draggable( "option", "distance", 30 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    grid

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Snaps the dragging helper to a grid, every x and y pixels. Array values: [x, y]

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the grid option specified. +
    +
    +
    $( ".selector" ).draggable({ grid: [50, 20] });
    +
    + + +
    + Get or set the grid option, after init. +
    +
    +
    //getter
+var grid = $( ".selector" ).draggable( "option", "grid" );
+//setter
+$( ".selector" ).draggable( "option", "grid", [50, 20] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    handle

    +
    +
    Type:
    +
    Element, Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If specified, restricts drag start click to the specified element(s).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the handle option specified. +
    +
    +
    $( ".selector" ).draggable({ handle: 'h2' });
    +
    + + +
    + Get or set the handle option, after init. +
    +
    +
    //getter
+var handle = $( ".selector" ).draggable( "option", "handle" );
+//setter
+$( ".selector" ).draggable( "option", "handle", 'h2' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    helper

    +
    +
    Type:
    +
    String, Function
    + +
    Default:
    +
    'original'
    + +
    +
    +
    +

    Allows for a helper element to be used for dragging display. Possible values: 'original', 'clone', Function. If a function is specified, it must return a DOMElement.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the helper option specified. +
    +
    +
    $( ".selector" ).draggable({ helper: 'clone' });
    +
    + + +
    + Get or set the helper option, after init. +
    +
    +
    //getter
+var helper = $( ".selector" ).draggable( "option", "helper" );
+//setter
+$( ".selector" ).draggable( "option", "helper", 'clone' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    iframeFix

    +
    +
    Type:
    +
    Boolean, Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Prevent iframes from capturing the mousemove events during a drag. Useful in combination with cursorAt, or in any case, if the mouse cursor is not over the helper. If set to true, transparent overlays will be placed over all iframes on the page. If a selector is supplied, the matched iframes will have an overlay placed over them.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the iframeFix option specified. +
    +
    +
    $( ".selector" ).draggable({ iframeFix: true });
    +
    + + +
    + Get or set the iframeFix option, after init. +
    +
    +
    //getter
+var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" );
+//setter
+$( ".selector" ).draggable( "option", "iframeFix", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    opacity

    +
    +
    Type:
    +
    Float
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Opacity for the helper while being dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the opacity option specified. +
    +
    +
    $( ".selector" ).draggable({ opacity: 0.35 });
    +
    + + +
    + Get or set the opacity option, after init. +
    +
    +
    //getter
+var opacity = $( ".selector" ).draggable( "option", "opacity" );
+//setter
+$( ".selector" ).draggable( "option", "opacity", 0.35 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    refreshPositions

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the refreshPositions option specified. +
    +
    +
    $( ".selector" ).draggable({ refreshPositions: true });
    +
    + + +
    + Get or set the refreshPositions option, after init. +
    +
    +
    //getter
+var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" );
+//setter
+$( ".selector" ).draggable( "option", "refreshPositions", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    revert

    +
    +
    Type:
    +
    Boolean, String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, the element will return to its start position when dragging stops. Possible string values: 'valid', 'invalid'. If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the revert option specified. +
    +
    +
    $( ".selector" ).draggable({ revert: true });
    +
    + + +
    + Get or set the revert option, after init. +
    +
    +
    //getter
+var revert = $( ".selector" ).draggable( "option", "revert" );
+//setter
+$( ".selector" ).draggable( "option", "revert", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    revertDuration

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    500
    + +
    +
    +
    +

    The duration of the revert animation, in milliseconds. Ignored if revert is false.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the revertDuration option specified. +
    +
    +
    $( ".selector" ).draggable({ revertDuration: 1000 });
    +
    + + +
    + Get or set the revertDuration option, after init. +
    +
    +
    //getter
+var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" );
+//setter
+$( ".selector" ).draggable( "option", "revertDuration", 1000 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    scope

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'default'
    + +
    +
    +
    +

    Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the scope option specified. +
    +
    +
    $( ".selector" ).draggable({ scope: 'tasks' });
    +
    + + +
    + Get or set the scope option, after init. +
    +
    +
    //getter
+var scope = $( ".selector" ).draggable( "option", "scope" );
+//setter
+$( ".selector" ).draggable( "option", "scope", 'tasks' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    scroll

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to true, container auto-scrolls while dragging.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the scroll option specified. +
    +
    +
    $( ".selector" ).draggable({ scroll: false });
    +
    + + +
    + Get or set the scroll option, after init. +
    +
    +
    //getter
+var scroll = $( ".selector" ).draggable( "option", "scroll" );
+//setter
+$( ".selector" ).draggable( "option", "scroll", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    scrollSensitivity

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    20
    + +
    +
    +
    +

    Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the scrollSensitivity option specified. +
    +
    +
    $( ".selector" ).draggable({ scrollSensitivity: 40 });
    +
    + + +
    + Get or set the scrollSensitivity option, after init. +
    +
    +
    //getter
+var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" );
+//setter
+$( ".selector" ).draggable( "option", "scrollSensitivity", 40 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    scrollSpeed

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    20
    + +
    +
    +
    +

    The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the scrollSpeed option specified. +
    +
    +
    $( ".selector" ).draggable({ scrollSpeed: 40 });
    +
    + + +
    + Get or set the scrollSpeed option, after init. +
    +
    +
    //getter
+var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" );
+//setter
+$( ".selector" ).draggable( "option", "scrollSpeed", 40 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    snap

    +
    +
    Type:
    +
    Boolean, Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to a selector or to true (equivalent to '.ui-draggable'), the draggable will snap to the edges of the selected elements when near an edge of the element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the snap option specified. +
    +
    +
    $( ".selector" ).draggable({ snap: true });
    +
    + + +
    + Get or set the snap option, after init. +
    +
    +
    //getter
+var snap = $( ".selector" ).draggable( "option", "snap" );
+//setter
+$( ".selector" ).draggable( "option", "snap", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    snapMode

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'both'
    + +
    +
    +
    +

    Determines which edges of snap elements the draggable will snap to. Ignored if snap is false. Possible values: 'inner', 'outer', 'both'

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the snapMode option specified. +
    +
    +
    $( ".selector" ).draggable({ snapMode: 'outer' });
    +
    + + +
    + Get or set the snapMode option, after init. +
    +
    +
    //getter
+var snapMode = $( ".selector" ).draggable( "option", "snapMode" );
+//setter
+$( ".selector" ).draggable( "option", "snapMode", 'outer' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    snapTolerance

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    20
    + +
    +
    +
    +

    The distance in pixels from the snap element edges at which snapping should occur. Ignored if snap is false.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the snapTolerance option specified. +
    +
    +
    $( ".selector" ).draggable({ snapTolerance: 40 });
    +
    + + +
    + Get or set the snapTolerance option, after init. +
    +
    +
    //getter
+var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );
+//setter
+$( ".selector" ).draggable( "option", "snapTolerance", 40 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    stack

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Controls the z-Index of the set of elements that match the selector, always brings to front the dragged item. Very useful in things like window managers.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the stack option specified. +
    +
    +
    $( ".selector" ).draggable({ stack: ".products" });
    +
    + + +
    + Get or set the stack option, after init. +
    +
    +
    //getter
+var stack = $( ".selector" ).draggable( "option", "stack" );
+//setter
+$( ".selector" ).draggable( "option", "stack", ".products" );
    +
    + +
    +
    +
    • + + +
  • +
    +

    zIndex

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    z-index for the helper while being dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the zIndex option specified. +
    +
    +
    $( ".selector" ).draggable({ zIndex: 2700 });
    +
    + + +
    + Get or set the zIndex option, after init. +
    +
    +
    //getter
+var zIndex = $( ".selector" ).draggable( "option", "zIndex" );
+//setter
+$( ".selector" ).draggable( "option", "zIndex", 2700 );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    start

    +
    +
    Type:
    +
    dragstart
    +
    +
    +
    +

    This event is triggered when dragging starts.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the start event as an init option. +
    +
    +
    $( ".selector" ).draggable({
+   start: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the start event by type: dragstart. +
    +
    +
    $( ".selector" ).bind( "dragstart", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    drag

    +
    +
    Type:
    +
    drag
    +
    +
    +
    +

    This event is triggered when the mouse is moved during the dragging.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the drag event as an init option. +
    +
    +
    $( ".selector" ).draggable({
+   drag: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the drag event by type: drag. +
    +
    +
    $( ".selector" ).bind( "drag", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    stop

    +
    +
    Type:
    +
    dragstop
    +
    +
    +
    +

    This event is triggered when dragging stops.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the stop event as an init option. +
    +
    +
    $( ".selector" ).draggable({
+   stop: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the stop event by type: dragstop. +
    +
    +
    $( ".selector" ).bind( "dragstop", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .draggable( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the draggable functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .draggable( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the draggable.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .draggable( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the draggable.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .draggable( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any draggable option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .draggable( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple draggable options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .draggable( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-draggable element.

    +
    +
    • + + +
+
+
+

Theming

+

The jQuery UI Draggable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.draggable.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-draggable"></div> +

+ + Note: This is a sample of markup generated by the draggable plugin, not markup you should use to create a draggable. The only markup needed for that is <div></div>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/droppable.html b/static/development-bundle/docs/droppable.html new file mode 100644 index 0000000..65dd250 --- /dev/null +++ b/static/development-bundle/docs/droppable.html @@ -0,0 +1,788 @@ + + +
+

jQuery UI Droppable

+
+

Overview

+
+

The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.

+

All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

+
    +
  • ui.draggable - current draggable element, a jQuery object.
    • +
  • ui.helper - current draggable helper, a jQuery object
    • +
  • ui.position - current position of the draggable helper { top: , left: }
    • +
  • ui.offset - current absolute position of the draggable helper { top: , left: }
    • +
+
+
+

Dependencies

+ +
+
+

Example

+
+ +

+Makes the div droppable (a drop target for a draggable).
+

+
$("#draggable").draggable();
+    $("#droppable").droppable({
+      drop: function() { alert('dropped'); }
+    });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <style type="text/css">
+    #draggable { width: 75px; height: 25px; background: silver; padding: 10px; }
+    #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; }
+  </style>
+  <script>
+  $(document).ready(function() {
+    $("#draggable").draggable();
+    $("#droppable").droppable({
+      drop: function() { alert('dropped'); }
+    });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="droppable">Drop here</div>
+<div id="draggable">Drag me</div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the droppable. Can be set when initialising (first creating) the droppable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the disabled option specified. +
    +
    +
    $( ".selector" ).droppable({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).droppable( "option", "disabled" );
+//setter
+$( ".selector" ).droppable( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    accept

    +
    +
    Type:
    +
    Selector, Function
    + +
    Default:
    +
    '*'
    + +
    +
    +
    +

    All draggables that match the selector will be accepted. If a function is specified, the function will be called for each draggable on the page (passed as the first argument to the function), to provide a custom filter. The function should return true if the draggable should be accepted.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the accept option specified. +
    +
    +
    $( ".selector" ).droppable({ accept: '.special' });
    +
    + + +
    + Get or set the accept option, after init. +
    +
    +
    //getter
+var accept = $( ".selector" ).droppable( "option", "accept" );
+//setter
+$( ".selector" ).droppable( "option", "accept", '.special' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    activeClass

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If specified, the class will be added to the droppable while an acceptable draggable is being dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the activeClass option specified. +
    +
    +
    $( ".selector" ).droppable({ activeClass: 'ui-state-highlight' });
    +
    + + +
    + Get or set the activeClass option, after init. +
    +
    +
    //getter
+var activeClass = $( ".selector" ).droppable( "option", "activeClass" );
+//setter
+$( ".selector" ).droppable( "option", "activeClass", 'ui-state-highlight' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    addClasses

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on many hundreds of elements.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the addClasses option specified. +
    +
    +
    $( ".selector" ).droppable({ addClasses: false });
    +
    + + +
    + Get or set the addClasses option, after init. +
    +
    +
    //getter
+var addClasses = $( ".selector" ).droppable( "option", "addClasses" );
+//setter
+$( ".selector" ).droppable( "option", "addClasses", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    greedy

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If true, will prevent event propagation on nested droppables.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the greedy option specified. +
    +
    +
    $( ".selector" ).droppable({ greedy: true });
    +
    + + +
    + Get or set the greedy option, after init. +
    +
    +
    //getter
+var greedy = $( ".selector" ).droppable( "option", "greedy" );
+//setter
+$( ".selector" ).droppable( "option", "greedy", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    hoverClass

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If specified, the class will be added to the droppable while an acceptable draggable is being hovered.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the hoverClass option specified. +
    +
    +
    $( ".selector" ).droppable({ hoverClass: 'drophover' });
    +
    + + +
    + Get or set the hoverClass option, after init. +
    +
    +
    //getter
+var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
+//setter
+$( ".selector" ).droppable( "option", "hoverClass", 'drophover' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    scope

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'default'
    + +
    +
    +
    +

    Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the scope option specified. +
    +
    +
    $( ".selector" ).droppable({ scope: 'tasks' });
    +
    + + +
    + Get or set the scope option, after init. +
    +
    +
    //getter
+var scope = $( ".selector" ).droppable( "option", "scope" );
+//setter
+$( ".selector" ).droppable( "option", "scope", 'tasks' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    tolerance

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'intersect'
    + +
    +
    +
    +

    Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'. +

    +
      +
    • fit: draggable overlaps the droppable entirely
      • +
    • intersect: draggable overlaps the droppable at least 50%
      • +
    • pointer: mouse pointer overlaps the droppable
      • +
    • touch: draggable overlaps the droppable any amount
      • +
    +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the tolerance option specified. +
    +
    +
    $( ".selector" ).droppable({ tolerance: 'fit' });
    +
    + + +
    + Get or set the tolerance option, after init. +
    +
    +
    //getter
+var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
+//setter
+$( ".selector" ).droppable( "option", "tolerance", 'fit' );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    activate

    +
    +
    Type:
    +
    dropactivate
    +
    +
    +
    +

    This event is triggered any time an accepted draggable starts dragging. This can be useful if you want to make the droppable 'light up' when it can be dropped on.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the activate event as an init option. +
    +
    +
    $( ".selector" ).droppable({
+   activate: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the activate event by type: dropactivate. +
    +
    +
    $( ".selector" ).bind( "dropactivate", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    deactivate

    +
    +
    Type:
    +
    dropdeactivate
    +
    +
    +
    +

    This event is triggered any time an accepted draggable stops dragging.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the deactivate event as an init option. +
    +
    +
    $( ".selector" ).droppable({
+   deactivate: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the deactivate event by type: dropdeactivate. +
    +
    +
    $( ".selector" ).bind( "dropdeactivate", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    over

    +
    +
    Type:
    +
    dropover
    +
    +
    +
    +

    This event is triggered as an accepted draggable is dragged 'over' (within the tolerance of) this droppable.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the over event as an init option. +
    +
    +
    $( ".selector" ).droppable({
+   over: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the over event by type: dropover. +
    +
    +
    $( ".selector" ).bind( "dropover", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    out

    +
    +
    Type:
    +
    dropout
    +
    +
    +
    +

    This event is triggered when an accepted draggable is dragged out (within the tolerance of) this droppable.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the out event as an init option. +
    +
    +
    $( ".selector" ).droppable({
+   out: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the out event by type: dropout. +
    +
    +
    $( ".selector" ).bind( "dropout", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    drop

    +
    +
    Type:
    +
    drop
    +
    +
    +
    +

    This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on. +ui.draggable represents the draggable.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the drop event as an init option. +
    +
    +
    $( ".selector" ).droppable({
+   drop: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the drop event by type: drop. +
    +
    +
    $( ".selector" ).bind( "drop", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .droppable( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the droppable functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .droppable( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the droppable.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .droppable( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the droppable.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .droppable( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any droppable option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .droppable( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple droppable options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .droppable( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-droppable element.

    +
    +
    • + + +
+
+
+

Theming

+

The jQuery UI Droppable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.droppable.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-droppable"></div> +

+ + Note: This is a sample of markup generated by the droppable plugin, not markup you should use to create a droppable. The only markup needed for that is <div></div>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/effect.html b/static/development-bundle/docs/effect.html new file mode 100644 index 0000000..038c0d3 --- /dev/null +++ b/static/development-bundle/docs/effect.html @@ -0,0 +1,143 @@ + + +
+

jQuery UI effect

+
+

Overview

+
+
[edit]

effect( effect, [options], [speed], [callback] )

+

Uses a specific effect on an element (without the show/hide logic).

+
+
+

Dependencies

+
    +
  • Effects Core
    • +
+
+
+

Example

+
+ +

+Apply the effect explode if you click on the element.
+

+
$("p").click(function () {
+      $("div").effect("explode");
+    });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
+<script src="http://ui.jquery.com/latest/ui/effects.explode.js"></script>
+<style type="text/css">
+  div { margin: 0 auto; width: 100px; height: 80px; background: blue; position: relative; }
+</style>
+  <script>
+  $(document).ready(function() {
+    $("p").click(function () {
+      $("div").effect("explode");
+    });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<p>Click me</p><div></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Arguments

+
    + +
  • +
    +

    effect

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    The effect to be used. Possible values: 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'.

    +
    +
    • + + +
  • +
    +

    options

    +
    +
    Type:
    +
    Hash
    + +
    Optional
    + +
    +
    +
    +

    A object/hash including specific options for the effect.

    +
    +
    • + + +
  • +
    +

    speed

    +
    +
    Type:
    +
    String, Number
    + +
    Optional
    + +
    +
    +
    +

    A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    +
    +
    • + + +
  • +
    +

    callback

    +
    +
    Type:
    +
    Function
    + +
    Optional
    + +
    +
    +
    +

    A function that is called after the effect is completed.

    +
    +
    • + +
+
+
+ +

+ + diff --git a/static/development-bundle/docs/hide.html b/static/development-bundle/docs/hide.html new file mode 100644 index 0000000..35293a1 --- /dev/null +++ b/static/development-bundle/docs/hide.html @@ -0,0 +1,144 @@ + + +
+

jQuery UI hide

+
+

Overview

+
+
[edit]

hide( effect, [options], [speed], [callback] )

+

The enhanced hide method optionally accepts jQuery UI advanced effects.

+

Uses a specific effect on an element to hide the element if the first argument is an effect string.

+
+
+

Dependencies

+
    +
  • Effects Core
    • +
+
+
+

Example

+
+ +

+Apply the effect slide if you click on the p to hide a div.
+

+
$("p").click(function () {
+      $("div").hide("slide", {}, 1000);
+    });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
+<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
+<style type="text/css">
+  div { margin: 0px; width: 100px; height: 80px; background: blue; position: relative; }
+</style>
+  <script>
+  $(document).ready(function() {
+    $("p").click(function () {
+      $("div").hide("slide", {}, 1000);
+    });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<p>Click me</p><div></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Arguments

+
    + +
  • +
    +

    effect

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.

    +
    +
    • + + +
  • +
    +

    options

    +
    +
    Type:
    +
    Hash
    + +
    Optional
    + +
    +
    +
    +

    A object/hash including specific options for the effect.

    +
    +
    • + + +
  • +
    +

    speed

    +
    +
    Type:
    +
    String, Number
    + +
    Optional
    + +
    +
    +
    +

    A string representing one of the predefined speeds ("slow" or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    +
    +
    • + + +
  • +
    +

    callback

    +
    +
    Type:
    +
    Function
    + +
    Optional
    + +
    +
    +
    +

    A function that is called after the effect is completed.

    +
    +
    • + +
+
+
+ +

+ + diff --git a/static/development-bundle/docs/position.html b/static/development-bundle/docs/position.html new file mode 100644 index 0000000..c5f1d8c --- /dev/null +++ b/static/development-bundle/docs/position.html @@ -0,0 +1,227 @@ + + +
+

jQuery UI Position Utility

+
+

Overview

+
+

Utility script for positioning any widget relative to the window, document, a particular element, or the cursor/mouse.

+

Note: jQuery UI does not support positioning hidden elements.

+

Does not need ui.core.js or effects.core.js.

+
+
+

Dependencies

+
    +
  • none (only jQuery core)
    • +
+
+
+

Example

+
+ +

+Clicking on the green element transfers to the other.
+

+
+$("#position1").position({
+  my: "center",
+  at: "center",
+  of: "#targetElement"
+});
+$("#position2").position({
+  my: "left top",
+  at: "left top",
+  of: "#targetElement"
+});
+$("#position3").position({
+  my: "right center",
+  at: "right bottom",
+  of: "#targetElement"
+});
+$(document).mousemove(function(ev){
+  $("#position4").position({
+    my: "left bottom",
+    of: ev,
+    offset: "3 -3",
+    collision: "fit"
+  });
+});
+
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <style type="text/css">
+#targetElement { width:240px;height:200px;background-color:#999;margin:30px auto; }
+.positionDiv { width:50px;height:50px;opacity:0.6; }
+#position1 {background-color:#F00;}
+#position2 {background-color:#0F0;}
+#position3 {background-color:#00F;}
+#position4 {background-color:#FF0;}
+</style>
+
+  <script>
+  $(document).ready(function() {
+    
+$("#position1").position({
+  my: "center",
+  at: "center",
+  of: "#targetElement"
+});
+$("#position2").position({
+  my: "left top",
+  at: "left top",
+  of: "#targetElement"
+});
+$("#position3").position({
+  my: "right center",
+  at: "right bottom",
+  of: "#targetElement"
+});
+$(document).mousemove(function(ev){
+  $("#position4").position({
+    my: "left bottom",
+    of: ev,
+    offset: "3 -3",
+    collision: "fit"
+  });
+});
+
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="targetElement">
+  <div class="positionDiv" id="position1"></div>
+  <div class="positionDiv" id="position2"></div>
+  <div class="positionDiv" id="position3"></div>
+  <div class="positionDiv" id="position4"></div>
+</div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Arguments

+
    + +
  • +
    +

    my

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"

    +
    +
    • + + +
  • +
    +

    at

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"

    +
    +
    • + + +
  • +
    +

    of

    +
    +
    Type:
    +
    Selector, Element, jQuery, Event
    + +
    +
    +
    +

    Element to position against. If you provide a selector, the first matching element will be used. If you provide a jQuery object, the first element will be used. If you provide an event object, the pageX and pageY properties will be used. Example: "#top-menu"

    +
    +
    • + + +
  • +
    +

    offset

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    Add these left-top values to the calculated position, eg. "50 50" (left top) A single value such as "50" will apply to both.

    +
    +
    • + + +
  • +
    +

    collision

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    When the positioned element overflows the window in some direction, move it to an alternative position. Similar to my and at, this accepts a single value or a pair for horizontal/vertical, eg. "flip", "fit", "fit flip", "fit none". +

    +
    • flip: to the opposite side and the collision detection is run again to see if it will fit. If it won't fit in either position, the center option should be used as a fall back. +
    • fit: so the element keeps in the desired direction, but is re-positioned so it fits. +
    • none: not do collision detection. +
    +

    +
    +
    • + + +
  • +
    +

    using

    +
    +
    Type:
    +
    Function
    + +
    +
    +
    +

    When specified the actual property setting is delegated to this callback. Receives a single parameter which is a hash of top and left values for the position that should be set.

    +
    +
    • + +
+
+
+ +

+ + diff --git a/static/development-bundle/docs/progressbar.html b/static/development-bundle/docs/progressbar.html new file mode 100644 index 0000000..4b5fec7 --- /dev/null +++ b/static/development-bundle/docs/progressbar.html @@ -0,0 +1,420 @@ + + +
+

jQuery UI Progressbar

+
+

Overview

+
+

+The progress bar is designed to simply display the current % complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's parent container by default. +

+

+This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status complete. A determinate progress bar should never fill from left to right, then loop back to empty for a single process -- if the actual percent complete status cannot be calculated, an indeterminate progress bar (coming soon) or spinner animation is a better way to provide user feedback. +

+
+
+

Dependencies

+
    +
  • UI Core
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Progressbar.
+

+
$("#progressbar").progressbar({ value: 37 });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#progressbar").progressbar({ value: 37 });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="progressbar"></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the progressbar. Can be set when initialising (first creating) the progressbar.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a progressbar with the disabled option specified. +
    +
    +
    $( ".selector" ).progressbar({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).progressbar( "option", "disabled" );
+//setter
+$( ".selector" ).progressbar( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    value

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    The value of the progressbar.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a progressbar with the value option specified. +
    +
    +
    $( ".selector" ).progressbar({ value: 37 });
    +
    + + +
    + Get or set the value option, after init. +
    +
    +
    //getter
+var value = $( ".selector" ).progressbar( "option", "value" );
+//setter
+$( ".selector" ).progressbar( "option", "value", 37 );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    change

    +
    +
    Type:
    +
    progressbarchange
    +
    +
    +
    +

    This event is triggered when the value of the progressbar changes.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the change event as an init option. +
    +
    +
    $( ".selector" ).progressbar({
+   change: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the change event by type: progressbarchange. +
    +
    +
    $( ".selector" ).bind( "progressbarchange", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    complete

    +
    +
    Type:
    +
    progressbarcomplete
    +
    +
    +
    +

    This event is triggered when the value of the progressbar reaches the maximum value of 100.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the complete event as an init option. +
    +
    +
    $( ".selector" ).progressbar({
+   complete: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the complete event by type: progressbarcomplete. +
    +
    +
    $( ".selector" ).bind( "progressbarcomplete", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .progressbar( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the progressbar functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .progressbar( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the progressbar.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .progressbar( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the progressbar.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .progressbar( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any progressbar option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .progressbar( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple progressbar options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .progressbar( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-progressbar element.

    +
    +
    • + + +
  • +
    +

    value

    +
    +
    Signature:
    +
    .progressbar( "value" + +, [value] + + + + + +)
    +
    +
    +
    +

    This method gets or sets the current value of the progressbar.

    +
    +
    • + +
+
+
+

Theming

+

The jQuery UI Progressbar plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.progressbar.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
+    <div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
+ </div> +

+ + Note: This is a sample of markup generated by the progressbar plugin, not markup you should use to create a progressbar. The only markup needed for that is <div></div>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/removeClass.html b/static/development-bundle/docs/removeClass.html new file mode 100644 index 0000000..40789be --- /dev/null +++ b/static/development-bundle/docs/removeClass.html @@ -0,0 +1,113 @@ + + +
+

jQuery UI removeClass

+
+

Overview

+
+
[edit]

removeClass( [class], [duration] )

+

Removes all or specified class from each of the set of matched elements with an optional transition between the states.

+
+
+

Dependencies

+
    +
  • Effects Core
    • +
+
+
+

Example

+
+ +

+Removes the class 'selected' from the matched elements with a one second transition.
+

+
$("p").click(function () {
+      $(this).removeClass("selected", 1000);
+    });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
+<style type="text/css">
+  p { cursor: pointer; font-size: 1.2em; }
+  .selected { color:red; }
+</style>
+  <script>
+  $(document).ready(function() {
+    $("p").click(function () {
+      $(this).removeClass("selected", 1000);
+    });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<p class="selected">Click me to remove 'selected' class.</p>
+<p class="selected">Click me to remove 'selected' class.</p>
+<p class="selected">Click me to remove 'selected' class.</p>
+
+</body>
+</html>
+
+

+

+
+
+
+

Arguments

+
    + +
  • +
    +

    class

    +
    +
    Type:
    +
    String
    + +
    Optional
    + +
    +
    +
    +

    CSS classes to remove from the elements.

    +
    +
    • + + +
  • +
    +

    duration

    +
    +
    Type:
    +
    String, Number
    + +
    Optional
    + +
    +
    +
    +

    A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    +
    +
    • + +
+
+
+ +

+ + diff --git a/static/development-bundle/docs/resizable.html b/static/development-bundle/docs/resizable.html new file mode 100644 index 0000000..9b0ef0d --- /dev/null +++ b/static/development-bundle/docs/resizable.html @@ -0,0 +1,1160 @@ + + +
+

jQuery UI Resizable

+
+

Overview

+
+

The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height.

+

All callbacks (start,stop,resize) receive two arguments: The original browser event and a prepared ui object. The ui object has the following fields:

+
    +
  • ui.helper - a jQuery object containing the helper element
    • +
  • ui.originalPosition - {top, left} before resizing started
    • +
  • ui.originalSize - {width, height} before resizing started
    • +
  • ui.position - {top, left} current position
    • +
  • ui.size - {width, height} current size
    • +
+
+
+

Dependencies

+
    +
  • UI Core
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Resizable.
+

+
$("#resizable").resizable();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <style type="text/css">
+    #resizable { width: 100px; height: 100px; background: silver; }
+  </style>
+  <script>
+  $(document).ready(function() {
+    $("#resizable").resizable();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="resizable"></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the resizable. Can be set when initialising (first creating) the resizable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the disabled option specified. +
    +
    +
    $( ".selector" ).resizable({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).resizable( "option", "disabled" );
+//setter
+$( ".selector" ).resizable( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    alsoResize

    +
    +
    Type:
    +
    Selector, jQuery, Element
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Resize these elements synchronous when resizing.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the alsoResize option specified. +
    +
    +
    $( ".selector" ).resizable({ alsoResize: '.other' });
    +
    + + +
    + Get or set the alsoResize option, after init. +
    +
    +
    //getter
+var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
+//setter
+$( ".selector" ).resizable( "option", "alsoResize", '.other' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    animate

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Animates to the final size after resizing.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the animate option specified. +
    +
    +
    $( ".selector" ).resizable({ animate: true });
    +
    + + +
    + Get or set the animate option, after init. +
    +
    +
    //getter
+var animate = $( ".selector" ).resizable( "option", "animate" );
+//setter
+$( ".selector" ).resizable( "option", "animate", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    animateDuration

    +
    +
    Type:
    +
    Integer, String
    + +
    Default:
    +
    'slow'
    + +
    +
    +
    +

    Duration time for animating, in milliseconds. Other possible values: 'slow', 'normal', 'fast'.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the animateDuration option specified. +
    +
    +
    $( ".selector" ).resizable({ animateDuration: 500 });
    +
    + + +
    + Get or set the animateDuration option, after init. +
    +
    +
    //getter
+var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
+//setter
+$( ".selector" ).resizable( "option", "animateDuration", 500 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    animateEasing

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'swing'
    + +
    +
    +
    +

    Easing effect for animating.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the animateEasing option specified. +
    +
    +
    $( ".selector" ).resizable({ animateEasing: 'swing' });
    +
    + + +
    + Get or set the animateEasing option, after init. +
    +
    +
    //getter
+var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
+//setter
+$( ".selector" ).resizable( "option", "animateEasing", 'swing' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    aspectRatio

    +
    +
    Type:
    +
    Boolean, Float
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, resizing is constrained by the original aspect ratio. Otherwise a custom aspect ratio can be specified, such as 9 / 16, or 0.5.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the aspectRatio option specified. +
    +
    +
    $( ".selector" ).resizable({ aspectRatio: .75 });
    +
    + + +
    + Get or set the aspectRatio option, after init. +
    +
    +
    //getter
+var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
+//setter
+$( ".selector" ).resizable( "option", "aspectRatio", .75 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    autoHide

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, automatically hides the handles except when the mouse hovers over the element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the autoHide option specified. +
    +
    +
    $( ".selector" ).resizable({ autoHide: true });
    +
    + + +
    + Get or set the autoHide option, after init. +
    +
    +
    //getter
+var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
+//setter
+$( ".selector" ).resizable( "option", "autoHide", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    cancel

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    ':input,option'
    + +
    +
    +
    +

    Prevents resizing if you start on elements matching the selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the cancel option specified. +
    +
    +
    $( ".selector" ).resizable({ cancel: ':input,option' });
    +
    + + +
    + Get or set the cancel option, after init. +
    +
    +
    //getter
+var cancel = $( ".selector" ).resizable( "option", "cancel" );
+//setter
+$( ".selector" ).resizable( "option", "cancel", ':input,option' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    containment

    +
    +
    Type:
    +
    String, Element, Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document', a DOMElement, or a Selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the containment option specified. +
    +
    +
    $( ".selector" ).resizable({ containment: 'parent' });
    +
    + + +
    + Get or set the containment option, after init. +
    +
    +
    //getter
+var containment = $( ".selector" ).resizable( "option", "containment" );
+//setter
+$( ".selector" ).resizable( "option", "containment", 'parent' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    delay

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Tolerance, in milliseconds, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond duration. This can help prevent unintended resizing when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the delay option specified. +
    +
    +
    $( ".selector" ).resizable({ delay: 20 });
    +
    + + +
    + Get or set the delay option, after init. +
    +
    +
    //getter
+var delay = $( ".selector" ).resizable( "option", "delay" );
+//setter
+$( ".selector" ).resizable( "option", "delay", 20 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    distance

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. This can help prevent unintended resizing when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the distance option specified. +
    +
    +
    $( ".selector" ).resizable({ distance: 20 });
    +
    + + +
    + Get or set the distance option, after init. +
    +
    +
    //getter
+var distance = $( ".selector" ).resizable( "option", "distance" );
+//setter
+$( ".selector" ).resizable( "option", "distance", 20 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    ghost

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, a semi-transparent helper element is shown for resizing.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the ghost option specified. +
    +
    +
    $( ".selector" ).resizable({ ghost: true });
    +
    + + +
    + Get or set the ghost option, after init. +
    +
    +
    //getter
+var ghost = $( ".selector" ).resizable( "option", "ghost" );
+//setter
+$( ".selector" ).resizable( "option", "ghost", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    grid

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Snaps the resizing element to a grid, every x and y pixels. Array values: [x, y]

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the grid option specified. +
    +
    +
    $( ".selector" ).resizable({ grid: [50, 50] });
    +
    + + +
    + Get or set the grid option, after init. +
    +
    +
    //getter
+var grid = $( ".selector" ).resizable( "option", "grid" );
+//setter
+$( ".selector" ).resizable( "option", "grid", [50, 50] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    handles

    +
    +
    Type:
    +
    String, Object
    + +
    Default:
    +
    'e, s, se'
    + +
    +
    +
    +

    If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, ne, se, sw, nw, all'. The necessary handles will be auto-generated by the plugin. +

    If specified as an object, the following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the handles option specified. +
    +
    +
    $( ".selector" ).resizable({ handles: 'n, e, s, w' });
    +
    + + +
    + Get or set the handles option, after init. +
    +
    +
    //getter
+var handles = $( ".selector" ).resizable( "option", "handles" );
+//setter
+$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    helper

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    This is the css class that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the helper option specified. +
    +
    +
    $( ".selector" ).resizable({ helper: 'ui-state-highlight' });
    +
    + + +
    + Get or set the helper option, after init. +
    +
    +
    //getter
+var helper = $( ".selector" ).resizable( "option", "helper" );
+//setter
+$( ".selector" ).resizable( "option", "helper", 'ui-state-highlight' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    maxHeight

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    This is the maximum height the resizable should be allowed to resize to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the maxHeight option specified. +
    +
    +
    $( ".selector" ).resizable({ maxHeight: 300 });
    +
    + + +
    + Get or set the maxHeight option, after init. +
    +
    +
    //getter
+var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
+//setter
+$( ".selector" ).resizable( "option", "maxHeight", 300 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    maxWidth

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    This is the maximum width the resizable should be allowed to resize to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the maxWidth option specified. +
    +
    +
    $( ".selector" ).resizable({ maxWidth: 250 });
    +
    + + +
    + Get or set the maxWidth option, after init. +
    +
    +
    //getter
+var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
+//setter
+$( ".selector" ).resizable( "option", "maxWidth", 250 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    minHeight

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    10
    + +
    +
    +
    +

    This is the minimum height the resizable should be allowed to resize to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the minHeight option specified. +
    +
    +
    $( ".selector" ).resizable({ minHeight: 150 });
    +
    + + +
    + Get or set the minHeight option, after init. +
    +
    +
    //getter
+var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
+//setter
+$( ".selector" ).resizable( "option", "minHeight", 150 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    minWidth

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    10
    + +
    +
    +
    +

    This is the minimum width the resizable should be allowed to resize to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the minWidth option specified. +
    +
    +
    $( ".selector" ).resizable({ minWidth: 75 });
    +
    + + +
    + Get or set the minWidth option, after init. +
    +
    +
    //getter
+var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
+//setter
+$( ".selector" ).resizable( "option", "minWidth", 75 );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    start

    +
    +
    Type:
    +
    resizestart
    +
    +
    +
    +

    This event is triggered at the start of a resize operation.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the start event as an init option. +
    +
    +
    $( ".selector" ).resizable({
+   start: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the start event by type: resizestart. +
    +
    +
    $( ".selector" ).bind( "resizestart", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    resize

    +
    +
    Type:
    +
    resize
    +
    +
    +
    +

    This event is triggered during the resize, on the drag of the resize handler.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the resize event as an init option. +
    +
    +
    $( ".selector" ).resizable({
+   resize: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the resize event by type: resize. +
    +
    +
    $( ".selector" ).bind( "resize", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    stop

    +
    +
    Type:
    +
    resizestop
    +
    +
    +
    +

    This event is triggered at the end of a resize operation.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the stop event as an init option. +
    +
    +
    $( ".selector" ).resizable({
+   stop: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the stop event by type: resizestop. +
    +
    +
    $( ".selector" ).bind( "resizestop", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .resizable( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the resizable functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .resizable( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the resizable.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .resizable( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the resizable.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .resizable( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any resizable option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .resizable( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple resizable options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .resizable( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-resizable element.

    +
    +
    • + + +
+
+
+

Theming

+

The jQuery UI Resizable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.resizable.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-resizable">
+   <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
+   <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
+   <div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
+</div> +

+ + Note: This is a sample of markup generated by the resizable plugin, not markup you should use to create a resizable. The only markup needed for that is <div></div>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/selectable.html b/static/development-bundle/docs/selectable.html new file mode 100644 index 0000000..aea3d2f --- /dev/null +++ b/static/development-bundle/docs/selectable.html @@ -0,0 +1,807 @@ + + +
+

jQuery UI Selectable

+
+

Overview

+
+

The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.

+
+
+

Dependencies

+
    +
  • UI Core
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Selectable.
+

+
$("#selectable").selectable();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <style type="text/css">
+#selectable .ui-selecting {
+	background: silver;
+}
+#selectable .ui-selected {
+	background: gray;
+}
+</style>
+
+  <script>
+  $(document).ready(function() {
+    $("#selectable").selectable();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<ul id="selectable">
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+<li>Item 4</li>
+<li>Item 5</li>
+</ul>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the selectable. Can be set when initialising (first creating) the selectable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the disabled option specified. +
    +
    +
    $( ".selector" ).selectable({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).selectable( "option", "disabled" );
+//setter
+$( ".selector" ).selectable( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    autoRefresh

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many many items, you may want to set this to false and call the refresh method manually.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the autoRefresh option specified. +
    +
    +
    $( ".selector" ).selectable({ autoRefresh: false });
    +
    + + +
    + Get or set the autoRefresh option, after init. +
    +
    +
    //getter
+var autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" );
+//setter
+$( ".selector" ).selectable( "option", "autoRefresh", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    cancel

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    ':input,option'
    + +
    +
    +
    +

    Prevents selecting if you start on elements matching the selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the cancel option specified. +
    +
    +
    $( ".selector" ).selectable({ cancel: ':input,option' });
    +
    + + +
    + Get or set the cancel option, after init. +
    +
    +
    //getter
+var cancel = $( ".selector" ).selectable( "option", "cancel" );
+//setter
+$( ".selector" ).selectable( "option", "cancel", ':input,option' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    delay

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Time in milliseconds to define when the selecting should start. It helps preventing unwanted selections when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the delay option specified. +
    +
    +
    $( ".selector" ).selectable({ delay: 20 });
    +
    + + +
    + Get or set the delay option, after init. +
    +
    +
    //getter
+var delay = $( ".selector" ).selectable( "option", "delay" );
+//setter
+$( ".selector" ).selectable( "option", "delay", 20 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    distance

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until after mouse is dragged beyond distance.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the distance option specified. +
    +
    +
    $( ".selector" ).selectable({ distance: 20 });
    +
    + + +
    + Get or set the distance option, after init. +
    +
    +
    //getter
+var distance = $( ".selector" ).selectable( "option", "distance" );
+//setter
+$( ".selector" ).selectable( "option", "distance", 20 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    filter

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    '*'
    + +
    +
    +
    +

    The matching child elements will be made selectees (able to be selected).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the filter option specified. +
    +
    +
    $( ".selector" ).selectable({ filter: 'li' });
    +
    + + +
    + Get or set the filter option, after init. +
    +
    +
    //getter
+var filter = $( ".selector" ).selectable( "option", "filter" );
+//setter
+$( ".selector" ).selectable( "option", "filter", 'li' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    tolerance

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'touch'
    + +
    +
    +
    +

    Possible values: 'touch', 'fit'. +

    +
      +
    • fit: draggable overlaps the droppable entirely
      • +
    • touch: draggable overlaps the droppable any amount
      • +
    +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the tolerance option specified. +
    +
    +
    $( ".selector" ).selectable({ tolerance: 'fit' });
    +
    + + +
    + Get or set the tolerance option, after init. +
    +
    +
    //getter
+var tolerance = $( ".selector" ).selectable( "option", "tolerance" );
+//setter
+$( ".selector" ).selectable( "option", "tolerance", 'fit' );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    selected

    +
    +
    Type:
    +
    selectableselected
    +
    +
    +
    +

    This event is triggered at the end of the select operation, on each element added to the selection.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the selected event as an init option. +
    +
    +
    $( ".selector" ).selectable({
+   selected: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the selected event by type: selectableselected. +
    +
    +
    $( ".selector" ).bind( "selectableselected", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    selecting

    +
    +
    Type:
    +
    selectableselecting
    +
    +
    +
    +

    This event is triggered during the select operation, on each element added to the selection.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the selecting event as an init option. +
    +
    +
    $( ".selector" ).selectable({
+   selecting: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the selecting event by type: selectableselecting. +
    +
    +
    $( ".selector" ).bind( "selectableselecting", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    start

    +
    +
    Type:
    +
    selectablestart
    +
    +
    +
    +

    This event is triggered at the beginning of the select operation.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the start event as an init option. +
    +
    +
    $( ".selector" ).selectable({
+   start: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the start event by type: selectablestart. +
    +
    +
    $( ".selector" ).bind( "selectablestart", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    stop

    +
    +
    Type:
    +
    selectablestop
    +
    +
    +
    +

    This event is triggered at the end of the select operation.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the stop event as an init option. +
    +
    +
    $( ".selector" ).selectable({
+   stop: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the stop event by type: selectablestop. +
    +
    +
    $( ".selector" ).bind( "selectablestop", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    unselected

    +
    +
    Type:
    +
    selectableunselected
    +
    +
    +
    +

    This event is triggered at the end of the select operation, on each element removed from the selection.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the unselected event as an init option. +
    +
    +
    $( ".selector" ).selectable({
+   unselected: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the unselected event by type: selectableunselected. +
    +
    +
    $( ".selector" ).bind( "selectableunselected", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    unselecting

    +
    +
    Type:
    +
    selectableunselecting
    +
    +
    +
    +

    This event is triggered during the select operation, on each element removed from the selection.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the unselecting event as an init option. +
    +
    +
    $( ".selector" ).selectable({
+   unselecting: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the unselecting event by type: selectableunselecting. +
    +
    +
    $( ".selector" ).bind( "selectableunselecting", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .selectable( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the selectable functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .selectable( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the selectable.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .selectable( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the selectable.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .selectable( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any selectable option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .selectable( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple selectable options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .selectable( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-selectable element.

    +
    +
    • + + +
  • +
    +

    refresh

    +
    +
    Signature:
    +
    .selectable( "refresh" + + + + + + + +)
    +
    +
    +
    +

    Refresh the position and size of each selectee element. This method can be used to manually recalculate the position and size of each selectee element. Very useful if autoRefresh is set to false.

    +
    +
    • + +
+
+
+

Theming

+

The jQuery UI Selectable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.selectable.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <ul class="ui-selectable">
+   <li class="ui-selectee"></li>
+   <li class="ui-selectee"></li>
+   <li class="ui-selectee"></li>
+</ul> +

+ + Note: This is a sample of markup generated by the selectable plugin, not markup you should use to create a selectable. The only markup needed for that is
<ul>
+   <li></li>
+   <li></li>
+   <li></li>
+</ul>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/show.html b/static/development-bundle/docs/show.html new file mode 100644 index 0000000..2026e7d --- /dev/null +++ b/static/development-bundle/docs/show.html @@ -0,0 +1,144 @@ + + +
+

jQuery UI show

+
+

Overview

+
+
[edit]

show( effect, [options], [speed], [callback] )

+

The enhanced show method optionally accepts jQuery UI advanced effects.

+

Uses a specific effect on an element to show the element if the first argument is a effect string.

+
+
+

Dependencies

+
    +
  • Effects Core
    • +
+
+
+

Example

+
+ +

+Apply the effect slide if you click on the p to show a div.
+

+
$("p").click(function () {
+      $("div").show("slide", {}, 1000);
+    });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
+<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
+<style type="text/css">
+  div { display: none; margin: 0px; width: 100px; height: 80px; background: blue; position: relative; }
+</style>
+  <script>
+  $(document).ready(function() {
+    $("p").click(function () {
+      $("div").show("slide", {}, 1000);
+    });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<p>Click me</p><div></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Arguments

+
    + +
  • +
    +

    effect

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.

    +
    +
    • + + +
  • +
    +

    options

    +
    +
    Type:
    +
    Hash
    + +
    Optional
    + +
    +
    +
    +

    A object/hash including specific options for the effect.

    +
    +
    • + + +
  • +
    +

    speed

    +
    +
    Type:
    +
    String, Number
    + +
    Optional
    + +
    +
    +
    +

    A string representing one of the predefined speeds ("slow" or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    +
    +
    • + + +
  • +
    +

    callback

    +
    +
    Type:
    +
    Function
    + +
    Optional
    + +
    +
    +
    +

    A function that is called after the effect is completed.

    +
    +
    • + +
+
+
+ +

+ + diff --git a/static/development-bundle/docs/slider.html b/static/development-bundle/docs/slider.html new file mode 100644 index 0000000..08edfd3 --- /dev/null +++ b/static/development-bundle/docs/slider.html @@ -0,0 +1,821 @@ + + +
+

jQuery UI Slider

+
+

Overview

+
+

The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.

+

All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): +

The slider widget will create handle elements with the class 'ui-slider-handle' on initialization. You can specify custom handle elements by creating and appending the elements and adding the 'ui-slider-handle' class before init. It will only create the number of handles needed to match the length of value/values. For example, if you specify 'values: [1, 5, 18]' and create one custom handle, the plugin will create the other two. +

+
    +
  • ui.handle: DOMElement - the current focused handle +
  • ui.value: Integer - the current handle's value +
+
+
+

Dependencies

+
    +
  • UI Core
    • +
  • UI Widget
    • +
  • UI Mouse
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Slider.
+

+
$("#slider").slider();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+    <style type="text/css">
+    #slider { margin: 10px; }
+  </style>
+  <script>
+  $(document).ready(function() {
+    $("#slider").slider();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="slider"></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the slider. Can be set when initialising (first creating) the slider.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the disabled option specified. +
    +
    +
    $( ".selector" ).slider({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).slider( "option", "disabled" );
+//setter
+$( ".selector" ).slider( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    animate

    +
    +
    Type:
    +
    Boolean, String, Number
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Whether to slide handle smoothly when user click outside handle on the bar. Will also accept a string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the animate option specified. +
    +
    +
    $( ".selector" ).slider({ animate: true });
    +
    + + +
    + Get or set the animate option, after init. +
    +
    +
    //getter
+var animate = $( ".selector" ).slider( "option", "animate" );
+//setter
+$( ".selector" ).slider( "option", "animate", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    max

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    100
    + +
    +
    +
    +

    The maximum value of the slider.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the max option specified. +
    +
    +
    $( ".selector" ).slider({ max: 7 });
    +
    + + +
    + Get or set the max option, after init. +
    +
    +
    //getter
+var max = $( ".selector" ).slider( "option", "max" );
+//setter
+$( ".selector" ).slider( "option", "max", 7 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    min

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    The minimum value of the slider.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the min option specified. +
    +
    +
    $( ".selector" ).slider({ min: -7 });
    +
    + + +
    + Get or set the min option, after init. +
    +
    +
    //getter
+var min = $( ".selector" ).slider( "option", "min" );
+//setter
+$( ".selector" ).slider( "option", "min", -7 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    orientation

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'horizontal'
    + +
    +
    +
    +

    This option determines whether the slider has the min at the left, the max at the right or the min at the bottom, the max at the top. Possible values: 'horizontal', 'vertical'.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the orientation option specified. +
    +
    +
    $( ".selector" ).slider({ orientation: 'vertical' });
    +
    + + +
    + Get or set the orientation option, after init. +
    +
    +
    //getter
+var orientation = $( ".selector" ).slider( "option", "orientation" );
+//setter
+$( ".selector" ).slider( "option", "orientation", 'vertical' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    range

    +
    +
    Type:
    +
    Boolean, String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Two other possible values are 'min' and 'max'. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the range option specified. +
    +
    +
    $( ".selector" ).slider({ range: 'min' });
    +
    + + +
    + Get or set the range option, after init. +
    +
    +
    //getter
+var range = $( ".selector" ).slider( "option", "range" );
+//setter
+$( ".selector" ).slider( "option", "range", 'min' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    step

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Determines the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the step option specified. +
    +
    +
    $( ".selector" ).slider({ step: 5 });
    +
    + + +
    + Get or set the step option, after init. +
    +
    +
    //getter
+var step = $( ".selector" ).slider( "option", "step" );
+//setter
+$( ".selector" ).slider( "option", "step", 5 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    value

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the value option specified. +
    +
    +
    $( ".selector" ).slider({ value: 37 });
    +
    + + +
    + Get or set the value option, after init. +
    +
    +
    //getter
+var value = $( ".selector" ).slider( "option", "value" );
+//setter
+$( ".selector" ).slider( "option", "value", 37 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    values

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    This option can be used to specify multiple handles. If range is set to true, the length of 'values' should be 2.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the values option specified. +
    +
    +
    $( ".selector" ).slider({ values: [1,5,9] });
    +
    + + +
    + Get or set the values option, after init. +
    +
    +
    //getter
+var values = $( ".selector" ).slider( "option", "values" );
+//setter
+$( ".selector" ).slider( "option", "values", [1,5,9] );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    start

    +
    +
    Type:
    +
    slidestart
    +
    +
    +
    +

    This event is triggered when the user starts sliding.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the start event as an init option. +
    +
    +
    $( ".selector" ).slider({
+   start: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the start event by type: slidestart. +
    +
    +
    $( ".selector" ).bind( "slidestart", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    slide

    +
    +
    Type:
    +
    slide
    +
    +
    +
    +

    This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value. +

    Return false in order to prevent a slide, based on ui.value.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the slide event as an init option. +
    +
    +
    $( ".selector" ).slider({
+   slide: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the slide event by type: slide. +
    +
    +
    $( ".selector" ).bind( "slide", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    change

    +
    +
    Type:
    +
    slidechange
    +
    +
    +
    +

    This event is triggered on slide stop, or if the value is changed programmatically (by the value method). Takes arguments event and ui. Use event.orginalEvent to detect whether the value changed by mouse, keyboard, or programmatically. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(this).slider('values', index) to get another handle's value.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the change event as an init option. +
    +
    +
    $( ".selector" ).slider({
+   change: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the change event by type: slidechange. +
    +
    +
    $( ".selector" ).bind( "slidechange", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    stop

    +
    +
    Type:
    +
    slidestop
    +
    +
    +
    +

    This event is triggered when the user stops sliding.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the stop event as an init option. +
    +
    +
    $( ".selector" ).slider({
+   stop: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the stop event by type: slidestop. +
    +
    +
    $( ".selector" ).bind( "slidestop", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .slider( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the slider functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .slider( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the slider.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .slider( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the slider.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .slider( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any slider option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .slider( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple slider options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .slider( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-slider element.

    +
    +
    • + + +
  • +
    +

    value

    +
    +
    Signature:
    +
    .slider( "value" + +, [value] + + + + + +)
    +
    +
    +
    +

    Gets or sets the value of the slider. For single handle sliders.

    +
    +
    • + + +
  • +
    +

    values

    +
    +
    Signature:
    +
    .slider( "values" + +, index + +, [value] + + + +)
    +
    +
    +
    +

    Gets or sets the values of the slider. For multiple handle or range sliders.

    +
    +
    • + +
+
+
+

Theming

+

The jQuery UI Slider plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.slider.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
+   <a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>
+</div>
+

+ + Note: This is a sample of markup generated by the slider plugin, not markup you should use to create a slider. The only markup needed for that is <div><div>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/sortable.html b/static/development-bundle/docs/sortable.html new file mode 100644 index 0000000..a028da2 --- /dev/null +++ b/static/development-bundle/docs/sortable.html @@ -0,0 +1,1910 @@ + + +
+

jQuery UI Sortable

+
+

Overview

+
+

The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.

+

All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

+
    +
  • ui.helper - the current helper element (most often a clone of the item)
    • +
  • ui.position - current position of the helper
    • +
  • ui.offset - current absolute position of the helper
    • +
  • ui.item - the current dragged element
    • +
  • ui.placeholder - the placeholder (if you defined one)
    • +
  • ui.sender - the sortable where the item comes from (only exists if you move from one connected list to another)
    • +
+
+
+

Dependencies

+
    +
  • UI Core
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Sortable.
+

+
$("#sortable").sortable();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#sortable").sortable();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<ul id="sortable">
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+<li>Item 4</li>
+<li>Item 5</li>
+</ul>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the sortable. Can be set when initialising (first creating) the sortable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the disabled option specified. +
    +
    +
    $( ".selector" ).sortable({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).sortable( "option", "disabled" );
+//setter
+$( ".selector" ).sortable( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    appendTo

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'parent'
    + +
    +
    +
    +

    Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the appendTo option specified. +
    +
    +
    $( ".selector" ).sortable({ appendTo: 'body' });
    +
    + + +
    + Get or set the appendTo option, after init. +
    +
    +
    //getter
+var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
+//setter
+$( ".selector" ).sortable( "option", "appendTo", 'body' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    axis

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If defined, the items can be dragged only horizontally or vertically. Possible values:'x', 'y'.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the axis option specified. +
    +
    +
    $( ".selector" ).sortable({ axis: 'x' });
    +
    + + +
    + Get or set the axis option, after init. +
    +
    +
    //getter
+var axis = $( ".selector" ).sortable( "option", "axis" );
+//setter
+$( ".selector" ).sortable( "option", "axis", 'x' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    cancel

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    ':input,button'
    + +
    +
    +
    +

    Prevents sorting if you start on elements matching the selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the cancel option specified. +
    +
    +
    $( ".selector" ).sortable({ cancel: 'button' });
    +
    + + +
    + Get or set the cancel option, after init. +
    +
    +
    //getter
+var cancel = $( ".selector" ).sortable( "option", "cancel" );
+//setter
+$( ".selector" ).sortable( "option", "cancel", 'button' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    connectWith

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Takes a jQuery selector with items that also have sortables applied. If used, the sortable is now connected to the other one-way, so you can drag from this sortable to the other.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the connectWith option specified. +
    +
    +
    $( ".selector" ).sortable({ connectWith: '.otherlist' });
    +
    + + +
    + Get or set the connectWith option, after init. +
    +
    +
    //getter
+var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
+//setter
+$( ".selector" ).sortable( "option", "connectWith", '.otherlist' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    containment

    +
    +
    Type:
    +
    Element, String, Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Constrains dragging to within the bounds of the specified element - can be a DOM element, 'parent', 'document', 'window', or a jQuery selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the containment option specified. +
    +
    +
    $( ".selector" ).sortable({ containment: 'parent' });
    +
    + + +
    + Get or set the containment option, after init. +
    +
    +
    //getter
+var containment = $( ".selector" ).sortable( "option", "containment" );
+//setter
+$( ".selector" ).sortable( "option", "containment", 'parent' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    cursor

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'auto'
    + +
    +
    +
    +

    Defines the cursor that is being shown while sorting.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the cursor option specified. +
    +
    +
    $( ".selector" ).sortable({ cursor: 'crosshair' });
    +
    + + +
    + Get or set the cursor option, after init. +
    +
    +
    //getter
+var cursor = $( ".selector" ).sortable( "option", "cursor" );
+//setter
+$( ".selector" ).sortable( "option", "cursor", 'crosshair' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    cursorAt

    +
    +
    Type:
    +
    Object
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the cursorAt option specified. +
    +
    +
    $( ".selector" ).sortable({ cursorAt: 'top' });
    +
    + + +
    + Get or set the cursorAt option, after init. +
    +
    +
    //getter
+var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
+//setter
+$( ".selector" ).sortable( "option", "cursorAt", 'top' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    delay

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Time in milliseconds to define when the sorting should start. It helps preventing unwanted drags when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the delay option specified. +
    +
    +
    $( ".selector" ).sortable({ delay: 500 });
    +
    + + +
    + Get or set the delay option, after init. +
    +
    +
    //getter
+var delay = $( ".selector" ).sortable( "option", "delay" );
+//setter
+$( ".selector" ).sortable( "option", "delay", 500 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    distance

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the distance option specified. +
    +
    +
    $( ".selector" ).sortable({ distance: 30 });
    +
    + + +
    + Get or set the distance option, after init. +
    +
    +
    //getter
+var distance = $( ".selector" ).sortable( "option", "distance" );
+//setter
+$( ".selector" ).sortable( "option", "distance", 30 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    dropOnEmpty

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If false items from this sortable can't be dropped to an empty linked sortable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the dropOnEmpty option specified. +
    +
    +
    $( ".selector" ).sortable({ dropOnEmpty: false });
    +
    + + +
    + Get or set the dropOnEmpty option, after init. +
    +
    +
    //getter
+var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
+//setter
+$( ".selector" ).sortable( "option", "dropOnEmpty", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    forceHelperSize

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If true, forces the helper to have a size.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the forceHelperSize option specified. +
    +
    +
    $( ".selector" ).sortable({ forceHelperSize: true });
    +
    + + +
    + Get or set the forceHelperSize option, after init. +
    +
    +
    //getter
+var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
+//setter
+$( ".selector" ).sortable( "option", "forceHelperSize", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    forcePlaceholderSize

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If true, forces the placeholder to have a size.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the forcePlaceholderSize option specified. +
    +
    +
    $( ".selector" ).sortable({ forcePlaceholderSize: true });
    +
    + + +
    + Get or set the forcePlaceholderSize option, after init. +
    +
    +
    //getter
+var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
+//setter
+$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    grid

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Snaps the sorting element or helper to a grid, every x and y pixels. Array values: [x, y]

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the grid option specified. +
    +
    +
    $( ".selector" ).sortable({ grid: [50, 20] });
    +
    + + +
    + Get or set the grid option, after init. +
    +
    +
    //getter
+var grid = $( ".selector" ).sortable( "option", "grid" );
+//setter
+$( ".selector" ).sortable( "option", "grid", [50, 20] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    handle

    +
    +
    Type:
    +
    Selector, Element
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Restricts sort start click to the specified element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the handle option specified. +
    +
    +
    $( ".selector" ).sortable({ handle: 'h2' });
    +
    + + +
    + Get or set the handle option, after init. +
    +
    +
    //getter
+var handle = $( ".selector" ).sortable( "option", "handle" );
+//setter
+$( ".selector" ).sortable( "option", "handle", 'h2' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    helper

    +
    +
    Type:
    +
    String, Function
    + +
    Default:
    +
    'original'
    + +
    +
    +
    +

    Allows for a helper element to be used for dragging display. The supplied function receives the event and the element being sorted, and should return a DOMElement to be used as a custom proxy helper. Possible values: 'original', 'clone'

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the helper option specified. +
    +
    +
    $( ".selector" ).sortable({ helper: 'clone' });
    +
    + + +
    + Get or set the helper option, after init. +
    +
    +
    //getter
+var helper = $( ".selector" ).sortable( "option", "helper" );
+//setter
+$( ".selector" ).sortable( "option", "helper", 'clone' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    items

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    '> *'
    + +
    +
    +
    +

    Specifies which items inside the element should be sortable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the items option specified. +
    +
    +
    $( ".selector" ).sortable({ items: 'li' });
    +
    + + +
    + Get or set the items option, after init. +
    +
    +
    //getter
+var items = $( ".selector" ).sortable( "option", "items" );
+//setter
+$( ".selector" ).sortable( "option", "items", 'li' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    opacity

    +
    +
    Type:
    +
    Float
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Defines the opacity of the helper while sorting. From 0.01 to 1

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the opacity option specified. +
    +
    +
    $( ".selector" ).sortable({ opacity: 0.6 });
    +
    + + +
    + Get or set the opacity option, after init. +
    +
    +
    //getter
+var opacity = $( ".selector" ).sortable( "option", "opacity" );
+//setter
+$( ".selector" ).sortable( "option", "opacity", 0.6 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    placeholder

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Class that gets applied to the otherwise white space.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the placeholder option specified. +
    +
    +
    $( ".selector" ).sortable({ placeholder: 'ui-state-highlight' });
    +
    + + +
    + Get or set the placeholder option, after init. +
    +
    +
    //getter
+var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
+//setter
+$( ".selector" ).sortable( "option", "placeholder", 'ui-state-highlight' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    revert

    +
    +
    Type:
    +
    Boolean/Integer
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, the item will be reverted to its new DOM position with a smooth animation. Optionally, it can also be set to a number that controls the duration of the animation in ms.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the revert option specified. +
    +
    +
    $( ".selector" ).sortable({ revert: true });
    +
    + + +
    + Get or set the revert option, after init. +
    +
    +
    //getter
+var revert = $( ".selector" ).sortable( "option", "revert" );
+//setter
+$( ".selector" ).sortable( "option", "revert", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    scroll

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to true, the page scrolls when coming to an edge.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the scroll option specified. +
    +
    +
    $( ".selector" ).sortable({ scroll: false });
    +
    + + +
    + Get or set the scroll option, after init. +
    +
    +
    //getter
+var scroll = $( ".selector" ).sortable( "option", "scroll" );
+//setter
+$( ".selector" ).sortable( "option", "scroll", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    scrollSensitivity

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    20
    + +
    +
    +
    +

    Defines how near the mouse must be to an edge to start scrolling.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the scrollSensitivity option specified. +
    +
    +
    $( ".selector" ).sortable({ scrollSensitivity: 40 });
    +
    + + +
    + Get or set the scrollSensitivity option, after init. +
    +
    +
    //getter
+var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
+//setter
+$( ".selector" ).sortable( "option", "scrollSensitivity", 40 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    scrollSpeed

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    20
    + +
    +
    +
    +

    The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the scrollSpeed option specified. +
    +
    +
    $( ".selector" ).sortable({ scrollSpeed: 40 });
    +
    + + +
    + Get or set the scrollSpeed option, after init. +
    +
    +
    //getter
+var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
+//setter
+$( ".selector" ).sortable( "option", "scrollSpeed", 40 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    tolerance

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'intersect'
    + +
    +
    +
    +

    This is the way the reordering behaves during drag. Possible values: 'intersect', 'pointer'. In some setups, 'pointer' is more natural. +

    +
      +
    • intersect: draggable overlaps the droppable at least 50%
      • +
    • pointer: mouse pointer overlaps the droppable
      • +
    +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the tolerance option specified. +
    +
    +
    $( ".selector" ).sortable({ tolerance: 'pointer' });
    +
    + + +
    + Get or set the tolerance option, after init. +
    +
    +
    //getter
+var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
+//setter
+$( ".selector" ).sortable( "option", "tolerance", 'pointer' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    zIndex

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1000
    + +
    +
    +
    +

    Z-index for element/helper while being sorted.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the zIndex option specified. +
    +
    +
    $( ".selector" ).sortable({ zIndex: 5 });
    +
    + + +
    + Get or set the zIndex option, after init. +
    +
    +
    //getter
+var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
+//setter
+$( ".selector" ).sortable( "option", "zIndex", 5 );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    start

    +
    +
    Type:
    +
    sortstart
    +
    +
    +
    +

    This event is triggered when sorting starts.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the start event as an init option. +
    +
    +
    $( ".selector" ).sortable({
+   start: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the start event by type: sortstart. +
    +
    +
    $( ".selector" ).bind( "sortstart", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    sort

    +
    +
    Type:
    +
    sort
    +
    +
    +
    +

    This event is triggered during sorting.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the sort event as an init option. +
    +
    +
    $( ".selector" ).sortable({
+   sort: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the sort event by type: sort. +
    +
    +
    $( ".selector" ).bind( "sort", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    change

    +
    +
    Type:
    +
    sortchange
    +
    +
    +
    +

    This event is triggered during sorting, but only when the DOM position has changed.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the change event as an init option. +
    +
    +
    $( ".selector" ).sortable({
+   change: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the change event by type: sortchange. +
    +
    +
    $( ".selector" ).bind( "sortchange", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    beforeStop

    +
    +
    Type:
    +
    sortbeforestop
    +
    +
    +
    +

    This event is triggered when sorting stops, but when the placeholder/helper is still available.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the beforeStop event as an init option. +
    +
    +
    $( ".selector" ).sortable({
+   beforeStop: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the beforeStop event by type: sortbeforestop. +
    +
    +
    $( ".selector" ).bind( "sortbeforestop", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    stop

    +
    +
    Type:
    +
    sortstop
    +
    +
    +
    +

    This event is triggered when sorting has stopped.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the stop event as an init option. +
    +
    +
    $( ".selector" ).sortable({
+   stop: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the stop event by type: sortstop. +
    +
    +
    $( ".selector" ).bind( "sortstop", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    update

    +
    +
    Type:
    +
    sortupdate
    +
    +
    +
    +

    This event is triggered when the user stopped sorting and the DOM position has changed.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the update event as an init option. +
    +
    +
    $( ".selector" ).sortable({
+   update: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the update event by type: sortupdate. +
    +
    +
    $( ".selector" ).bind( "sortupdate", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    receive

    +
    +
    Type:
    +
    sortreceive
    +
    +
    +
    +

    This event is triggered when a connected sortable list has received an item from another list.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the receive event as an init option. +
    +
    +
    $( ".selector" ).sortable({
+   receive: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the receive event by type: sortreceive. +
    +
    +
    $( ".selector" ).bind( "sortreceive", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    remove

    +
    +
    Type:
    +
    sortremove
    +
    +
    +
    +

    This event is triggered when a sortable item has been dragged out from the list and into another.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the remove event as an init option. +
    +
    +
    $( ".selector" ).sortable({
+   remove: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the remove event by type: sortremove. +
    +
    +
    $( ".selector" ).bind( "sortremove", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    over

    +
    +
    Type:
    +
    sortover
    +
    +
    +
    +

    This event is triggered when a sortable item is moved into a connected list.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the over event as an init option. +
    +
    +
    $( ".selector" ).sortable({
+   over: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the over event by type: sortover. +
    +
    +
    $( ".selector" ).bind( "sortover", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    out

    +
    +
    Type:
    +
    sortout
    +
    +
    +
    +

    This event is triggered when a sortable item is moved away from a connected list.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the out event as an init option. +
    +
    +
    $( ".selector" ).sortable({
+   out: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the out event by type: sortout. +
    +
    +
    $( ".selector" ).bind( "sortout", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    activate

    +
    +
    Type:
    +
    sortactivate
    +
    +
    +
    +

    This event is triggered when using connected lists, every connected list on drag start receives it.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the activate event as an init option. +
    +
    +
    $( ".selector" ).sortable({
+   activate: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the activate event by type: sortactivate. +
    +
    +
    $( ".selector" ).bind( "sortactivate", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    deactivate

    +
    +
    Type:
    +
    sortdeactivate
    +
    +
    +
    +

    This event is triggered when sorting was stopped, is propagated to all possible connected lists.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the deactivate event as an init option. +
    +
    +
    $( ".selector" ).sortable({
+   deactivate: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the deactivate event by type: sortdeactivate. +
    +
    +
    $( ".selector" ).bind( "sortdeactivate", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .sortable( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the sortable functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .sortable( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the sortable.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .sortable( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the sortable.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .sortable( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any sortable option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .sortable( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple sortable options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .sortable( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-sortable element.

    +
    +
    • + + +
  • +
    +

    serialize

    +
    +
    Signature:
    +
    .sortable( "serialize" + +, [options] + + + + + +)
    +
    +
    +
    +

    Serializes the sortable's item id's into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server. +

    It works by default by looking at the id of each item in the format 'setname_number', and it spits out a hash like "setname[]=number&setname[]=number". +

    You can also give in a option hash as second argument to custom define how the function works. The possible options are: 'key' (replaces part1[] with whatever you want), 'attribute' (test another attribute than 'id') and 'expression' (use your own regexp). +

    If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.

    +
    +
    • + + +
  • +
    +

    toArray

    +
    +
    Signature:
    +
    .sortable( "toArray" + + + + + + + +)
    +
    +
    +
    +

    Serializes the sortable's item id's into an array of string. If you have +

    +
    +<ul id="a_sortable"><br>
+<li id="hello">Hello</li><br>
+<li id="goodbye">Good bye</li><br>
+</ul>
+
    +

    and do +

    +
    var result = $('#a_sortable').sortable('toArray');
    +

    then +

    +
    result[0] will contain "hello" and result[1] will contain "goodbye".

    +
    +
    • + +

    +

  • +
    +

    refresh

    +
    +
    Signature:
    +
    .sortable( "refresh" + + + + + + + +)
    +
    +
    +
    +

    Refresh the sortable items. Custom trigger the reloading of all sortable items, causing new items to be recognized.

    +
    +
    • + + +
  • +
    +

    refreshPositions

    +
    +
    Signature:
    +
    .sortable( "refreshPositions" + + + + + + + +)
    +
    +
    +
    +

    Refresh the cached positions of the sortables' items. Calling this method refreshes the cached item positions of all sortables. This is usually done automatically by the script and slows down performance. Use wisely.

    +
    +
    • + + +
  • +
    +

    cancel

    +
    +
    Signature:
    +
    .sortable( "cancel" + + + + + + + +)
    +
    +
    +
    +

    Cancels a change in the current sortable and reverts it back to how it was before the current sort started. Useful in the stop and receive callback functions. +

    If the sortable item is not being moved from one connected sortable to another: +

    +
    $(this).sortable('cancel');
    +

    will cancel the change. +

    If the sortable item is being moved from one connected sortable to another: +

    +
    $(ui.sender).sortable('cancel');
    +

    will cancel the change. Useful in the 'receive' callback.

    +
    +
    • + +
+
+
+

Theming

+

The jQuery UI Sortable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.sortable.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <ul class="ui-sortable">
+   <li></li>
+   <li></li>
+   <li></li>
+</ul> +

+ + Note: This is a sample of markup generated by the sortable plugin, not markup you should use to create a sortable. The only markup needed for that is
<ul>
+   <li></li>
+   <li></li>
+   <li></li>
+</ul>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/switchClass.html b/static/development-bundle/docs/switchClass.html new file mode 100644 index 0000000..8185756 --- /dev/null +++ b/static/development-bundle/docs/switchClass.html @@ -0,0 +1,129 @@ + + +
+

jQuery UI switchClass

+
+

Overview

+
+
[edit]

switchClass( remove, add, [duration] )

+

Switches from the class defined in the first argument to the class defined as second argument, using an optional transition.

+
+
+

Dependencies

+
    +
  • Effects Core
    • +
+
+
+

Example

+
+ +

+Switch the class 'highlight' to 'blue' when a paragraph is clicked with a one second transition.
+

+
$("p").click(function () {
+      $(this).switchClass("highlight", "blue", 1000);
+    });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
+<style type="text/css">
+  p { margin: 4px; font-size:16px; font-weight:bolder; 
+      cursor:pointer; }
+  .blue { background: blue; }
+  .highlight { background:yellow; }
+</style>
+  <script>
+  $(document).ready(function() {
+    $("p").click(function () {
+      $(this).switchClass("highlight", "blue", 1000);
+    });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<p class="highlight">Click to switch</p>
+<p class="highlight">to blue</p>
+<p class="highlight">on these</p>
+<p class="highlight">paragraphs</p>
+
+</body>
+</html>
+
+

+

+
+
+
+

Arguments

+
    + +
  • +
    +

    remove

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    The CSS class that will be removed.

    +
    +
    • + + +
  • +
    +

    add

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    The CSS class that will be added.

    +
    +
    • + + +
  • +
    +

    duration

    +
    +
    Type:
    +
    String, Number
    + +
    Optional
    + +
    +
    +
    +

    A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    +
    +
    • + +
+
+
+ +

+ + diff --git a/static/development-bundle/docs/tabs.html b/static/development-bundle/docs/tabs.html new file mode 100644 index 0000000..344e635 --- /dev/null +++ b/static/development-bundle/docs/tabs.html @@ -0,0 +1,1513 @@ + + +
+

jQuery UI Tabs

+
+

Overview

+
+

Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.

+

By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab.

+

NOTE: Tabs created dynamically using .tabs( "add", ... ) are given an id of ui-tabs-NUM, where NUM is an auto-incrementing id. If you use this naming convention for your own elements, you may encounter problems.

+

Contents

+ +
+
[edit]

Events

+

A series of events fire when interacting with a tabs interface: +

+
  • tabsselect, tabsload, tabsshow (in that order) +
  • tabsadd, tabsremove +
  • tabsenable, tabsdisable +
+

Event binding example: +

+
$('#example').bind('tabsselect', function(event, ui) {
+
+    // Objects available in the function context:
+    ui.tab     // anchor element of the selected (clicked) tab
+    ui.panel   // element, that contains the selected/clicked tab contents
+    ui.index   // zero-based index of the selected (clicked) tab
+
+});
+

Note that if a handler for the tabsselect event returns false, the clicked tab will not become selected (useful for example if switching to the next tab requires a form validation). +

+
[edit]

Ajax mode

+

Tabs supports loading tab content via Ajax in an unobtrusive manner. +

The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!). The containers' markup is going to be created on the fly: +

+
+<div id="example">
+     <ul>
+         <li><a href="ahah_1.html"><span>Content 1</span></a></li>
+         <li><a href="ahah_2.html"><span>Content 2</span></a></li>
+         <li><a href="ahah_3.html"><span>Content 3</span></a></li>
+     </ul>
+</div>
+
+

Obviously this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled. +

Note that if you wish to reuse an existing container, you +could do so by matching a title attribute and the container's id: +

+
+<li><a href="hello/world.html" title="Todo Overview"> ... </a></li>
+
+

and a container like: +

+
+<div id="Todo_Overview"> ... </div>
+
+

(Note how white space is replaced with an underscore) +

This is useful if you want a human readable hash in the URL instead of +a cryptic generated one. +

+
[edit]

Back button and bookmarking

+

Tabs 2 already supported this functionality, although the history plugin needs a rewrite first (it doesn't support Safari 3 and is in general a little inflexible) before it can be build back into the tabs. It is planned and Klaus is working on it whenever he finds the time. Actual bugs in the UI Tabs plugin itself always have higher priority though. +

+
[edit]

How to...

+
[edit]

...retrieve the index of the currently selected tab

+
var $tabs = $('#example').tabs();
+var selected = $tabs.tabs('option', 'selected'); // => 0
+
[edit]

...open links in the current tab instead of leaving the page

+

"Hijax" links after tab content has been loaded: +

+
$('#example').tabs({
+    load: function(event, ui) {
+        $('a', ui.panel).click(function() {
+            $(ui.panel).load(this.href);
+            return false;
+        });
+    }
+});
+
[edit]

...select a tab from a text link instead of clicking a tab itself

+
var $tabs = $('#example').tabs(); // first tab selected
+
+$('#my-text-link').click(function() { // bind click event to link
+    $tabs.tabs('select', 2); // switch to third tab
+    return false;
+});
+
[edit]

...prevent switching to the tab on click depending on form validation

+

Returning false in the tabs select handler prevents the clicked tab from becoming selected. +

+
$('#example').tabs({
+    select: function(event, ui) {
+        var isValid = ... // form validation returning true or false
+        return isValid;
+    }
+});
+
[edit]

...immediately select a just added tab

+
var $tabs = $('#example').tabs({
+    add: function(event, ui) {
+        $tabs.tabs('select', '#' + ui.panel.id);
+    }
+});
+
[edit]

...follow a tab's URL instead of loading its content via ajax

+

Note that opening a tab in a new window is unexpected, e.g. +inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html). +

+
$('#example').tabs({
+    select: function(event, ui) {
+        var url = $.data(ui.tab, 'load.tabs');
+        if( url ) {
+            location.href = url;
+            return false;
+        }
+        return true;
+    }
+});
+


+

+
[edit]

...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized

+

Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will not degrade gracefully with JavaScript being disabled: +

+
<div id="example" class="ui-tabs">
+  ...
+  <div id="a-tab-panel" class="ui-tabs-hide"> </div>
+  ...
+</div>
+
[edit]

Why does...

+
[edit]

...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?

+

Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers). +

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with +

+
.ui-tabs .ui-tabs-hide {
+    position: absolute;
+    left: -10000px;
+}
+

For Google maps you can also resize the map once the tab is displayed like this: +

+
$('#example').bind('tabsshow', function(event, ui) {
+    if (ui.panel.id == "map-tab") {
+        resizeMap();
+    }
+});
+resizeMap() will call Google Maps' checkResize() on the particular map. +
+
+

Dependencies

+
    +
  • UI Core
    • +
  • To use the cookie option: jquery.cookie.js
    • +
  • Required CSS: +
    .ui-tabs .ui-tabs-hide {
+     display: none;
+}
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Tabs.
+

+
$("#tabs").tabs();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#tabs").tabs();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="tabs">
+    <ul>
+        <li><a href="#fragment-1"><span>One</span></a></li>
+        <li><a href="#fragment-2"><span>Two</span></a></li>
+        <li><a href="#fragment-3"><span>Three</span></a></li>
+    </ul>
+    <div id="fragment-1">
+        <p>First tab is active by default:</p>
+        <pre><code>$('#example').tabs();</code></pre>
+    </div>
+    <div id="fragment-2">
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+    </div>
+    <div id="fragment-3">
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+    </div>
+</div>
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the tabs. Can be set when initialising (first creating) the tabs.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the disabled option specified. +
    +
    +
    $( ".selector" ).tabs({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).tabs( "option", "disabled" );
+//setter
+$( ".selector" ).tabs( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    ajaxOptions

    +
    +
    Type:
    +
    Options
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    Additional Ajax options to consider when loading tab content (see $.ajax).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the ajaxOptions option specified. +
    +
    +
    $( ".selector" ).tabs({ ajaxOptions: { async: false } });
    +
    + + +
    + Get or set the ajaxOptions option, after init. +
    +
    +
    //getter
+var ajaxOptions = $( ".selector" ).tabs( "option", "ajaxOptions" );
+//setter
+$( ".selector" ).tabs( "option", "ajaxOptions", { async: false } );
    +
    + +
    +
    +
    • + + +
  • +
    +

    cache

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Whether or not to cache remote tabs content, e.g. load only once or with every click. Cached content is being lazy loaded, e.g once and only once for the first click. Note that to prevent the actual Ajax requests from being cached by the browser you need to provide an extra cache: false flag to ajaxOptions.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the cache option specified. +
    +
    +
    $( ".selector" ).tabs({ cache: true });
    +
    + + +
    + Get or set the cache option, after init. +
    +
    +
    //getter
+var cache = $( ".selector" ).tabs( "option", "cache" );
+//setter
+$( ".selector" ).tabs( "option", "cache", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    collapsible

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Set to true to allow an already selected tab to become unselected again upon reselection.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the collapsible option specified. +
    +
    +
    $( ".selector" ).tabs({ collapsible: true });
    +
    + + +
    + Get or set the collapsible option, after init. +
    +
    +
    //getter
+var collapsible = $( ".selector" ).tabs( "option", "collapsible" );
+//setter
+$( ".selector" ).tabs( "option", "collapsible", true );
    +
    + +
    +
    +
    • + + + + + +
  • +
    +

    deselectable

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    deprecated in jQuery UI 1.7, use collapsible.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the deselectable option specified. +
    +
    +
    $( ".selector" ).tabs({ deselectable: true });
    +
    + + +
    + Get or set the deselectable option, after init. +
    +
    +
    //getter
+var deselectable = $( ".selector" ).tabs( "option", "deselectable" );
+//setter
+$( ".selector" ).tabs( "option", "deselectable", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Array<Number>
    + +
    Default:
    +
    []
    + +
    +
    +
    +

    An array containing the position of the tabs (zero-based index) that should be disabled on initialization.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the disabled option specified. +
    +
    +
    $( ".selector" ).tabs({ disabled: [1, 2] });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).tabs( "option", "disabled" );
+//setter
+$( ".selector" ).tabs( "option", "disabled", [1, 2] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    event

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'click'
    + +
    +
    +
    +

    The type of event to be used for selecting a tab.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the event option specified. +
    +
    +
    $( ".selector" ).tabs({ event: 'mouseover' });
    +
    + + +
    + Get or set the event option, after init. +
    +
    +
    //getter
+var event = $( ".selector" ).tabs( "option", "event" );
+//setter
+$( ".selector" ).tabs( "option", "event", 'mouseover' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    fx

    +
    +
    Type:
    +
    Options, Array<Options>
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    Enable animations for hiding and showing tab panels. The duration option can be a string representing one of the three predefined speeds ("slow", "normal", "fast") or the duration in milliseconds to run an animation (default is "normal").

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the fx option specified. +
    +
    +
    $( ".selector" ).tabs({ fx: { opacity: 'toggle' } });
    +
    + + +
    + Get or set the fx option, after init. +
    +
    +
    //getter
+var fx = $( ".selector" ).tabs( "option", "fx" );
+//setter
+$( ".selector" ).tabs( "option", "fx", { opacity: 'toggle' } );
    +
    + +
    +
    +
    • + + +
  • +
    +

    idPrefix

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'ui-tabs-'
    + +
    +
    +
    +

    If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id returned by $.data(el), for example "ui-tabs-54".

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the idPrefix option specified. +
    +
    +
    $( ".selector" ).tabs({ idPrefix: 'ui-tabs-primary' });
    +
    + + +
    + Get or set the idPrefix option, after init. +
    +
    +
    //getter
+var idPrefix = $( ".selector" ).tabs( "option", "idPrefix" );
+//setter
+$( ".selector" ).tabs( "option", "idPrefix", 'ui-tabs-primary' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    panelTemplate

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    '<div></div>'
    + +
    +
    +
    +

    HTML template from which a new tab panel is created in case of adding a tab with the add method or when creating a panel for a remote tab on the fly.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the panelTemplate option specified. +
    +
    +
    $( ".selector" ).tabs({ panelTemplate: '<li></li>' });
    +
    + + +
    + Get or set the panelTemplate option, after init. +
    +
    +
    //getter
+var panelTemplate = $( ".selector" ).tabs( "option", "panelTemplate" );
+//setter
+$( ".selector" ).tabs( "option", "panelTemplate", '<li></li>' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    selected

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Zero-based index of the tab to be selected on initialization. To set all tabs to unselected pass -1 as value.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the selected option specified. +
    +
    +
    $( ".selector" ).tabs({ selected: 3 });
    +
    + + +
    + Get or set the selected option, after init. +
    +
    +
    //getter
+var selected = $( ".selector" ).tabs( "option", "selected" );
+//setter
+$( ".selector" ).tabs( "option", "selected", 3 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    spinner

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    '<em>Loading&#8230;</em>'
    + +
    +
    +
    +

    The HTML content of this string is shown in a tab title while remote content is loading. Pass in empty string to deactivate that behavior. An span element must be present in the A tag of the title, for the spinner content to be visible.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the spinner option specified. +
    +
    +
    $( ".selector" ).tabs({ spinner: 'Retrieving data...' });
    +
    + + +
    + Get or set the spinner option, after init. +
    +
    +
    //getter
+var spinner = $( ".selector" ).tabs( "option", "spinner" );
+//setter
+$( ".selector" ).tabs( "option", "spinner", 'Retrieving data...' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    tabTemplate

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    '<li><a href="#{href}"><span>#{label}</span></a></li>'
    + +
    +
    +
    +

    HTML template from which a new tab is created and added. The placeholders #{href} and #{label} are replaced with the url and tab label that are passed as arguments to the add method.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a tabs with the tabTemplate option specified. +
    +
    +
    $( ".selector" ).tabs({ tabTemplate: '<div><a href="#{href}"><span>#{label}</span></a></div>' });
    +
    + + +
    + Get or set the tabTemplate option, after init. +
    +
    +
    //getter
+var tabTemplate = $( ".selector" ).tabs( "option", "tabTemplate" );
+//setter
+$( ".selector" ).tabs( "option", "tabTemplate", '<div><a href="#{href}"><span>#{label}</span></a></div>' );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    select

    +
    +
    Type:
    +
    tabsselect
    +
    +
    +
    +

    This event is triggered when clicking a tab.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the select event as an init option. +
    +
    +
    $( ".selector" ).tabs({
+   select: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the select event by type: tabsselect. +
    +
    +
    $( ".selector" ).bind( "tabsselect", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    load

    +
    +
    Type:
    +
    tabsload
    +
    +
    +
    +

    This event is triggered after the content of a remote tab has been loaded.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the load event as an init option. +
    +
    +
    $( ".selector" ).tabs({
+   load: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the load event by type: tabsload. +
    +
    +
    $( ".selector" ).bind( "tabsload", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    show

    +
    +
    Type:
    +
    tabsshow
    +
    +
    +
    +

    This event is triggered when a tab is shown.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the show event as an init option. +
    +
    +
    $( ".selector" ).tabs({
+   show: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the show event by type: tabsshow. +
    +
    +
    $( ".selector" ).bind( "tabsshow", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    add

    +
    +
    Type:
    +
    tabsadd
    +
    +
    +
    +

    This event is triggered when a tab is added.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the add event as an init option. +
    +
    +
    $( ".selector" ).tabs({
+   add: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the add event by type: tabsadd. +
    +
    +
    $( ".selector" ).bind( "tabsadd", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    remove

    +
    +
    Type:
    +
    tabsremove
    +
    +
    +
    +

    This event is triggered when a tab is removed.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the remove event as an init option. +
    +
    +
    $( ".selector" ).tabs({
+   remove: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the remove event by type: tabsremove. +
    +
    +
    $( ".selector" ).bind( "tabsremove", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Type:
    +
    tabsenable
    +
    +
    +
    +

    This event is triggered when a tab is enabled.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the enable event as an init option. +
    +
    +
    $( ".selector" ).tabs({
+   enable: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the enable event by type: tabsenable. +
    +
    +
    $( ".selector" ).bind( "tabsenable", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Type:
    +
    tabsdisable
    +
    +
    +
    +

    This event is triggered when a tab is disabled.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the disable event as an init option. +
    +
    +
    $( ".selector" ).tabs({
+   disable: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the disable event by type: tabsdisable. +
    +
    +
    $( ".selector" ).bind( "tabsdisable", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .tabs( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the tabs functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .tabs( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the tabs.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .tabs( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the tabs.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .tabs( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any tabs option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .tabs( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple tabs options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .tabs( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-tabs element.

    +
    +
    • + + +
  • +
    +

    add

    +
    +
    Signature:
    +
    .tabs( "add" + +, url + +, label + +, [index] + +)
    +
    +
    +
    +

    Add a new tab. The second argument is either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab. The third is the zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.

    +
    +
    • + + +
  • +
    +

    remove

    +
    +
    Signature:
    +
    .tabs( "remove" + +, index + + + + + +)
    +
    +
    +
    +

    Remove a tab. The second argument is the zero-based index of the tab to be removed.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .tabs( "enable" + +, index + + + + + +)
    +
    +
    +
    +

    Enable a disabled tab. To enable more than one tab at once reset the disabled property like: $('#example').tabs("option","disabled",[]);. The second argument is the zero-based index of the tab to be enabled.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .tabs( "disable" + +, index + + + + + +)
    +
    +
    +
    +

    Disable a tab. The selected tab cannot be disabled. To disable more than one tab at once use: $('#example').tabs("option","disabled", [1, 2, 3]); The second argument is the zero-based index of the tab to be disabled.

    +
    +
    • + + +
  • +
    +

    select

    +
    +
    Signature:
    +
    .tabs( "select" + +, index + + + + + +)
    +
    +
    +
    +

    Select a tab, as if it were clicked. The second argument is the zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id).

    +
    +
    • + + +
  • +
    +

    load

    +
    +
    Signature:
    +
    .tabs( "load" + +, index + + + + + +)
    +
    +
    +
    +

    Reload the content of an Ajax tab programmatically. This method always loads the tab content from the remote location, even if cache is set to true. The second argument is the zero-based index of the tab to be reloaded.

    +
    +
    • + + +
  • +
    +

    url

    +
    +
    Signature:
    +
    .tabs( "url" + +, index + +, url + + + +)
    +
    +
    +
    +

    Change the url from which an Ajax (remote) tab will be loaded. The specified URL will be used for subsequent loads. Note that you can not only change the URL for an existing remote tab with this method, but also turn an in-page tab into a remote tab. The second argument is the zero-based index of the tab of which its URL is to be updated. The third is a URL the content of the tab is loaded from.

    +
    +
    • + + +
  • +
    +

    length

    +
    +
    Signature:
    +
    .tabs( "length" + + + + + + + +)
    +
    +
    +
    +

    Retrieve the number of tabs of the first matched tab pane.

    +
    +
    • + + +
  • +
    +

    abort

    +
    +
    Signature:
    +
    .tabs( "abort" + + + + + + + +)
    +
    +
    +
    +

    Terminate all running tab ajax requests and animations.

    +
    +
    • + + +
  • +
    +

    rotate

    +
    +
    Signature:
    +
    .tabs( "rotate" + +, ms + +, [continuing] + + + +)
    +
    +
    +
    +

    Set up an automatic rotation through tabs of a tab pane. The second argument is an amount of time in milliseconds until the next tab in the cycle gets activated. Use 0 or null to stop the rotation. The third controls whether or not to continue the rotation after a tab has been selected by a user. Default: false.

    +
    +
    • + +
+
+
+

Theming

+

The jQuery UI Tabs plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.tabs.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
+   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
+     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
+      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
+   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
+      <p>Tab one content goes here.</p>
+   </div>
+    ...
+</div>
+

+ + Note: This is a sample of markup generated by the tabs plugin, not markup you should use to create a tabs. The only markup needed for that is
<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>Tab 1 content</p>
+   </div>
+   <div id="tabs-2">
+      <p>Tab 2 content</p>
+   </div>
+   <div id="tabs-3">
+      <p>Tab 3 content</p>
+   </div>
+</div>. + +

+ +
+
+ +

+ + diff --git a/static/development-bundle/docs/toggle.html b/static/development-bundle/docs/toggle.html new file mode 100644 index 0000000..c28fb64 --- /dev/null +++ b/static/development-bundle/docs/toggle.html @@ -0,0 +1,144 @@ + + +
+

jQuery UI toggle

+
+

Overview

+
+
[edit]

toggle( effect, [options], [speed], [callback] )

+

The enhanced toggle method optionally accepts jQuery UI advanced effects.

+

Uses a specific effect on an element to toggle the element if the first argument is an effect string.

+
+
+

Dependencies

+
    +
  • Effects Core
    • +
+
+
+

Example

+
+ +

+Apply the effect slide if you click on the p to toggle a div.
+

+
$("p").click(function () {
+      $("div").toggle("slide", {}, 1000);
+    });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
+<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
+<style type="text/css">
+  div { display: none; margin: 0px; width: 100px; height: 80px; background: blue; position: relative; }
+</style>
+  <script>
+  $(document).ready(function() {
+    $("p").click(function () {
+      $("div").toggle("slide", {}, 1000);
+    });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<p>Click me</p><div></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Arguments

+
    + +
  • +
    +

    effect

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.

    +
    +
    • + + +
  • +
    +

    options

    +
    +
    Type:
    +
    Hash
    + +
    Optional
    + +
    +
    +
    +

    A object/hash including specific options for the effect.

    +
    +
    • + + +
  • +
    +

    speed

    +
    +
    Type:
    +
    String, Number
    + +
    Optional
    + +
    +
    +
    +

    A string representing one of the predefined speeds ("slow" or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    +
    +
    • + + +
  • +
    +

    callback

    +
    +
    Type:
    +
    Function
    + +
    Optional
    + +
    +
    +
    +

    A function that is called after the effect is completed.

    +
    +
    • + +
+
+
+ +

+ + diff --git a/static/development-bundle/docs/toggleClass.html b/static/development-bundle/docs/toggleClass.html new file mode 100644 index 0000000..2df2ebf --- /dev/null +++ b/static/development-bundle/docs/toggleClass.html @@ -0,0 +1,111 @@ + + +
+

jQuery UI toggleClass

+
+

Overview

+
+
[edit]

toggleClass( class, [duration] )

+

Adds the specified class if it is not present, and removes the specified class if it is present, using an optional transition.

+
+
+

Dependencies

+
    +
  • Effects Core
    • +
+
+
+

Example

+
+ +

+Adds the 'selected' class if it is not present, and removes the 'selected' class if it is present.
+

+
$("p").click(function () {
+      $(this).toggleClass("selected", 1000);
+    });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
+<style type="text/css">
+  p { cursor: pointer; font-size: 1.2em; }
+  .selected { color:red; }
+</style>
+  <script>
+  $(document).ready(function() {
+    $("p").click(function () {
+      $(this).toggleClass("selected", 1000);
+    });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<p>Click me to toggle 'selected' class.</p>
+<p class="selected">Click me to toggle 'selected' class.</p>
+<p>Click me to toggle 'selected' class.</p>
+
+</body>
+</html>
+
+

+

+
+
+
+

Arguments

+
    + +
  • +
    +

    class

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    A CSS class to toggle on the elements.

    +
    +
    • + + +
  • +
    +

    duration

    +
    +
    Type:
    +
    String, Number
    + +
    Optional
    + +
    +
    +
    +

    A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    +
    +
    • + +
+
+
+ +

+ + -- cgit v1.2.1