A practical example of getting started with JQuery UI

jquery UI Intro jquery UI Introduction

The jquery UI is a widget and interaction library built on the jquery JavaScript library that you can use to create highly interactive Web applications. Whether you are creating a highly interactive Web application or simply adding a date selector to a form control, the JQuery UI is the perfect choice. The jquery UI contains many widgets (widgets) that maintain state, so it is slightly different from the typical jquery plug-in usage pattern. All JQuery UI Widgets (widgets) Use the same pattern, so as long as you learn to use one of them, you know how to use other widgets (widgets).

JQuery UI features are simple to use:

Inherits the JQuery easy-to-use feature, provides a highly abstract interface, and short-term improvements to website usability.

Open Source Free

With the MIT & GPL Dual Protocol Authorization, it is easy to meet the various licensing requirements for free products to enterprise products.

Widely compatible

Compatible with all major desktop browsers. including IE 6+, Firefox, Safari, Opera +, Chrome 1+.

Light and fast

The components are relatively independent and can be loaded on demand to avoid wasting bandwidth and slowing down the Web page opening speed.

Standard Advanced

Supports Wai-aria, providing progressive enhancement through standard XHTML code to ensure low-end environmental accessibility.

Beautiful and changeable

Nearly 20 preset themes are available, and up to 60 configurable style rules can be customized, providing 24 background texture selections.

Open and Open

From structural planning to code writing, full opening, documentation, code, discussion, everyone can participate.

Strong Support

Google provides CDN content distribution network support for publishing code.

Complete Chinese

The development Kit contains 40 + language packs including Chinese.

Shortcomings, deficiencies

• 1. The code is not strong enough: the lack of comprehensive test cases, some components Bugs more, can not achieve enterprise-level product development requirements.
• 2. Inadequate framework planning: there is a lack of coordination between components and the lack of assistance with use.
• 3. Less control: Compared to Dojo, YUI, Ext JS and other mature products, less control can not meet the complex interface function requirements.

JQuery UI Download

: http://jqueryui.com/download/

JQuery UI is used in Web pages

At least 3 files should be introduced after the download is complete

<link rel= "stylesheet" type= "Text/css" href= "css/jquery-ui.min.css"/><script src= "http://libs.baidu.com/ Jquery/2.0.0/jquery.min.js "></script><script src=" Js/jquery-ui.min.js "type=" Text/javascript "charset = "Utf-8" ></script>

If you need the icon function, you need to put the images folder in your project CSS folder:

:

JQuery UI Practical Instance Date Selector

The date selector (Datepicker) is bound to a standard form input field.

Html

<!--date--><input type= "text" name= "data" id= "Data" value= ""/>

Js

Date control $ ("#data"). DatePicker ({    //month can change    changemonth:true,    //year can change    changeyear:true});

Drag to scroll

Enable the Draggable feature on any DOM element. Move the Draggable object by clicking the mouse and dragging in the viewport.

Css

#drag {   width:100px;   height:100px;   background:red;}

Html

<!--Drag the scroll--><div id= "Drag" ></div>

Js

Drag to drag to scroll $ ("#drag"). Draggable ({    scroll:true});

Scaling

Enable the resizable feature on any DOM element. Drag the right or bottom border to the desired width or height by dragging the mouse.

HTML shared Last Div#drag

Js

Scale $ ("#drag"). Resizable ({    //animated    animate:true,//    shadow effect    ghost:true});

Drag sort

Enable the sortable feature on any DOM element. By clicking and dragging the element to a new position in the list, the other entries are automatically adjusted. By default, sortable individual entries share draggable properties.

Html

<!--drag sort--><ul id= "sortable" >    <li>111111111</li>    <li>2222222222</li >    <li>33333333333</li></ul>

Js

Drag to sort $ ("#sortable"). sortable ();

Folding Panel

Clicking on the head expand/collapse is divided into the contents of each logical section, just Like a tab (tabs). You can optionally set whether to toggle the on/off state of each part when the mouse hovers.

Html

<!--folding panel--><div id= "accordion" >    
Js
Collapse panel $ ("#accordion"). accordion ();
dialog Box window
A dialog window is a overlay that is positioned in the viewport and is separated from the page content by an IFRAME (like a SELECT element). It consists of a title bar and a content area, which can be moved, resized, and closed by default by the ' X ' icon.
Html
<!--dialog box--><div id= "Dialog" title= "dialog" ><p> Display this content, you can move, click X to close </p></div>
Js
dialog box $ ("#dialog"). Dialog ();
Menu with icon
A menu with default configuration, disabled entries, and nested menus. Converted from a list, added a theme, and supported mouse and keyboard interaction. Try using the cursor keys to navigate the menu.
Css
The width of the menu bar. Ui-menu {width:150px;}
Html
<ul id= "Menu" >
By adding the class name Ui-icon ui-icon-disk call icon <li><a href= "#" ><span class= "Ui-icon ui-icon-disk" ></span> Save </a></li> <li><a href= "#" ><span class= "Ui-icon ui-icon-zoomin" ></span> Zoom in < /a></li> <li><a href= "#" ><span class= "Ui-icon ui-icon-zoomout" ></span> Zoom Out </a ></li>
Implement option unavailable by adding class name <li class= "ui-state-disabled" ><a href= "#" ><span class= "Ui-icon ui-icon-print" > </span> print ...</a></li> <li> <a href= "#" > Play </a> <ul> <li><a H ref= "#" ><span class= "Ui-icon ui-icon-seek-start" ></span> previous </a></li> <li><a href= "#" ><span class= "Ui-icon ui-icon-stop" ></span> stop </a></li> <li><a href= "#" ><span class= "Ui-icon ui-icon-play" ></span> play </a></li> <li><a href= "#" >< Span class= "Ui-icon ui-icon-seek-end" ></span> next </a></li> </ul> </li></ul>
Js
Menu bar $ (' #menu '). menu ();
Pre-load progress bar
Wait for the loading process and complete the progress bar.
Css
. ui-progressbar {    position:relative;  }  . Progress-label {    position:absolute;    left:50%;    top:4px;    Font-weight:bold;    text-shadow:1px 1px 0 #fff;  }
Html
Progress bar Initial state <div id= "ProgressBar" ><div class= "Progress-label" > Load ...</div></div>
Js
$ (function () {    var ProgressBar = $ ("#progressbar"),      Progresslabel = $ (". Progress-label");     Progressbar.progressbar ({      value:false,      change:function () {        Progresslabel.text ( Progressbar.progressbar ("value") + "%");      },      complete:function () {        progresslabel.text ("Complete! " );      }    });     function Progress () {      var val = progressbar.progressbar ("value") | | 0;       Progressbar.progressbar ("value", Val + 1);       if (Val <) {        setTimeout (progress);      }    }     SetTimeout (progress, +);  });
JQuery UI API Documentation
 
 

  
  
 
   
Effects
 
   
Effects Core
 
   
Interactions
 
   
Method Overrides
 
   
Methods
 
   
Selectors
 
   
theming
 
   
UI Core
 
   
Utilities
 
   
Widgets
 
  
 
 
Official Chinese Version API address: http://www.css88.com/jquery-ui-api/category/effects-core/
A practical example of getting started with JQuery UI