Learn jquery from scratch (10) jQueryUI common function Combat _jquery

I. Summary

This series of articles will take you into the wonderful world of jquery, with many authors ' specific experiences and solutions, even if you can use jquery to find some cheats in your reading.

This article is the actual combat chapter. Use jQueryUI to accomplish most of the common functions of making a website.

Two. Foreword

After the company's internal collection, some features that are often implemented using JavaScript are sorted out. The protagonist of these features is not a dazzling jquery plugin, but a jquery UI.

If you're still downloading and installing plug-ins for a small special effect, find out that the bug hasn't been solved for you. Remember plug-in is the last choice we have no way.

There are too many disadvantages to using plug-ins:

1. Unfavorable to Maintenance

2. Increase Page size

3. It is not conducive to exchange and sharing between members, with learning costs.

4. Not robust enough to ensure that the plugin version is always updated and fixes all problems.

The following is the introduction of today's protagonist: JQuery UI

Three. JQuery UI

The jquery UI is part of jquery, a set of class libraries dedicated to UI interaction over jquery. Using the jquery UI enables low-level interactions, various advanced effects, animations, and customizable themes.

We can use it to easily build highly interactive Web applications.

Official home:
http://jqueryui.org/

Download:
Http://jqueryui.com/download

Examples and Documentation:
http://jqueryui.com/demos/

Skin:
http://jqueryui.com/themeroller/

The JQuery UI online site is powerful. The first is that you can assemble the features you want to download while downloading:

And for a variety of controls not only provide detailed parameter descriptions and examples, you can also change the skin of the instance at any time:

This article mainly explains the example, you can quickly start the jquery UI through the instance code. Using the jquery UI we can no longer use other plug-ins to complete most of the page application, said it is an official Super UI plugin is not too. The jquery UI class library file that contains all the features is 188K and is 45K after enabling gzip compression. Although larger but one load full site benefits. And the 45K size is acceptable in today's era of mutual understanding.

There is currently no Chinese tutorial for the jquery UI. Because this is the actual combat article, so will not carefully explain the basic content. In later chapters I'll take a basic tutorial on the jquery UI. Strive to be the first Chinese jquery UI tutorial.

Four. Preparatory work

I will have all the relevant files, including various class library files, theme templates placed in the following path:

http://www.dotnetapi.com/JSLib/

This path opens directory browsing, and you can find the files you need directly. The directory organization structure follows this series: (eight): The program organization described in the jquery implementation program.

You can also refer to Google files, Google's CDN faster and more guaranteed, see: Google's CDN

All references to the instance of this article use the Webconfig.resourceserver attribute:

@ "http://www.dotnetapi.com/";

}

Five. Pop-up Layer dialog box

Pop-up boxes are the most common and practical features. Let's take a look at some of the application scenarios on the Art Dragon Web.

1. Yi Long NET application scene example

(1) Static prompts class pop-up layer. The contents of the pop-up layer are fixed.

(2) Dynamic hint class pop-up layer. The pop-up layer content is changed according to the event source.

(3) Mask class pop-up layer. The background becomes dimmed and is not clickable when it pops up.

2. Application examples

A Dialog component that uses the JQuery UI. I easily achieve the above three kinds of effects.

The main feature of the dialog component is that you can drag (draggable) to change the size (resizable).

The complete code for the example is as follows:

<%@ Page language= "C #"%>

&lt;!DOCTYPE Html Public "-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;Html xmlns= "Http://www.w3.org/1999/xhtml"&gt; &lt;Head Id= "Head1" Runat= "Server"&gt; &lt;Title&gt;JQuery UI-Pop-up layer application instance Dialog&lt;/Title&gt; &lt;!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness, South-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--&gt; &lt;Link Rel= "stylesheet" Type= "Text/css" Href= "&lt;%=webconfig.resourceserver +"/Jslib/Jquery/Themes/Redmond/Style.Css"%&gt;" /&gt; &lt;Script Type= "Text/javascript" Src= "&lt;% =webconfig.resourceserver%&gt;/jslib/jquery/jquery-min-lastest.js"&gt;&lt;/Script&gt;&lt;script src="&lt;% =webconfig.resourceserver%&gt;/jslib/jquery/ui/jquery-ui-all-min-lastest.js"Type="Text/javascript"&gt;&lt;/script&gt; &lt;%If(False) {%&gt;&lt;script src="~/js/jquery-vsdoc-lastest.js"Type="Text/javascript"&gt;&lt;/script&gt; &lt;%}%&gt; &lt;script type="Text/javascript"&gt;/*========== must be placed in the header-loaded statement block. Try to avoid using ==========*/ &lt;/Script&gt;&lt;style type="Text/css"&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;!--Demo static hint class pop-up layer--&gt; &lt;divClass="Ui-widget ui-widget-content Ui-corner-all"style="width:700px; padding:5px; "&gt; &lt;h3&gt;demo. Share the same static pop-up layer, the popup layer content fixed: &lt;/h3&gt; &lt;div&gt; &lt;span id="SpanShowTip1"&gt; Display tips &lt;/span&gt; &lt;span id="SpanShowTip2"&gt; Display tips &lt;/span&gt; &lt;span id="SPANSHOWTIP3"&gt; Display tips &lt;/span&gt; &lt;span id="SPANSHOWTIP4"&gt; Show Tips &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;br/&gt; &lt;br/&gt; &lt;!--Demo dynamic hint class pop-up layer--&gt; &lt;divClass="Ui-widget ui-widget-content Ui-corner-all"style="width:700px; padding:5px; "&gt; &lt;h3&gt;demo. Each pop-up layer is different, and the pop-up content is stored in the element attribute of the event Source: &lt;/h3&gt; &lt;div&gt; &lt;span id="SpanShowDataTip1"Data="Color is red"&gt; Red &lt;/span&gt; &lt;span id="SpanShowDataTip2"Data="Color is green"&gt; Green &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;br/&gt; &lt;br/&gt; &lt;!--Demo Mask class pop-up layer--&gt; &lt;divClass="Ui-widget ui-widget-content Ui-corner-all"style="width:700px; padding:5px; "&gt; &lt;h3&gt;demo. Pop-up iframe &lt;/h3&gt; &lt;div&gt; &lt;input type="Button"Id="Btnshowiframe"Name="Btnshowiframe"Value="Show pop-up Layer"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--hint class pop-up layer--&gt; &lt;div id="Divtip"title="Custom title"&gt; &lt;p&gt; Popup layer &lt;/p&gt; &lt;/div&gt; &lt;!--mask class pop-up layer--&gt; &lt;div id="Diviframe"title="IFrame Pop-up layer"style="Text-align:center;"&gt; &lt;iframe src="Http://www.elong.com"Width="450px"height="230px"&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;script type="Text/javascript"&gt;/*========== user-defined methods ==========*/ /*========== Event Binding ==========*/$(function() {Static Hint class pop-up layer$("Span[id^=spanshowtip]"). CSS ("Cursor","Pointer"). Click (function(Event) { $("*"). Stop ();Event. Stoppropagation ();VarTop = $ (Event. Target). Offset (). Top + 20;VarLeft = $ (Event. Target). Offset (). Left; $("#divTip"). Dialog ("Option","Position", [left, top]); $("#divTip"). Dialog ("Open"); });Dynamic proposed class pop-up layer$("Span[id^=spanshowdatatip]"). CSS ("Cursor","Pointer"). Click (function(Event) { $("*"). Stop (); $("#divTip"). Dialog ("Close");Event. Stoppropagation ();VarTop = $ (Event. Target). Offset (). Top + 20;VarLeft = $ (Event. Target). Offset (). Left; $("#divTip"). HTML ($ (Event. Target). attr ("Data")); $("#divTip"). Dialog ("Option","Position", [left, top]); $("#divTip"). Dialog ("Open"); });Mask Class pop-up Layer$("#btnShowIframe"). Click (function(Event) {Event. Preventdefault ();Event. Stoppropagation (); $("#divIframe"). Dialog ("Open"); });Click Self Cancel Bubble$("#divTip, #divIframe"). Bind ("Click",function(Event) {Event. Stoppropagation (); });Document Object Click to hide all pop-up layers$ (document). Bind ("Click",function(Event) { $("#divTip"). Dialog ("Close"); $("#divIframe"). Dialog (/*========== the statement executed at load time ==========*/$ (function () {// Initializes the Hint class pop-up layer $ ( "#divTip"). Dialog ({show: null, Bgiframe: false , AutoOpen: false}); //initializes the Matte class pop-up layer $ ( "#divIframe"). Dialog ({show: null, Bgiframe: Span class= "KWRD" >false, AutoOpen: false, width:500, height:300, draggable: false, modal: true}); }); </script> body> >               

Effect as shown:

Static Hint class pop-up layer

Dynamic prompt class pop-up layer:

Mask Class Pop-up layer:

3. Key points to explain

(1) Calculate the pop-up layer position

Tip Class Pop-up box The most important thing is to calculate the position of the pop-up box. Gets to the event source through the event object and uses the offset () function to calculate the location of the event source relative to the document:

        var top = $ (var left = $ (event.target). offset (); 

Because it is relative to document, that is, the position of the upper-left corner of the page, you need to place the pop-up layer in the first layer of the BODY element. That is, the parent class is the body. if included in other elements, you need to determine the position style settings for any one of the parent classes to relative.

The computed top and left are the location of the event source, where the event source object is shown to be obscured. So it's usually necessary to do some manual offsets, such as top+20.

(2) Cancel bubbling and browser default behavior

If we bind the Document object to the event that the pop-up layer is closed after clicking, then it is important to cancel the bubbling of the event. Use the Stoppropagation () method of the event object to suppress bubbling.

Event.stoppropagation ();

For elements with default behavior, such as submit form behavior for submit buttons, hyperlink behavior of <a> elements, and so on, if we apply events on these elements, we also need to cancel their default behavior:

Event.preventdefault ();

(3) Set animation effect and cancel animation

You can set the animation effect when displaying dialog by setting the Show property of a dialog configuration item:

$ (' slide '});

Show defaults to NULL, no animation, can be using the following values:

' Pulsate '.

For the effects of these animations, you can view this page:

http://jqueryui.com/demos/show/

When an animation effect executes, if the user in this element to operate, there will be a variety of problems, such as positioning is not accurate. So if the animation is applied, we need to use the Stop () function to stop the animation when we operate it, usually by stopping animation with elements:

$ ("*"). Stop ();

But even if the animation is stopped, it can easily cause problems if the operation is too fast. So as to whether or not to use the animation need to weigh the decision.

(4) Dynamic hint class pop-up layer of data transmission

The dynamic hint class pop-up layer data is different, the example of this article is used to store the data on the element attribute data:

<IDData= "color is red"> Red </span>      

This is a simple and intuitive way. Easier to implement programmatically (especially when using the MVC programming model).

Another common way is to use JavaScript variables to store data. These two approaches have been explained in the 5th chapter:

Http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html

(5) Replacement theme

Note that the pop-up layer in the instance does not edit any styles for it, but it has been beautified after it has been displayed. This is because I quote the theme of the jquery UI:

 <!--Black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks, Humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness, vader--> <link rel= "stylesheet" "type=" text/css "href=" <%= Webconfig.resourceserver + "/jslib/jquery/themes/redmond/style. "%>" />         

There are a number of topics in the note that simply change the "Redmond" in the reference path to either of them, and the style of the pop-up layer changes immediately.

A bug in VS is that for the link tag, the statement block compilation in href is problematic, and in some cases <%%> is not edited. So I constructed the href attribute value using the way in the code above.

You can view the effects of each topic at the following address:

http://jqueryui.com/themeroller/#themeGallery

Six. Tab label

Do not refresh the page and switch between different tabs in the page:

This example is implemented through the tabs component of the jquery UI. The use of tabs components is as simple as dialog, and the default configuration enables the simplest tab, and more complex applications can be achieved by setting more options.

1. Application examples

Source:

<%@ Page language= "C #"%>
&lt;!DOCTYPE Html Public "-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;Html xmlns= "Http://www.w3.org/1999/xhtml"&gt; &lt;Head Id= "Head1" Runat= "Server"&gt; &lt;Title&gt;JQuery UI-Pop-up layer application instance Dialog&lt;/Title&gt; &lt;!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness, South-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--&gt; &lt;Link Rel= "stylesheet" Type= "Text/css" Href= "&lt;%=webconfig.resourceserver +"/Jslib/Jquery/Themes/Redmond/Style.Css"%&gt;" /&gt; &lt;Script Type= "Text/javascript" Src= "&lt;% =webconfig.resourceserver%&gt;/jslib/jquery/jquery-min-lastest.js"&gt;&lt;/Script&gt;&lt;script src="&lt;% =webconfig.resourceserver%&gt;/jslib/jquery/ui/jquery-ui-all-min-lastest.js"Type="Text/javascript"&gt;&lt;/script&gt; &lt;%If(False) {%&gt;&lt;script src="~/js/jquery-vsdoc-lastest.js"Type="Text/javascript"&gt;&lt;/script&gt; &lt;%}%&gt; &lt;script type="Text/javascript"&gt;/*========== must be placed in the header-loaded statement block. Try to avoid using ==========*/ &lt;/Script&gt;&lt;style type="Text/css"&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;!--Demo. Default tab and Ajax tab--&gt; &lt;div id="TABS1"style="width:300px;"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#tabs1-1"&gt;One&lt;/a&gt;&lt;/li&gt; &lt;!--Ajax Tab--&gt; &lt;li&gt;&lt;a href="Tabdata.htm"&gt;Two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs1-3"&gt;Three&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="Tabs1-1"&gt; &LT;P&GT;TAB1 content &lt;/p&gt; &lt;/div&gt; &lt;div id="Tabs1-3"&gt; &lt;p&gt;tab3 content &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;br/&gt; &lt;br/&gt; &lt;br/&gt; &lt;!--Demo. Collapsible tab--&gt; &lt;div id="TABS2"style="width:300px;"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#tabs2-1"&gt;One&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs2-2"&gt;Two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs2-3"&gt;Three&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="Tabs2-1"&gt; &LT;P&GT;TAB1 content &lt;/p&gt; &lt;/div&gt; &lt;div id="Tabs2-2"&gt; &lt;p&gt;tab2 content &lt;/p&gt; &lt;/div&gt; &lt;div id="Tabs2-3"&gt; &lt;p&gt;tab3 content &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;br/&gt; &lt;br/&gt; &lt;br/&gt; &lt;!--Demo. Mouse sliding is the Toggle tab--&gt; &lt;div id="TABS3"style="width:300px;"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#tabs3-1"&gt;One&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs3-2"&gt;Two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs3-3"&gt;Three&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="Tabs3-1"&gt; &LT;P&GT;TAB1 content &lt;/p&gt; &lt;/div&gt; &lt;div id="Tabs3-2"&gt; &lt;p&gt;tab2 content &lt;/p&gt; &lt;/div&gt; &lt;div id="Tabs3-3"&gt; &lt;p&gt;tab3 content &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type= "Text/javascript" > /*========== user customization Method ==========*//*== ======== Event Binding ==========*/$ (function () {}); /*========== the statement executed at load time ==========*/$ (function () {//default tabs $ (  "#tabs1"). tabs (); //collapsible tabs $ ( "#tabs2"). Tabs ({collapsible: true}); //mouse sliding is the toggle tabs $ ( "#tabs3"). Tabs ({event: </script> body> >               

Effect:

1. The default setting of tabs, two label content using AJAX to get

2. Fold tab again

3. Mouse sliding is the Switch tab

2. Points to explain

(1) Note the HTML structure in the tabs.

Use UL to build tags. Content div must be associated with the label, no associated DIV will not be processed directly display.

(2) You can use Ajax to not specify a content container, but you can also put Ajax content in a specified container.

<li><hreftitle= "Todo Overview"</a></Li<ID = "Todo_overview"</div>            

(3) Flexible event

TAB has many events:

Select, load, show, add, remove, enable, disable

Use these events to accomplish many complex tasks. You need to note the signature of the event:

$ ( ' #example '). Bind ( ' Tabsselect ', function (event, UI) {//Objects in the function Context:ui.tab //anchor element of the selected (clicked) tab Ui.panel //element, T Hat contains the Selected/clicked tab contents ui.index //zero-based index of the selected (clicked) Ta b});         

The first is the event object, and the second UI object is the extra parameter passed, and we can get the tab object, the tab's container, and the tab's index value.

For example, we can do the validation in the event:

$ (' #example '). Tabs ({
  function (returnisValid;}});  

or switch to the selected state immediately when you add a tab:

var $tabs = $ ( ' #example '). Tabs ({add: function (event, UI) {$tabs. Tabs ( ' SELECT ',  ' # ' + ui.panel.id); } });  
       

Ingenious, more apps you can also see the official documentation for the TAB component:

Http://jqueryui.com/demos/tabs

Seven. Accordion Menu

The accordion component with the jquery UI can implement the accordion menu. The effect is shown in the figure below.

Accordion Document Address: http://jqueryui.com/demos/accordion/

1. Instance effect

2. Instance Code

<%@ Page language= "C #"%>

&lt;!DOCTYPE Html Public "-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;Html xmlns= "Http://www.w3.org/1999/xhtml"&gt; &lt;Head Id= "Head1" Runat= "Server"&gt; &lt;Title&gt;JQuery UI-Accordion Menu Application Example accordion&lt;/Title&gt; &lt;!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness, South-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--&gt; &lt;Link Rel= "stylesheet" Type= "Text/css" Href= "&lt;%=webconfig.resourceserver +"/Jslib/Jquery/Themes/Redmond/Style.Css"%&gt;" /&gt; &lt;Script Type= "Text/javascript" Src= "&lt;% =webconfig.resourceserver%&gt;/jslib/jquery/jquery-min-lastest.js"&gt;&lt;/Script&gt;&lt;script src="&lt;% =webconfig.resourceserver%&gt;/jslib/jquery/ui/jquery-ui-all-min-lastest.js"Type="Text/javascript"&gt;&lt;/script&gt; &lt;%If(False) {%&gt;&lt;script src="~/js/jquery-vsdoc-lastest.js"Type="Text/javascript"&gt;&lt;/script&gt; &lt;%}%&gt; &lt;script type="Text/javascript"&gt;/*========== must be placed in the header-loaded statement block. Try to avoid using ==========*/ &lt;/Script&gt;&lt;style type="Text/css"&gt; Body {font-size:12px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;!--Demo. The default configuration of the accordion menu--&gt; &lt;div style="width:300px; Float:left; margin-left:20px; "&gt; &lt;div id="Accordion1"&gt; &lt;h3&gt;&lt;a href="#"&gt; Menu 1&lt;/a&gt;&lt;/h3&gt; &lt;div&gt; menu 1 content &lt;br/&gt; Menu 1 content &lt;br/&gt; Menu 1 content &lt;br/&gt; Menu 1 &lt;br Menu 1 Content &lt;br/&gt; Menu 1 content &lt;br/&gt; Menu 1 content &lt;br/&gt; &lt;/div&gt; &lt;h3&gt;&lt;a href="#"&gt; Menu 2&lt;/a&gt;&lt;/h3&gt; &lt;div&gt; Menu 2 content &lt;/div&gt; &lt;h3&gt;&lt;a href="#"&gt; Menu 3&lt;/a&gt;&lt;/h3&gt; &lt;div&gt; menu 3 content &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--Demo. Remove automatic height, foldable--&gt; &lt;div style="width:300px; Float:left; margin-left:20px; "&gt; &lt;div id="Accordion2"&gt; &lt;h3&gt;&lt;a href="#"&gt; Menu 1&lt;/a&gt;&lt;/h3&gt; &lt;div&gt; menu 1 content &lt;br/&gt; Menu 1 content &lt;br/&gt; Menu 1 content &lt;br/&gt; Menu 1 &lt;br Menu 1 Content &lt;br/&gt; Menu 1 content &lt;br/&gt; Menu 1 content &lt;br/&gt; &lt;/div&gt; &lt;h3&gt;&lt;a href="#"&gt; Menu 2&lt;/a&gt;&lt;/h3&gt; &lt;div&gt; Menu 2 content &lt;/div&gt; &lt;h3&gt;&lt;a href="#"&gt; Menu 3&lt;/a&gt;&lt;/h3&gt; &lt;div&gt; menu 3 content &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--Demo. Mouse sliding trigger, custom icon--&gt; &lt;div style="width:300px; Float:left; margin-left:20px; "&gt; &lt;div id="Accordion3"&gt; &lt;h3&gt;&lt;a href="#"&gt; Menu 1&lt;/a&gt;&lt;/h3&gt; &lt;div&gt; menu 1 content &lt;br/&gt; Menu 1 content &lt;br/&gt; Menu 1 content &lt;br/&gt; Menu 1 &lt;br Menu 1 Content &lt;br/&gt; Menu 1 content &lt;br/&gt; Menu 1 content &lt;br/&gt; &lt;/div&gt; &lt;h3&gt;&lt;a href="#"&gt; Menu 2&lt;/a&gt;&lt;/h3&gt; &lt;div&gt; Menu 2 content &lt;/div&gt; &lt;h3&gt;&lt;a href="#"&gt; Menu 3&lt;/a&gt;&lt;/h3&gt; &lt;div&gt; menu 3 content &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="Text/javascript"&gt;/*========== user-defined methods ==========*/ /*========== Event Binding ==========*/$(function() { });/*========== the statement executed at load time ==========*/$ (function () {// The default configuration of the Accordion menu $ ( "#accordion1"). accordion (); //cancels the automatic height, folding $ ( "#accordion2"). Accordion ({autoheight:true}); //mouse sliding trigger, custom icon $ ( "#accordion3"). Accordion ({icons: {header:  "Ui-icon-circle-arrow-e", headerselected:  "Ui-icon-circle-arrow-s"}, event: span class= "str" > "mouseover"}); }); </script> body> >               

3. Key points to explain

(1) Note that the height set too small problem

When the container containing the accordion control is highly designed for an hour, the content behind the container in FireFox3 is partially obscured by the accordion control. There is no such problem in IE.  Checked because the container height is less than the menu height caused. Therefore, we should be careful in the application of the container height should not be set too small.

(2) Some key properties

Autoheight: Sets whether the content height is automatically set to the container height.

Collapsible: Set whether collapsible

In general, the above two is used in conjunction with the thought that after folding will definitely change the menu height, will cause autoheight set to true invalid.

See the official documentation for more properties and event usage.

Eight. Summary

This chapter briefly describes the jQueryUI and uses the jquery UI to complete the pop-up layer, tabs, and accordion menu application examples. Using the jquery UI allows you to find no additional plug-ins. and easy to implement.

However, some features must be done using Plug-ins. The next one explains two plug-in instances: AutoComplete plugin AutoComplete and form verification plug-in jquery Validate.

This chapter source code downloads: Http://xiazai.jb51.net/201101/yuanma/Code-jQueryStudy-10.rar