jQuery UI 1.8 Documentation http://api.jqueryui.com/1.8 Fri, 03 May 2013 14:26:22 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 Accordion Widget http://api.jqueryui.com/1.8/accordion/ http://api.jqueryui.com/1.8/accordion/#comments Mon, 08 Oct 2012 18:28:22 +0000 jquery http://api.jqueryui.com/1.8/?p=3

Accordion Widgetversion added: 1.0

Description: Convert a pair of headers and content panels into an accordion.

QuickNavExamples

Options

Methods

Events

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

1
2
3
4
5
6
 
<div id="accordion">
  <h3><a href="#">First header</a></h3>
  <div>First content panel</div>
  <h3><a href="#">Second header</a></h3>
  <div>Second content panel</div>
</div>

Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures.

The panels can be activated programmatically by setting the active option.

Additional Notes:

  • This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

Options

activeType: Boolean or Integer

Default: 0
Which panel is currently open.
Multiple types supported:
  • Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true.
  • Integer: The zero-based index of the panel that is active (open).

animatedType: Boolean or String

Default: slide
If and how to animate changing panels.
Multiple types supported:
  • Boolean: A value of false will disable animations.
  • String: Name of easing to use with default duration. Additionally, values of "slide" and "bounceslide" have built-in custom implementations.

autoHeightType: Boolean

Default: true
Whether all panels should be set to the height of the tallest panel.

clearStyleType: Boolean

Default: false
Whether to clear height and overflow styles after finishing animations. This enabled accordions to work with dynamic content. Requires the autoHeight option to be false.

collapsibleType: Boolean

Default: false
Whether all the sections can be closed at once. Allows collapsing the active section.

disabledType: Boolean

Default: false
Disables the accordion if set to true.

eventType: String

Default: "click"
The event that accordion headers will react to in order to activate the associated panel. Multiple events can be specificed, separated by a space.

fillSpaceType: String

Default: false
Whether the accordion should expand to the available height based on the accordion's parent height. This option will override the autoHeight option.

headerType: Selector

Default: "> li > :first-child,> :not(li):even"

Selector for the header element, applied via .find() on the main accordion element. Content panels must be the sibling immedately after their associated headers.

iconsType: Object

Default: { "header": "ui-icon-triangle-1-e", "headerSelected": "ui-icon-triangle-1-s" }

Icons to use for headers, matching an icon defined by the jQuery UI CSS Framework. Set to false to have no icons displayed.

  • header (string, default: "ui-icon-triangle-1-e")
  • headerSelected (string, default: "ui-icon-triangle-1-s")

navigationType: Boolean

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

navigationFilterType: Function()

Default: function matching location.href
A function that is invoked for each tab anchor, with the anchor element as the context. Must return true for the tab that should be active on initialization.

Methods

activate( index )

Activate a panel.
  • index
    Type: Integer
    The zero-based index of the panel to activate.
Code examples:

Invoke the activate method:

1
 
$( ".selector" ).accordion( "activate" );

destroy()

Removes the accordion functionality completely. This will return the element back to its pre-init state.
  • This method does not accept any arguments.
Code examples:

Invoke the destroy method:

1
 
$( ".selector" ).accordion( "destroy" );

disable()

Disables the accordion.
  • This method does not accept any arguments.
Code examples:

Invoke the disable method:

1
 
$( ".selector" ).accordion( "disable" );

enable()

Enables the accordion.
  • This method does not accept any arguments.
Code examples:

Invoke the enable method:

1
 
$( ".selector" ).accordion( "enable" );

option( optionName )Returns: Object

Gets the value currently associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to get.
Code examples:

Invoke the method:

1
 
$( ".selector" ).accordion( "option" );

option()Returns: PlainObject

Gets an object containing key/value pairs representing the current accordion options hash.
  • This method does not accept any arguments.
Code examples:

Invoke the method:

1
 
$( ".selector" ).accordion( "option" );

option( optionName, value )

Sets the value of the accordion option associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.
Code examples:

Invoke the method:

1
 
$( ".selector" ).accordion( "option" );

option( options )

Sets one or more options for the accordion.
  • options
    Type: Object
    A map of option-value pairs to set.
Code examples:

Invoke the method:

1
 
$( ".selector" ).accordion( "option" );

resize()

Recompute the height of the accordion panels. Results depend on the content and height-related options.
  • This method does not accept any arguments.
Code examples:

Invoke the resize method:

1
 
$( ".selector" ).accordion( "resize" );

widget()Returns: jQuery

Returns a jQuery object containing the accordion.
  • This method does not accept any arguments.
Code examples:

Invoke the widget method:

1
 
$( ".selector" ).accordion( "widget" );

Events

change( event, ui )Type: accordionchange

Triggered after a panel has been activated (after animation completes). If the accordion was previously collapsed, ui.oldHeader and ui.oldContent will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newContent will be empty jQuery objects.
  • event
    Type: Event
  • ui
    Type: Object
    • newHeader
      Type: jQuery
      The header that was just activated.
    • oldHeader
      Type: jQuery
      The header that was just deactivated.
    • newContent
      Type: jQuery
      The panel that was just activated.
    • oldContent
      Type: jQuery
      The panel that was just deactivated.
Code examples:

Initialize the accordion with the change callback specified:

1
2
3
 
$( ".selector" ).accordion({
  change: function( event, ui ) {}
});

Bind an event listener to the accordionchange event:

1
 
$( ".selector" ).on( "accordionchange", function( event, ui ) {} );

changestart( event, ui )Type: accordionchangestart

Triggered directly after a panel is activated. If the accordion is currently collapsed, ui.oldHeader and ui.oldContent will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newContent will be empty jQuery objects.
  • event
    Type: Event
  • ui
    Type: Object
    • newHeader
      Type: jQuery
      The header that is about to be activated.
    • oldHeader
      Type: jQuery
      The header that is about to be deactivated.
    • newContent
      Type: jQuery
      The panel that is about to be activated.
    • oldContent
      Type: jQuery
      The panel that is about to be deactivated.
Code examples:

Initialize the accordion with the changestart callback specified:

1
2
3
 
$( ".selector" ).accordion({
  changestart: function( event, ui ) {}
});

Bind an event listener to the accordionchangestart event:

1
 
$( ".selector" ).on( "accordionchangestart", function( event, ui ) {} );

create( event, ui )Type: accordioncreate

Triggered when the accordion is created.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the accordion with the create callback specified:

1
2
3
 
$( ".selector" ).accordion({
  create: function( event, ui ) {}
});

Bind an event listener to the accordioncreate event:

1
 
$( ".selector" ).on( "accordioncreate", function( event, ui ) {} );

Example:

A simple jQuery UI Accordion

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>accordion demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
</head>
<body>
 
<div id="accordion">
  <h3><a href="#">Section 1</a></h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    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.</p>
  </div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</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.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>
 
<script>
$( "#accordion" ).accordion();
</script>
 
</body>
</html>

Demo:

]]> http://api.jqueryui.com/1.8/accordion/feed/ 0 .addClass() http://api.jqueryui.com/1.8/addClass/ http://api.jqueryui.com/1.8/addClass/#comments Mon, 08 Oct 2012 18:28:22 +0000 jquery http://api.jqueryui.com/1.8/?p=7

.addClass( className [, duration ] [, easing ] [, complete ] )Returns: jQuery

Description: Adds the specified class(es) to each of the set of matched elements while animating all style changes.

Similar to native CSS transitions, jQuery UI's class animations provide a smooth transition from one state to another while allowing you to keep all the details about which styles to change in CSS and out of your JavaScript. All class animation methods, including .addClass(), support custom durations and easings, as well as providing a callback for when the animation completes.

Not all styles can be animated. For example, there is no way to animate a background image. Any styles that cannot be animated will be changed at the end of the animation.

This plugin extends jQuery's built-in .addClass() method. If jQuery UI is not loaded, calling the .addClass() method may not fail directly, as the method still exists. However, the expected behavior will not occur.

Example:

Adds the class "big-blue" to the matched elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }
  .big-blue {
    width: 200px;
    height: 200px;
    background-color: #00f;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
</head>
<body>
 
<div></div>
 
<script>
$( "div" ).click(function() {
  $( this ).addClass( "big-blue", 1000, "easeOutBounce" );
});
</script>
 
</body>
</html>

Demo:

]]> http://api.jqueryui.com/1.8/addClass/feed/ 0 Autocomplete Widget http://api.jqueryui.com/1.8/autocomplete/ http://api.jqueryui.com/1.8/autocomplete/#comments Mon, 08 Oct 2012 18:28:23 +0000 jquery http://api.jqueryui.com/1.8/?p=9

Autocomplete Widgetversion added: 1.8

Description: Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

QuickNavExamples

Options

Methods

Events

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 choose previously selected values, such as entering tags for articles or entering email addresses from an address book. Autocomplete can also be used to populate associated information, such as entering a city name and getting the zip code.

You can pull data in from a local or remote source: Local is good for small data sets, e.g., an address book with 50 entries; remote is necessary for big data sets, such as a database with hundreds or millions of entries to select from. To find out more about customizing the data soure, see the documentation for the source option.

Additional Notes:

  • This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

Options

appendToType: Selector

Default: "body"
Which element the menu should be appended to. Override this when the autocomplete is inside a position: fixed element. Otherwise the popup menu would still scroll with the page.

autoFocusType: Boolean

Default: false
If set to true the first item will automatically be focused when the menu is shown.

delayType: Integer

Default: 300
The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive.

disabledType: Boolean

Default: false
Disables the autocomplete if set to true.

minLengthType: Integer

Default: 1
The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.

positionType: Object

Default: { my: "left top", at: "left bottom", collision: "none" }
Identifies the position of the suggestions menu in relation to the associated input element. The of option defaults to the input element, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.

sourceType: Array or String or Function( Object request, Function response( Object data ) )

Default: none; must be specified
Defines the data to use, must be specified.

Independent of the variant you use, the label is always treated as text. If you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source option - look for one that matches your use case, and check out the code.

Multiple types supported:
  • Array: An array can be used for local data. There are two supported formats:
    • An array of strings: [ "Choice1", "Choice2" ]
    • An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]
    The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.
  • String: 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 Autocomplete plugin does not filter the results, instead the request parameter term gets added to the URL, which the server-side script should use for filtering the results. The data itself can be in the same format as the local data described above.
  • Function: The third variation, a 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 term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
    • A response callback, which expects a single argument: 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. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

Methods

close()

Closes the Autocomplete menu. Useful in combination with the search method, to close the open menu.
  • This method does not accept any arguments.
Code examples:

Invoke the close method:

1
 
$( ".selector" ).autocomplete( "close" );

destroy()

Removes the autocomplete functionality completely. This will return the element back to its pre-init state.
  • This method does not accept any arguments.
Code examples:

Invoke the destroy method:

1
 
$( ".selector" ).autocomplete( "destroy" );

disable()

Disables the autocomplete.
  • This method does not accept any arguments.
Code examples:

Invoke the disable method:

1
 
$( ".selector" ).autocomplete( "disable" );

enable()

Enables the autocomplete.
  • This method does not accept any arguments.
Code examples:

Invoke the enable method:

1
 
$( ".selector" ).autocomplete( "enable" );

option( optionName )Returns: Object

Gets the value currently associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to get.
Code examples:

Invoke the method:

1
 
$( ".selector" ).autocomplete( "option" );

option()Returns: PlainObject

Gets an object containing key/value pairs representing the current autocomplete options hash.
  • This method does not accept any arguments.
Code examples:

Invoke the method:

1
 
$( ".selector" ).autocomplete( "option" );

option( optionName, value )

Sets the value of the autocomplete option associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.
Code examples:

Invoke the method:

1
 
$( ".selector" ).autocomplete( "option" );

option( options )

Sets one or more options for the autocomplete.
  • options
    Type: Object
    A map of option-value pairs to set.
Code examples:

Invoke the method:

1
 
$( ".selector" ).autocomplete( "option" );

widget()

Returns a jQuery object containing the menu element. Although the menu items are constantly created and destroyed, the menu element itself is created during initialization and is constantly reused.
  • This method does not accept any arguments.
Code examples:

Invoke the widget method:

1
 
$( ".selector" ).autocomplete( "widget" );

Events

change( event, ui )Type: autocompletechange

Triggered when the field is blurred, if the value has changed.
  • event
    Type: Event
  • ui
    Type: Object
    • item
      Type: jQuery
      The item selected from the menu, if any. Otherwise the property is null.
Code examples:

Initialize the autocomplete with the change callback specified:

1
2
3
 
$( ".selector" ).autocomplete({
  change: function( event, ui ) {}
});

Bind an event listener to the autocompletechange event:

1
 
$( ".selector" ).on( "autocompletechange", function( event, ui ) {} );

close( event, ui )Type: autocompleteclose

Triggered when the menu is hidden. Not every close event will be accompanied by a change event.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the autocomplete with the close callback specified:

1
2
3
 
$( ".selector" ).autocomplete({
  close: function( event, ui ) {}
});

Bind an event listener to the autocompleteclose event:

1
 
$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} );

create( event, ui )Type: autocompletecreate

Triggered when the autocomplete is created.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the autocomplete with the create callback specified:

1
2
3
 
$( ".selector" ).autocomplete({
  create: function( event, ui ) {}
});

Bind an event listener to the autocompletecreate event:

1
 
$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} );

focus( event, ui )Type: autocompletefocus

Triggered when focus is moved to an item (not selecting). The default action is to replace the text field's value with the value of the focused item, though only if the 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:

Initialize the autocomplete with the focus callback specified:

1
2
3
 
$( ".selector" ).autocomplete({
  focus: function( event, ui ) {}
});

Bind an event listener to the autocompletefocus event:

1
 
$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} );

open( event, ui )Type: autocompleteopen

Triggered when the suggestion menu is opened or updated.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the autocomplete with the open callback specified:

1
2
3
 
$( ".selector" ).autocomplete({
  open: function( event, ui ) {}
});

Bind an event listener to the autocompleteopen event:

1
 
$( ".selector" ).on( "autocompleteopen", function( event, ui ) {} );

select( event, ui )Type: autocompleteselect

Triggered when an item is selected from the menu. The default action 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:

Initialize the autocomplete with the select callback specified:

1
2
3
 
$( ".selector" ).autocomplete({
  select: function( event, ui ) {}
});

Bind an event listener to the autocompleteselect event:

1
 
$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );

Example:

A simple jQuery UI Autocomplete

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
</head>
<body>
 
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
 
<script>
$( "#autocomplete" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});
</script>
 
</body>
</html>

Demo:

]]> http://api.jqueryui.com/1.8/autocomplete/feed/ 0 Blind Effect http://api.jqueryui.com/1.8/blind-effect/ http://api.jqueryui.com/1.8/blind-effect/#comments Mon, 08 Oct 2012 18:28:23 +0000 jquery http://api.jqueryui.com/1.8/?p=11

Blind Effect

Description: The blind effect hides or shows an element by wrapping the element in a container, and "pulling the blinds"

  • blind

    • direction (default: "up")
      Type: String

      The direction the blind will be pulled to hide the element, or the direction from which the element will be revealed.

      Possible Values: vertical, horizontal.

The container has overflow: hidden applied, so height changes affect what's visible.

Example:

Toggle a div using the blind effect.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>blind demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
</head>
<body>
 
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
 
<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "blind" );
});
</script>
 
</body>
</html>

Demo:

]]> http://api.jqueryui.com/1.8/blind-effect/feed/ 0 Bounce Effect http://api.jqueryui.com/1.8/bounce-effect/ http://api.jqueryui.com/1.8/bounce-effect/#comments Mon, 08 Oct 2012 18:28:24 +0000 jquery http://api.jqueryui.com/1.8/?p=13

Bounce Effect

Description: The bounce effect bounces an element. When used with hide or show, the last or first bounce will also fade in/out.

  • bounce

    • distance (default: 20)
      Type: Number
      The distance of the largest "bounce" in pixels.
    • times (default: 5)
      Type: Integer
      The number of times the element will bounce. When used with hide or show, there is an extra "half" bounce for the fade in/out.

Example:

Toggle a div using the bounce effect.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bounce demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
</head>
<body>
 
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
 
<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" );
});
</script>
 
</body>
</html>

Demo:

]]> http://api.jqueryui.com/1.8/bounce-effect/feed/ 0 Button Widget http://api.jqueryui.com/1.8/button/ http://api.jqueryui.com/1.8/button/#comments Mon, 08 Oct 2012 18:28:24 +0000 jquery http://api.jqueryui.com/1.8/?p=15

Button Widgetversion added: 1.8

Description: Themable buttons and button sets.

QuickNavExamples

Options

Methods

Events

Button enhances standard form elements like buttons, inputs and anchors to themable buttons with appropiate hover 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, called Buttonset. Buttonset is 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 descendants and applying .button() to them. You can enable and disable a button set, which will enable and disable all contained buttons. Destroying a button set also calls each button's destroy method.

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

Additional Notes:

  • This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

Options

disabledType: Boolean

Default: false
Disables the button if set to true.

iconsType: Object

Default: { primary: null, secondary: null }
Icons to display, with or without text (see text option). By default, the primary icon is displayed on the left of the label text and the secondary is displayed on the right. The positioning can be controlled via CSS. The value for the primary and secondary properties must be a class name, e.g., "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" }.

labelType: String

Default: null
Text to show in the button. When not specified (null), the element's HTML content is used, or its value attribute if the element is an input element of type submit or reset, or the HTML content of the associated label element if the element is an input of type radio or checkbox.

textType: Boolean

Default: true
Whether to show the label. When set to false no text will be displayed, but the icons option must be enabled, otherwise the text option will be ignored.

Methods

destroy()

Removes the button functionality completely. This will return the element back to its pre-init state.
  • This method does not accept any arguments.
Code examples:

Invoke the destroy method:

1
 
$( ".selector" ).button( "destroy" );

disable()

Disables the button.
  • This method does not accept any arguments.
Code examples:

Invoke the disable method:

1
 
$( ".selector" ).button( "disable" );

enable()

Enables the button.
  • This method does not accept any arguments.
Code examples:

Invoke the enable method:

1
 
$( ".selector" ).button( "enable" );

option( optionName )Returns: Object

Gets the value currently associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to get.
Code examples:

Invoke the method:

1
 
$( ".selector" ).button( "option" );

option()Returns: PlainObject

Gets an object containing key/value pairs representing the current button options hash.
  • This method does not accept any arguments.
Code examples:

Invoke the method:

1
 
$( ".selector" ).button( "option" );

option( optionName, value )

Sets the value of the button option associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.
Code examples:

Invoke the method:

1
 
$( ".selector" ).button( "option" );

option( options )

Sets one or more options for the button.
  • options
    Type: Object
    A map of option-value pairs to set.
Code examples:

Invoke the method:

1
 
$( ".selector" ).button( "option" );

refresh()

Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programmatically.
  • This method does not accept any arguments.
Code examples:

Invoke the refresh method:

1
 
$( ".selector" ).button( "refresh" );

widget()Returns: jQuery

Returns a jQuery object containing the element visually representing the button.
  • This method does not accept any arguments.
Code examples:

Invoke the widget method:

1
 
$( ".selector" ).button( "widget" );

Events

create( event, ui )Type: buttoncreate

Triggered when the button is created.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the button with the create callback specified:

1
2
3
 
$( ".selector" ).button({
  create: function( event, ui ) {}
});

Bind an event listener to the buttoncreate event:

1
 
$( ".selector" ).on( "buttoncreate", function( event, ui ) {} );

Examples:

Example: A simple jQuery UI Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>button demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
</head>
<body>
 
<button>Button label</button>
 
<script>
$( "button" ).button();
</script>
 
</body>
</html>

Demo:

Example: A simple jQuery UI Buttonset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>button demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
</head>
<body>
 
<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>
 
<script>
$( "#radio" ).buttonset();
</script>
 
</body>
</html>

Demo:

]]> http://api.jqueryui.com/1.8/button/feed/ 0 Clip Effect http://api.jqueryui.com/1.8/clip-effect/ http://api.jqueryui.com/1.8/clip-effect/#comments Mon, 08 Oct 2012 18:28:25 +0000 jquery http://api.jqueryui.com/1.8/?p=17

Clip Effect

Description: The clip effect will hide or show an element by clipping the element vertically or horizontally.

  • clip

    • direction (default: "up")
      Type: String

      The plane in which the clip effect will hide or show its element.

      vertical clips the top and bottom edges, while horizontal clips the right and left edges.

Example:

Toggle a div using the clip effect.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clip demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
</head>
<body>
 
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
 
<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "clip" );
});
</script>
 
</body>
</html>

Demo:

]]> http://api.jqueryui.com/1.8/clip-effect/feed/ 0 :data() Selector http://api.jqueryui.com/1.8/data-selector/ http://api.jqueryui.com/1.8/data-selector/#comments Mon, 08 Oct 2012 18:28:25 +0000 jquery http://api.jqueryui.com/1.8/?p=19

data selector

Description: Selects elements which have data stored under the specified key.

  • jQuery( ":data(key)" )

    key: The data key.

The expression $( "div:data(foo)") matches a <div> if it has data stored via .data( "foo", value ).

Example:

Select elements with data and change their background color.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    float: left;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
</head>
<body>
 
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
 
<script>
$( "#one" ).data( "color", "blue" );
$( "#three" ).data( "color", "green" );
 
$( ":data(color)" ).each(function() {
  var element = $( this );
  element.css( "backgroundColor", element.data( "color" ) );
});
</script>
 
</body>
</html>

Demo:

]]> http://api.jqueryui.com/1.8/data-selector/feed/ 0 Datepicker Widget http://api.jqueryui.com/1.8/datepicker/ http://api.jqueryui.com/1.8/datepicker/#comments Mon, 08 Oct 2012 18:28:26 +0000 jquery http://api.jqueryui.com/1.8/?p=21

Datepicker Widgetversion added: 1.0

Description: Select a date from a popup or inline calendar

QuickNavExamples

Options

Methods

Events

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 when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span.

Keyboard interaction

While the datepicker is open, the following key commands are available:

  • PAGE UP: Move to the previous month.
  • PAGE DOWN: Move to the next month.
  • CTRL+PAGE UP: Move to the previous year.
  • CTRL+PAGE DOWN: Move to the next year.
  • CTRL+HOME: Move to the current month. Open the datepicker if closed.
  • CTRL+LEFT: Move to the previous day.
  • CTRL+RIGHT: Move to the next day.
  • CTRL+UP: Move to the previous week.
  • CTRL+DOWN: Move the next week.
  • ENTER: Select the focused date.
  • CTRL+END: Close the datepicker and erase the date.
  • ESCAPE: Close the datepicker without selection.

Utility functions

$.datepicker.setDefaults( settings )

Change the default settings for all date pickers.

Use the option() method to change settings for individual instances.

Code examples:

Set all date pickers to open on focus or a click on an icon.

1
2
3
4
5
6
 
$.datepicker.setDefaults({
  showOn: "both",
  buttonImageOnly: true,
  buttonImage: "calendar.gif",
  buttonText: "Calendar"
});

Set all date pickers to have French text.

1
 
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );

$.datepicker.formatDate( format, date, settings )

Format a date into a string value with a specified format.

The format can be combinations of the following:

  • d - day of month (no leading zero)
  • dd - day of month (two digit)
  • o - day of the year (no leading zeros)
  • oo - day of the year (three digit)
  • D - day name short
  • DD - day name long
  • m - month of year (no leading zero)
  • mm - month of year (two digit)
  • M - month name short
  • MM - month name long
  • y - year (two digit)
  • yy - year (four digit)
  • @ - Unix timestamp (ms since 01/01/1970)
  • ! - Windows ticks (100ns since 01/01/0001)
  • '...' - literal text
  • '' - single quote
  • anything else - literal text

There are also a number of predefined standard date formats available from $.datepicker:

  • ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601)
  • COOKIE - 'D, dd M yy'
  • ISO_8601 - 'yy-mm-dd'
  • RFC_822 - 'D, d M y' (See RFC 822)
  • RFC_850 - 'DD, dd-M-y' (See RFC 850)
  • RFC_1036 - 'D, d M y' (See RFC 1036)
  • RFC_1123 - 'D, d M yy' (See RFC 1123)
  • RFC_2822 - 'D, d M yy' (See RFC 2822)
  • RSS - 'D, d M y' (Same as RFC 822)
  • TICKS - '!'
  • TIMESTAMP - '@'
  • W3C - 'yy-mm-dd' (Same as ISO 8601)
Code examples:

Display the date in ISO format. Produces "2007-01-26".

1
 
$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );

Display the date in expanded French format. Produces "Samedi, Juillet 14, 2007".

1
2
3
4
5
6
 
$.datepicker.formatDate( "DD, MM d, yy", new Date( 2007, 7 - 1, 14 ), {
  dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort,
  dayNames: $.datepicker.regional[ "fr" ].dayNames,
  monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort,
  monthNames: $.datepicker.regional[ "fr" ].monthNames
});

$.datepicker.parseDate( format, value, settings )

Extract a date from a string value with a specified format.

The format can be combinations of the following:

  • d - day of month (no leading zero)
  • dd - day of month (two digit)
  • o - day of year (no leading zeros)
  • oo - day of year (three digit)
  • D - day name short
  • DD - day name long
  • m - month of year (no leading zero)
  • mm - month of year (two digit)
  • M - month name short
  • MM - month name long
  • y - year (two digit)
  • yy - year (four digit)
  • @ - Unix timestamp (ms since 01/01/1970)
  • ! - Windows ticks (100ns since 01/01/0001)
  • '...' - literal text
  • '' - single quote
  • anything else - literal text

A number of exceptions may be thrown:

  • 'Invalid arguments' if either format or value is null
  • 'Missing number at position nn' if format indicated a numeric value that is not then found
  • 'Unknown name at position nn' if format indicated day or month name that is not then found
  • 'Unexpected literal at position nn' if format indicated a literal value that is not then found
  • 'Invalid date' if the date is invalid, such as '31/02/2007'
Code examples:

Extract a date in ISO format.

1
 
$.datepicker.parseDate( "yy-mm-dd", "2007-01-26" );

Extract a date in expanded French format.

1
2
3
4
5
6
7
 
$.datepicker.parseDate( "DD, MM d, yy", "Samedi, Juillet 14, 2007", {
  shortYearCuroff: 20,
  dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort,
  dayNames: $.datepicker.regional[ "fr" ].dayNames,
  monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort,
  monthNames: $.datepicker.regional[ "fr" ].monthNames
});

$.datepicker.iso8601Week( date )

Determine the week of the year for a given date: 1 to 53.

This function uses the ISO 8601 definition of a week: weeks start on a Monday and the first week of the year contains January 4. This means that up to three days from the previous year may be included in the of first week of the current year, and that up to three days from the current year may be included in the last week of the previous year.

This function is the default implementation for the calculateWeek option.

Code examples:

Find the week of the year for a date.

1
 
$.datepicker.iso8601Week( new Date( 2007, 1 - 1, 26 ) );

$.datepicker.noWeekends

Set as beforeShowDay function to prevent selection of weekends.

We can provide the noWeekends() function into the beforeShowDay option which will calculate all the weekdays and provide an array of true/false values indicating whether a date is selectable.

Code examples:

Set the DatePicker so no weekend is selectable

1
2
3
 
$( "#datepicker" ).datepicker({
  beforeShowDay: $.datepicker.noWeekends
});

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 included after the main datepicker code. Each localization file adds its settings to the set of available localizations and automatically applies 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" ] );

Additional Notes:

  • This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

Options

altFieldType: Selector or jQuery or Element

Default: ""
An input element that is to be updated with the selected date from the datepicker. Use the altFormat option to change the format of the date within this field. Leave as blank for no alternate field.

altFormatType: 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 [[UI/Datepicker/formatDate|formatDate]] function

appendTextType: String

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

autoSizeType: Boolean

Default: false
Set to true to automatically resize the input field to accommodate dates in the current dateFormat.

beforeShowType: Function( Element input, Object inst )

Default: null
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.

beforeShowDayType: Function( Date date )

Default: null
A 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 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.

buttonImageType: String

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

buttonImageOnlyType: Boolean

Default: false
Whether the button image should be rendered by itself instead of inside a button element.

buttonTextType: String

Default: "..."
The text to display on the trigger button. Use in conjunction with the showOn option set to "button" or "both".

calculateWeekType: Function()

Default: jQuery.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.

changeMonthType: Boolean

Default: false
Whether the month should be rendered as a dropdown instead of text.

changeYearType: Boolean

Default: false
Whether the year should be rendered as a dropdown instead of text. Use the yearRange option to control which years are made available for selection.

closeTextType: String

Default: "Done"
The text to display for the close link. Use the showButtonPanel option to display this button.

constrainInputType: Boolean

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

currentTextType: String

Default: "Today"
The text to display for the current day link. Use the showButtonPanel option to display this button.

dateFormatType: String

Default: "mm/dd/yy"
The format for parsed and displayed dates. For a full list of the possible formats see the [[UI/Datepicker/formatDate|formatDate]] function.

dayNamesType: 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 option.

dayNamesMinType: 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.

dayNamesShortType: 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 option.

defaultDateType: Date or Number or 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 [[UI/Datepicker#option-dateFormat|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.
Multiple types supported:
  • Date: A date object containing the default date.
  • Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.
  • String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

durationType: or String

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").

firstDayType: Integer

Default: 0
Set the first day of the week: Sunday is 0, Monday is 1, etc.

gotoCurrentType: Boolean

Default: false
When true, the current day link moves to the currently selected date instead of today.

hideIfNoPrevNextType: Boolean

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

isRTLType: Boolean

Default: false
Whether the current language is drawn from right to left.

maxDateType: Date or Number or String

Default: null
The maximum selectable date. When set to null, there is no maximum.
Multiple types supported:
  • Date: A date object containing the maximum date.
  • Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.
  • String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

minDateType: Date or Number or String

Default: null
The minimum selectable date. When set to null, there is no minimum.
Multiple types supported:
  • Date: A date object containing the minimum date.
  • Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.
  • String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

monthNamesType: 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 option.

monthNamesShortType: 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 option.

navigationAsDateFormatType: Boolean

Default: false
Whether the prevText and nextText options should be parsed as dates by the [[UI/Datepicker/formatDate|formatDate]] function, allowing them to display the target month names for example.

nextTextType: String

Default: "Next"
The text to display for the next month link. With the standard ThemeRoller styling, this value is replaced by an icon.

numberOfMonthsType: Number or Array

Default: 1
The number of months to show at once.
Multiple types supported:
  • Number: The number of months to display in a single row.
  • Array: An array defining the number of rows and columns to display.

onChangeMonthYearType: Function( Integer year, Integer month, Object inst )

Default: null
Called 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.

onCloseType: Function( String dateText, Object inst )

Default: null
Called 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.

onSelectType: Function( String dateText, Object inst )

Default: null
Called 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.

prevTextType: String

Default: "Prev"
The text to display for the previous month link. With the standard ThemeRoller styling, this value is replaced by an icon.

selectOtherMonthsType: Boolean

Default: false
Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.

shortYearCutoffType: Number or String

Default: "+10"
The cutoff year for determining the century for a date (used in conjunction with [[UI/Datepicker#option-dateFormat|dateFormat]] 'y'). Any dates entered with a year value less than or equal to the cutoff year are considered to be in the current century, while those greater than it are deemed to be in the previous century.
Multiple types supported:
  • Number: A value between 0 and 99 indicating the cutoff year.
  • String: A relative number of years from the current year, e.g., "+3" or "-5".

showAnimType: String

Default: "show"
The name of the animation used to show and hide the datepicker. Use "show" (the default), "slideDown", "fadeIn", any of the jQuery UI effects. Set to an empty string to disable animation.

showButtonPanelType: Boolean

Default: false
Whether to show the button panel.

showCurrentAtPosType: Number

Default: 0
When displaying multiple months via the numberOfMonths option, the showCurrentAtPos option defines which position to display the current month in.

showMonthAfterYearType: Boolean

Default: false
Whether to show the month after the year in the header.

showOnType: String

Default: "focus"
When the datepicker should appear. The datepicker can appear when the field receives focus ("focus"), when a button is clicked ("button"), or when either event occurs ("both").

showOptionsType: Object

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

showOtherMonthsType: Boolean

Default: false
Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.

showWeekType: 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.

stepMonthsType: Number

Default: 1
Set how many months to move when clicking the previous/next links.

weekHeaderType: String

Default: "Wk"
The text to display for the week of the year column heading. Use the showWeek option to display this column.

yearRangeType: String

Default: "c-10:c+10"
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.

yearSuffixType: String

Default: ""
Additional text to display after the year in the month headers.

Methods

destroy()

Removes the datepicker functionality completely. This will return the element back to its pre-init state.
  • This method does not accept any arguments.
Code examples:

Invoke the destroy method:

1
 
$( ".selector" ).datepicker( "destroy" );

dialog( date [, onSelect ] [, settings ] [, pos ] )

Opens the datepicker in a dialog box.
  • date
    Type: String or Date
    The initial date.
  • onSelect
    Type: Function()
    A callback function when a date is selected. The function receives the date text and date picker instance as parameters.
  • settings
    Type: Options
    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.
Code examples:

Invoke the dialog method:

1
 
$( ".selector" ).datepicker( "dialog" );

getDate()Returns: Date

Returns the current date for the datepicker or null if no date has been selected.
  • This method does not accept any arguments.
Code examples:

Invoke the getDate method:

1
 
$( ".selector" ).datepicker( "getDate" );

hide()

Close a previously opened date picker.
  • This method does not accept any arguments.
Code examples:

Invoke the hide method:

1
 
$( ".selector" ).datepicker( "hide" );

isDisabled()Returns: Boolean

Determine whether a date picker has been disabled.
  • This method does not accept any arguments.
Code examples:

Invoke the isDisabled method:

1
 
$( ".selector" ).datepicker( "isDisabled" );

refresh()

Redraw the date picker, after having made some external modifications.
  • This method does not accept any arguments.
Code examples:

Invoke the refresh method:

1
 
$( ".selector" ).datepicker( "refresh" );

setDate( date )

Sets the 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.
  • date
    Type: Date
    The new date.
Code examples:

Invoke the setDate method:

1
 
$( ".selector" ).datepicker( "setDate" );

show()

Open the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.
  • This method does not accept any arguments.
Code examples:

Invoke the show method:

1
 
$( ".selector" ).datepicker( "show" );

Example:

A simple jQuery UI Datepicker.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datepicker demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
</head>
<body>
 
<div id="datepicker"></div>
 
<script>
$( "#datepicker" ).datepicker();
</script>
 
</body>
</html>

Demo:

]]> http://api.jqueryui.com/1.8/datepicker/feed/ 0 Dialog Widget http://api.jqueryui.com/1.8/dialog/ http://api.jqueryui.com/1.8/dialog/#comments Mon, 08 Oct 2012 18:28:27 +0000 jquery http://api.jqueryui.com/1.8/?p=23

Dialog Widgetversion added: 1.0

Description: Open content in an interactive overlay.

QuickNavExamples

Options

Methods

Events

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.

Additional Notes:

  • This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

Options

autoOpenType: Boolean

Default: true
If set to true, the dialog will automatically open upon initialization. If false, the dialog will stay hidden until the open() method is called.

buttonsType: Object or Array

Default: {}
Specifies which buttons should be displayed on the dialog. 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.
Multiple types supported:
  • Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.
  • Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.

closeOnEscapeType: Boolean

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

closeTextType: String

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

dialogClassType: String

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

disabledType: Boolean

Default: false
Disables the dialog if set to true.

draggableType: Boolean

Default: true
If set to true, the dialog will be draggable by the title bar. Requires the jQuery UI Draggable wiget to be included.

heightType: Number or String

Default: "auto"
The height of the dialog.
Multiple types supported:
  • Number: The height in pixels.
  • String: The only supported string value is "auto" which will allow the dialog height to adjust based on its content.

maxHeightType: Number

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

maxWidthType: Number

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

minHeightType: Number

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

minWidthType: Number

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

modalType: 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.

positionType: Object or String or Array

Default: { my: "center", at: "center", of: window }
Specifies where the dialog should be displayed. The dialog will handle collisions such that as much of the dialog is visible as possible.
Multiple types supported:
  • Object: Identifies the position of the dialog when opened. The of option defaults to the window, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.
  • String: A string representing the position within the viewport. Possible values: "center", "left", "right", "top", "botom".
  • Array: An array containing an x, y coordinate pair in pixel offset from the top left corner of the viewport or the name of a possible string value.

resizableType: Boolean

Default: true
If set to true, the dialog will be resizable. Requires the jQuery UI Resizable widget to be included.

showType: Number or String or Object

Default: null
If and how to animate the hiding of the dialog.
Multiple types supported:
  • Number: The dialog will fade out while animating the height and width for the specified duration.
  • String: The dialog will be hidden using the specified jQuery UI effect. See the list of effects for possible values.
  • Object: If the value is an object, then effect, duration, and easing properties may be provided. The effect property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used.

showType: Number or String or Object

Default: null
If and how to animate the showing of the dialog.
Multiple types supported:
  • Number: The dialog will fade in while animating the height and width for the specified duration.
  • String: The dialog will be shown using the specified jQuery UI effect. See the list of effects for possible values.
  • Object: If the value is an object, then effect, duration, and easing properties may be provided. The effect property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used.

stackType: 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.

titleType: 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.

widthType: Number

Default: 300
The width of the dialog, in pixels.

zIndexType: Integer

Default: 1000
The starting z-index for the dialog.

Methods

close()

Closes the dialog.
  • This method does not accept any arguments.
Code examples:

Invoke the close method:

1
 
$( ".selector" ).dialog( "close" );

destroy()

Removes the dialog functionality completely. This will return the element back to its pre-init state.
  • This method does not accept any arguments.
Code examples:

Invoke the destroy method:

1
 
$( ".selector" ).dialog( "destroy" );

disable()

Disables the dialog.
  • This method does not accept any arguments.
Code examples:

Invoke the disable method:

1
 
$( ".selector" ).dialog( "disable" );

enable()

Enables the dialog.
  • This method does not accept any arguments.
Code examples:

Invoke the enable method:

1
 
$( ".selector" ).dialog( "enable" );

isOpen()Returns: Boolean

Whether the dialog is currently open.
  • This method does not accept any arguments.
Code examples:

Invoke the isOpen method:

1
 
$( ".selector" ).dialog( "isOpen" );

moveToTop()

Moves the dialog to the top of the dialog stack.
  • This method does not accept any arguments.
Code examples:

Invoke the moveToTop method:

1
 
$( ".selector" ).dialog( "moveToTop" );

open()

Opens the dialog.
  • This method does not accept any arguments.
Code examples:

Invoke the open method:

1
 
$( ".selector" ).dialog( "open" );

option( optionName )Returns: Object

Gets the value currently associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to get.
Code examples:

Invoke the method:

1
 
$( ".selector" ).dialog( "option" );

option()Returns: PlainObject

Gets an object containing key/value pairs representing the current dialog options hash.
  • This method does not accept any arguments.
Code examples:

Invoke the method:

1
 
$( ".selector" ).dialog( "option" );

option( optionName, value )

Sets the value of the dialog option associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.
Code examples:

Invoke the method:

1
 
$( ".selector" ).dialog( "option" );

option( options )

Sets one or more options for the dialog.
  • options
    Type: Object
    A map of option-value pairs to set.
Code examples:

Invoke the method:

1
 
$( ".selector" ).dialog( "option" );

widget()Returns: jQuery

Returns a jQuery object containing the generated wrapper.
  • This method does not accept any arguments.
Code examples:

Invoke the widget method:

1
 
$( ".selector" ).dialog( "widget" );

Events

beforeClose( event, ui )Type: dialogbeforeclose

Triggered when a dialog is about to close. If canceled, the dialog will not close.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the dialog with the beforeClose callback specified:

1
2
3
 
$( ".selector" ).dialog({
  beforeClose: function( event, ui ) {}
});

Bind an event listener to the dialogbeforeclose event:

1
 
$( ".selector" ).on( "dialogbeforeclose", function( event, ui ) {} );

close( event, ui )Type: dialogclose

Triggered when the dialog is closed.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the dialog with the close callback specified:

1
2
3
 
$( ".selector" ).dialog({
  close: function( event, ui ) {}
});

Bind an event listener to the dialogclose event:

1
 
$( ".selector" ).on( "dialogclose", function( event, ui ) {} );

create( event, ui )Type: dialogcreate

Triggered when the dialog is created.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the dialog with the create callback specified:

1
2
3
 
$( ".selector" ).dialog({
  create: function( event, ui ) {}
});

Bind an event listener to the dialogcreate event:

1
 
$( ".selector" ).on( "dialogcreate", function( event, ui ) {} );

drag( event, ui )Type: dialogdrag

Triggered while the dialog is being dragged.
  • event
    Type: Event
  • ui
    Type: Object
    • position
      Type: Object
      The current CSS position of the dialog.
    • offset
      Type: Object
      The current offset position of the dialog.
Code examples:

Initialize the dialog with the drag callback specified:

1
2
3
 
$( ".selector" ).dialog({
  drag: function( event, ui ) {}
});

Bind an event listener to the dialogdrag event:

1
 
$( ".selector" ).on( "dialogdrag", function( event, ui ) {} );

dragStart( event, ui )Type: dialogdragstart

Triggered when the user starts dragging the dialog.
  • event
    Type: Event
  • ui
    Type: Object
    • position
      Type: Object
      The current CSS position of the dialog.
    • offset
      Type: Object
      The current offset position of the dialog.
Code examples:

Initialize the dialog with the dragStart callback specified:

1
2
3
 
$( ".selector" ).dialog({
  dragStart: function( event, ui ) {}
});

Bind an event listener to the dialogdragstart event:

1
 
$( ".selector" ).on( "dialogdragstart", function( event, ui ) {} );

dragStop( event, ui )Type: dialogdragstop

Triggered after the dialog has been dragged.
  • event
    Type: Event
  • ui
    Type: Object
    • position
      Type: Object
      The current CSS position of the dialog.
    • offset
      Type: Object
      The current offset position of the dialog.
Code examples:

Initialize the dialog with the dragStop callback specified:

1
2
3
 
$( ".selector" ).dialog({
  dragStop: function( event, ui ) {}
});

Bind an event listener to the dialogdragstop event:

1
 
$( ".selector" ).on( "dialogdragstop", function( event, ui ) {} );

focus( event, ui )Type: dialogfocus

Triggered when the dialog gains focus.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the dialog with the focus callback specified:

1
2
3
 
$( ".selector" ).dialog({
  focus: function( event, ui ) {}
});

Bind an event listener to the dialogfocus event:

1
 
$( ".selector" ).on( "dialogfocus", function( event, ui ) {} );

open( event, ui )Type: dialogopen

Triggered when the dialog is opened.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the dialog with the open callback specified:

1
2
3
 
$( ".selector" ).dialog({
  open: function( event, ui ) {}
});

Bind an event listener to the dialogopen event:

1
 
$( ".selector" ).on( "dialogopen", function( event, ui ) {} );

resize( event, ui )Type: dialogresize

Triggered while the dialog is being resized.
  • event
    Type: Event
  • ui
    Type: Object
    • originalPosition
      Type: Object
      The CSS position of the dialog prior to being resized.
    • position
      Type: Object
      The current CSS position of the dialog.
    • originalSize
      Type: Object
      The size of the dialog prior to being resized.
    • size
      Type: Object
      The current size of the dialog.
Code examples:

Initialize the dialog with the resize callback specified:

1
2
3
 
$( ".selector" ).dialog({
  resize: function( event, ui ) {}
});

Bind an event listener to the dialogresize event:

1
 
$( ".selector" ).on( "dialogresize", function( event, ui ) {} );

resizeStart( event, ui )Type: dialogresizestart

Triggered when the user starts resizing the dialog.
  • event
    Type: Event
  • ui
    Type: Object
    • originalPosition
      Type: Object
      The CSS position of the dialog prior to being resized.
    • position
      Type: Object
      The current CSS position of the dialog.
    • originalSize
      Type: Object
      The size of the dialog prior to being resized.
    • size
      Type: Object
      The current size of the dialog.
Code examples:

Initialize the dialog with the resizeStart callback specified:

1
2
3
 
$( ".selector" ).dialog({
  resizeStart: function( event, ui ) {}
});

Bind an event listener to the dialogresizestart event:

1
 
$( ".selector" ).on( "dialogresizestart", function( event, ui ) {} );

resizeStop( event, ui )Type: dialogresizestop

Triggered after the dialog has been resized.
  • event
    Type: Event
  • ui
    Type: Object
    • originalPosition
      Type: Object
      The CSS position of the dialog prior to being resized.
    • position
      Type: Object
      The current CSS position of the dialog.
    • originalSize
      Type: Object
      The size of the dialog prior to being resized.
    • size
      Type: Object
      The current size of the dialog.
Code examples:

Initialize the dialog with the resizeStop callback specified:

1
2
3
 
$( ".selector" ).dialog({
  resizeStop: function( event, ui ) {}
});

Bind an event listener to the dialogresizestop event:

1
 
$( ".selector" ).on( "dialogresizestop", function( event, ui ) {} );

Example:

A simple jQuery UI Dialog

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dialog demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
</head>
<body>
 
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>
 
</body>
</html>

Demo:

]]> http://api.jqueryui.com/1.8/dialog/feed/ 0