Widget Method Invocation

Widgets created with the widget factory use methods to change their state and perform actions after initialization. There are two ways widget methods can be invoked – through the plugin created by the widget factory, or by invoking the method on the element’s instance object. link Plugin InvocationTo invoke a method using the widget’s plugin, … Continue reading

Append Outside of Loops

Touching the DOM comes at a cost. If you’re appending a lot of elements to the DOM, you will want to append them all at once, rather than one at a time. This is a common problem when appending elements within a loop. 1 2 3 4 5 6 7 $.each( myArray, function( i, item … Continue reading

Using the classes Option

As of the 1.12 release, the jQuery UI widget factory includes a means of managing CSS class names through the classes option. This article will give you an overview of how the classes option works, and discuss what you can do with it. link Syntax overviewThe classes option is used to map structural class names … Continue reading

Detach Elements to Work with Them

The DOM is slow; you want to avoid manipulating it as much as possible. jQuery introduced detach() in version 1.4 to help address this issue, allowing you to remove an element from the DOM while you work with it. 1 2 3 4 5 6 7 8 var table = $( “#myTable” );var parent = … Continue reading

Widget Factory

The jQuery UI Widget Factory is an extensible base on which all of jQuery UI’s widgets are built. Using the widget factory to build a plugin provides conveniences for state management, as well as conventions for common tasks like exposing plugin methods and changing options after instantiation.

Theming jQuery UI

All jQuery UI plugins are designed to allow a developer to seamlessly integrate UI widgets into the look and feel of their site or application. Each plugin is styled with CSS and contains two layers of style information: standard jQuery UI CSS Framework styles and plugin-specific styles. The jQuery UI CSS Framework provides semantic presentation … Continue reading

Using jQuery UI ThemeRoller

link About ThemeRollerThemeRoller is a web app that offers a fun and intuitive interface for designing and downloading custom themes for jQuery UI. You can find ThemeRoller in the “Themes” section of the jQuery UI site, or by following this link: jQuery UI ThemeRoller link The ThemeRoller InterfaceThe interface for ThemeRoller is categorized into panels … Continue reading

How jQuery UI Works

jQuery UI contains many widgets that maintain state and therefore may have a slightly different usage pattern than typical jQuery plugins you are already used to. While the initialization is the same as most jQuery plugins, jQuery UI’s widgets are built on top of the Widget Factory which provides the same general API to all … Continue reading

Using jQuery UI

In addition to being available on CDNs and Download Builder, jQuery UI also integrates into a number of development environments.

Creating a Custom Theme with ThemeRoller

link Theming OverviewjQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content, and button colors, called a “swatch”. The framework comes with two defined themes A and B (light and dark) which can be used readily, removed, or overwritten. link Default Theme Swatch Mapping for ComponentsIf no theme swatch … Continue reading