CSS classes for common styles Style Classes jQuery Mobile uses the following style classes: ui-corner-all Adds rounded corners to the element. ui-shadow Adds an item shadow around the element. ui-overlay-shadow Adds an overlay shadow around the element. The intended effect is for the element to appear to float above other elements. ui-mini Reduces the font size and scales down paddings proportionally to produce a miniature version of the elemen

Creates a button widget Buttons Buttons are coded with standard HTML input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Form buttons For ease of styling, the framework automatically converts any input element with a type of submit, reset, or button into a custom styled button - there is no need to add the data-role="button" attribute. However, if needed, you can directly call the button p

A single content area with multiple panels, each associated with a header in a list. Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. Tabs have a particular set of markup that must be used in order for them to work properly: The tabs themselves must be in either an ordered (<ol>) or unordered (<ul>) list Each tab "title" must be inside of a list item (<li>) and

Get the z-index for an element. The .zIndex() method is useful for finding the z-index of an element, regardless of whether the z-index is set directly on the element or on one of its ancestors. In order to determine the z-index, this method will start at the specified element and walk up the DOM until it finds an element that is positioned and has a z-index set. If no such element is found, then the method will return a value of 0. This method assume

Customizable, themeable tooltips, replacing native tooltips. Tooltip replaces native tooltips, making them themeable as well as allowing various customizations: Display other content than just the title, like inline footnotes or extra content retrieved via Ajax. Customize the positioning, e.g., to center the tooltip above elements. Add extra styling to customize the appearance, for warning or error fields. A fade animation is used by default to show

Generate and apply a unique id for the set of matched elements. Many widgets need to generate unique ids for elements. .uniqueId() will check if the element has an id, and if not, it will generate one and set it on the element. It is safe to call .uniqueId() on an element without checking if it already has an id. If/when the widget needs to clean up after itself, the .removeUniqueId() method will remove the id from the element if it was added by .uniq

Transfers the outline of an element to another element Very useful when trying to visualize interaction between two elements. The transfer element itself has the class ui-effects-transfer, and needs to be styled by you, for example by adding a background or border. transfer className String

Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument, 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, inc

Enhance a text input for entering numeric values, with up/down buttons and arrow key handling. The Spinner, or number stepper widget, is perfect for handling all kinds of numeric input. It allows users to type a value directly, or modify an existing value by spinning with the keyboard, mouse or scrollwheel. When combined with Globalize, you can even spin currencies and dates in a variety of locales. Spinner wraps a text input with two buttons to incre

Selects elements which the user can focus via tabbing. Some elements are natively tabbable, while others require explicitly setting a positive tab index. In all cases, the element must be visible in order to be tabbable. Elements of the following type are tabbable if they do not have a negative tab index and are not disabled: input, select, textarea, button, and object. Anchors are focusable if they have an href or positive tabindex attribute. area el