Basic methods and techniques for using JQuery UI

I. Overview

jquery UI is a widgets and interaction library built on top of the JQuery JavaScript Library, that's can use to build hig Hly Interactive Web applications. This are designed to get the speed on how JQuery UI works. Follow along below to get started.

Second, download the steps

Downloading the jquery UI requires 3 steps:

1. Select the controls you want to download;

2. Choose a style, theme;

3. Select the version, click Download, you can.

Third, the use of the UI method

1. Basic Use Method

You'll need to include these 3 files on any page to use JQuery UI widgets and interactions:

<link type= "Text/css" href= "Css/themename/jquery-ui-1.8.22.custom.css" rel= "Stylesheet"/>

<script type= "Text/javascript" src= "Js/jquery-1.4.4.min.js" ></script>

<script type= "Text/javascript" src= "Js/jquery-ui-1.8.22.custom.min.js" ></script>

Once you ' ve included the necessary files and you can add some jQuery widgets to your page. For example, the to make a DatePicker widget, you'll add a text INPUT element to your page and then call. DatePicker (); On it. Like this:html: <input type= "text" name= "date" id= "date"/>

Js:

$ (' #date '). DatePicker ();

2. Custom Style

JQuery UI basics:using Options

Each of the plugin in JQuery UI have a default configuration which is catered to the most basic and common use case. If you want a plugin to behave different from its default configuration, you can override each of its default settings Using "Options". Options is a set of properties passed into a jQuery UI widgets as an argument. For example, the slider widget has a option for orientation, which allows your specify whether the slider should be hor Izontal or vertical. To set the This option for a slider on your page, you just pass it in as a argument, like this:

$ (' #mySliderDiv '). Slider ({

Orientation: ' Vertical '

});

You can pass as many different options as you ' d like by following each one with a comma (except the last one):

$ (' #mySliderDiv '). Slider ({

Orientation: ' Vertical ',

min:0,

max:150,

Value:50

});

Just remember to surround your options with curly brackets {}, and your ' re well on your.

Iv. use of related controls

1. Button

button enhances standard form elements as button, input of type submit or reset or anchors to themable buttons with APPR Opiate mouseover and active styles.

<script>

$ (function () {

$ ("Input:submit, A, Button", ". Demo"). button ();

$ ("a", ". Demo"). Click (function () {return false;});

});

</script>

<div class= "Demo" >

<button>a Button element</button>

<input type= "Submit" value= "A submit Button" >

<a href= "www.nuoya66.com" >an anchor</a>

</div><!--End Demo--

<div class= "demo-description" style= "display:none; ">

<p>examples of the markup that can is used for buttons:a button element, a input of type submit and an anchor.< /p>

</div><!--End demo-description--

2. dialog box

A dialog is a floating window, 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 would automatically appear.

A Bottom button bar and semi-transparent modal overlay layer is common options that can added.

A Call to

$ (Foo). Dialog ()

Would initialize a dialog instance and would auto-open the dialog by default. If you want to reuse a dialog, the easiest-on-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 ')

Basic methods and techniques for using JQuery UI