Search within TutorialsPark

jQuery UI : Introduction


Learn how to obtain and setup jQuery UI files and resources.


jQuery UI : Getting jQuery UI

Getting jQuery UI is nothing but a set of plugins for jQuery, which adds new capabilities and functionalities to the core jQuery Library.

To download jQuery UI Library , visit here , and get the most latest stable version.

You can create a custom download of jQuery UI library and configure them according to project requirements.


jQuery UI : Setting the Theme

Before getting your customized jQuery UI resources, you need to decide the theme.

You can configure the library in infinite number of ways, you can alter the appearance of almost all aspects.jQuery UI website provides a tool as well for creating custom themes, and also a gallery of predefined themes.

To build you own theme visit here , click the themes section, you get to the ThemeRoller page which displays on the left a set of jQuery UI widgets to choose from.

You can use the Roll your Own Tab to change CSS of almost any element within the jQuery UI library.

The Default theme is called as UI lightness, but for the demos on this website we are gonna use the Hot Sneaks theme, which a flashy new theme.


jQuery UI : Getting a Custom jQuery UI Download

After creating a custom theme, you need to download the jQuery UI resources. jQuery UI allows you the option to Build Your Download using a special page.

This Build Your Download page has a list of jQuery UI components, divided into four functional groups : UI core, Interactions, Widgets, and Effects.

You can select only the features that you need for your project, thus creating a library of smaller size for the browser to download.


jQuery UI : Install jQuery UI for Development

The jQuery UI resources downloaded consists of all files needed for development and production. We will use throughout the tutorials the development files, which comprises of uncompressed source code.

The resources consists of JavaScript and CSS files both, there are also individual components and features in the ui and themes folder which can be used for limited set of jQuery UI features.


jQuery UI : Adding jQuery UI to your HTML Document.

To Add jQuery to your HTML document, include all javascript files and CSS files within the head Element.To ensure that it begins to load as soon all the page is loaded.

All images and CSS files should be within the same directory, it ensures that jQuery UI will be able to get all the resources it need.

Example: jQuery UI - Adding jQuery UI files to Document

Give it a TRY! » Note: There are two buttons, one using jQuery UI styles while the other button has no styles.


Javascript Conditionals: else

The Javascript condition else is used to create a branching construct which allows a two way decision.

If the condition within the if expression is evaluated as false, then the code block within the else part is executed.

Syntax: Javascript Conditional - else

Example: Javascript Conditional - else

Give it a TRY! » Note: The else statement must always be used after an if expression


Javascript Conditionals: if/else if

The Javascript branching construct if/ else if is used to create a multidecision structure.

If the first if is evaluated as true, then the code block within it is executed. Or else, the following if else conditions are evaluated and if found true, the code block within it get executed.

Syntax: Javascript if else/if

Example: Javascript if else/if

Give it a TRY! » Note: The final else serves as the default action, incase all other conditions are false.


Javascript Conditionals: Switch Statement

Javascript switch statement is used as an alternative to if / else if statement, it makes the program more neat and readable while dealing with multiple branching construct.

How does a switch Statement Works?

1. The value of the switch expression is evaluated once in the beginning

2. This switch expression value is then matched against the expressions, called as labels following the keyword case

3. If switch condition is satisfied by any of the cases , then the code block within that case is executed.

4. If none of the cases are matched then the control drops to the default case.

Here , the break statement is used to terminate the program if any of the case satisfies the condition, if omitted then all the cases are matched

Syntax: Javascript switch

Example: Javascript Conditionals Switch

Give it a TRY! »


Javascript Switch : Default Case using Fall Through

Javascript switch enables users to have same output for multiple cases, this is achieved using a fall-through to a common default

If you need a case statement to fall through, do not use the break for that particular case.

Example: Javascript Switch - Fall-Through

Give it a TRY! » Note: As a good development practise, include a comment denoting that the omission of break statement is intentional.