Experiences and skills in using jQuery UI

1 jQuery UI
2 For My use
2.1 Tabs
2.2 Accordion
2.2.1 use basic Accordion
2.2.2 enable multiple tags
2.2.3 Accordion nesting
3. Apply Theme to the plug-in
3.1 change color
3.2 change the icon
4 related connections

JQuery UI

Sometimes you have to re-learn the javascrip and write a lot of code to achieve a gradient animation effect. Until the emergence of jQuery, developers are freed from a lot of tedious js Code, instead of several lines of jQuery code. Nowadays, jQuery has undoubtedly become one of the most popular JavaScript class libraries.
JQuery UI is a set of interface tools developed on the basis of jQuery, including the plug-ins and animation effects that you can think of and use on the webpage, it makes a dazzling interface for coders who only know the code word without any artistic sense. It allows you to use the interface as you like. Another point is that it is free and open-source, and users can customize or even redesign as needed.

2 For My use
The following describes how to use jQuery UI in a project using the Tabs and Accordion plug-ins. Detailed usage documents and demos of other plug-ins can be learned here, but only in English.
2.1 Tabs
Tabs plug-ins are widely used in web pages and desktop applications. They can be used as menus or Tabs for a small part of content.

First, create an MVC project in VS2010. To use jQuery UI, first include the jQuery and jQuery UI script files in the project, and reference the relevant pages with the <script> label. After creating an MVC project, the system has automatically included jQuery and jQuery UI script files in the Scripts folder (1 ).

Figure 1
Note: In the figure, the jquery-1.5.1-vsdoc.js is a version that contains the complete prompt comment, and the prompt information and comment are intelligently displayed when writing code in VS; The jquery-1.5.1.js is the standard version; the compressed and simplified version with min is used to reduce the download time on the client. In general, we will use a streamlined version on the page, as long as the project folder contains the jquery-1.5.1-vsdoc.js, VS will automatically call the prompt information inside.
What you need to do now is to include it in the page. After creating a project. jQuery has been referenced to the page on the Mater page, which means that all pages that use the master page reference jQuery by default, therefore, on the index page, we only need to add a declaration for the jQuery UI file:

Copy codeThe Code is as follows: <script src = "http://www.cnblogs.com/Scripts/jquery-ui-1.8.11.min.js" type = "text/javascript"> </script>

To present the Tabs plug-in on the page, we need to define a Div, select it in the <script> script code, and apply the tabs method to it.
Copy codeThe Code is as follows:
<Div id = "tabs">
</Div>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Tabs"). tabs ();
})
</Script>

Currently, running the program won't see anything, because we haven't defined the tab to be displayed in the main Div, just defined a place where tabs can be placed. Now, the tabs Div defines an unordered list. The list items determine the number of tags to be displayed and the name of the tags to be displayed.
Copy codeThe Code is as follows:
<Div id = "tabs">
<Ul>
<Li> <a href = "# tabs-1"> Tabs1 </a> </li>
<Li> <a href = "# tabs-2"> Tabs2 </a> </li>
<Li> <a href = "# tabs-3"> Tabs3 </a> </li>
</Ul>
<Div id = "tabs-1">
<P> content of tab one </p>
</Div>
<Div id = "tabs-2">
<P> content of tab two </p>
</Div>
<Div id = "tabs-3">
<P> content of tab three </p>
</Div>
</Div>

Three list items are defined here, named Tabs1, Tabs2, and Tabs3 respectively. The three divs under the List correspond to the three tags defined above, used to display the body of each label. The page is basically completed. Run the program:

Figure 2

It is worth noting that this step does not show the effect shown in Figure 0, and the tabs style is not applied. There is only one reason, that is, the style sheet. Later, Google did not include the corresponding style sheet to the page. This is not mentioned in the official Demo and I did not give the corresponding attention. I think the Demo here should not be omitted, not everyone who uses jQuery UI for the first time can quickly find the problem. For every newbie, you need to go to Google at this step to find out why it didn't work. It is easy to solve the problem after finding it. Add a reference to the jQuery UI style sheet on the page.

 

Figure 3

The complete code is probably like this.
Copy codeThe Code is as follows:
<Link href = "http://www.jb51.net/Content/themes/base/jquery.ui.all.css" type = "text/css" rel = "stylesheet"/>
<Script src = "http://www.jb51.net/Scripts/jquery-ui-1.8.11.min.js" type = "text/javascript"> </script>
<Div id = "tabs">
<Ul>
<Li> <a href = "# tabs-1"> Tabs1 </a> </li>
<Li> <a href = "# tabs-2"> Tabs2 </a> </li>
<Li> <a href = "# tabs-3"> Tabs3 </a> </li>
</Ul>
<Div id = "tabs-1">
<P> content of tab one </p>
</Div>
<Div id = "tabs-2">
<P> content of tab two </p>
</Div>
<Div id = "tabs-3">
<P> content of tab three </p>
</Div>
</Div>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Tabs"). tabs ();
})
</Script>

Because the project is generated using the MVC template, the CSS style sheet of jQuery UI has been put in the Content/themes/base folder. If not, you need to download the file separately and put it in the project, and reference it correctly on the page.

Now, refresh the page and the effect will be displayed.

 

Figure 4

Since it is controlled by a style sheet, it means we can customize it and change the color at will, which will be introduced in the subsequent application style.

2.2 Accordion

There is something to say about the Accordion control. This is because it is not flexible enough to expand, which may cause great inconvenience to users.

 

Figure 5

2.2.1 use basic Accordion

Let's take a look at how to apply the Accordion plug-in. We put it in our Tabs1 page. Like Tabs, it is also very simple to apply. You only need to define the corresponding Div, and then the work you need to do in the script is a piece of code. Have you experienced the convenience of jQuery UI.

Delete the <P> label and content in the previous tabs-1 Div and replace it with the following code.
Copy codeThe Code is as follows:
<Div id = "tabs-1">
<Div id = "accordion">
<H3>
<A href = "#"> Section 1 </a> <Div>
<P> content of section 1 </p>
</Div>
<H3>
<A href = "#"> Section 2 </a> <Div>
<P> content of section 2 </p>
</Div>
<H3>
<A href = "#"> Section 3 </a> <Div>
<P> content of section 3 </p>
</Div>
</Div>
</Div>

The peripheral Div with the id of accordion is a container. Select it in the script code and apply the accordion method to it.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Tabs"). tabs ();
$ ("# Accordion"). accordion ();
})
</Script>

Then, each <a> label is parsed into a clickable title. <a> label is followed by <div> to place the content of this small block. The final effect is as follows.

Figure 6

Note two points. First, style. Each jQuery UI actually uses the style sheet mentioned above. If it is not referenced in the page before, the Accordion effect will not be displayed here. Second, the format here must strictly follow a <a> label and then follow a <div> label form. If such cross form is disrupted, the displayed results will be what you don't want to pull. For example, in <a> with two <div>:
Copy codeThe Code is as follows:
<Div id = "accordion">
<H3>
<A href = "#"> Section 1 </a> <Div>
<P> content of section 1.1 </p>
</Div>
<Div>
<P> content of section 1.2 </p>
</Div>
<H3>
<A href = "#"> Section 2 </a> <Div>
<P> content of section 2 </p>
</Div>
<H3>
<A href = "#"> Section 3 </a> <Div>
<P> content of section 3 </p>
</Div>
</Div>

You thought the two divs would be wrapped in the first secion, but the actual effect would be a bit outrageous:

Figure 7

Is it a bit difficult. If I need to layout in the section, I have to put two divs or more. Then you must add the content to a div and put it in section1 so that no error will occur. To show that two divs are indeed placed, add a border to each Div.

Copy codeThe Code is as follows:
<Div id = "accordion">
<H3>
<A href = "#"> Section 1 </a> <Div>
<Div style = "border: 1px solid gray">
<P> content of section 1.1 </p>
</Div>
<Div style = "border: 1px solid gray">
<P> content of section 1.2 </p>
</Div>
</Div>
<H3>
<A href = "#"> Section 2 </a> <Div>
<P> content of section 2 </p>
</Div>
<H3>
<A href = "#"> Section 3 </a> <Div>
<P> content of section 3 </p>
</Div>

 

Figure 8

2.2.2 enable multiple tags

JQuery UI Accordion is one of the biggest and most painful features. At the same time, only one label can be opened. For example, if Section1 is clicked, other Secton must be closed. If I want to enable a few tags at the same time, and the tags I Don't Want To enable are closed because I click another tag. Unfortunately, this plug-in does not provide the corresponding Option. What's even more awesome is that the official Demo clearly states that if you want to make multiple tags open at the same time, you should not use our Accordion, we want to enable it to support only one tag.

Figure 9

Well, I am not strong enough to rewrite this Accordion plug-in, so I Google "expander" multi open accordion "and so on, there are still many friends who have such requirements, some cool people have also provided some solutions, but they are a bit complicated. Finally, I suddenly realized that it would be okay to define each section as accordion. One acction can only open one secton at the same time. If I want to enable or disable each section without affecting other sections, I should replace each section with accordion, in addition, only one section is defined in accordion.

It is a bit dizzy. Modify the previous Code and define the IDS as accordion1, accordion2, and accordion3, respectively, and put the corresponding content into them:
Copy codeThe Code is as follows:
<Div id = "tabs-1">
<Div id = "accordion1">
<H3> <a href = "#"> Section 1 </a> <Div> content of section 1 </div>
</Div>
<Div id = "accordion2">
<H3> <a href = "#"> Section 2 </a> <Div> content of section 2 </div>
</Div>
<Div id = "accordion3">
<H3> <a href = "#"> Section 3 </a> <Div> content of section 3 </div>
</Div>
</Div>

Then modify the script code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Tabs"). tabs ();
$ ("# Accordion1"). accordion ();
$ ("# Accordion2"). accordion ();
$ ("# Accordion3"). accordion ();
})
</Script>

Run the program and find that the three secton are enabled at the same time and cannot be closed! This is obviously not the result we want. The reason is very simple. If the accordion plug-in mentioned above has and only one section is opened, we define only one section in each accordion, this section should undoubtedly be in the open state. Because there is only one section, no other section can be opened after it is closed, so we just want to close it.
Fortunately, we can set accordion's collapsible to true so that this unique section can be folded and opened. You only need to modify the script as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Tabs"). tabs ();
$ ("# Accordion1"). accordion ({collapsible: true });
$ ("# Accordion2"). accordion ({collapsible: true });
$ ("# Accordion3"). accordion ({collapsible: true });
})
</Script>

Run the program again, Okay, as we thought.

 

Figure 10

2.2.3Accordion nesting

 

Another problem is accordion nesting. At first, I encountered some trouble trying to implement this function.

For example, we want to add another accordion in section 1 and name it subaccordion. Note that this subaccordion must be placed in the "content of section1" Div, no other placement will have the correct effect. If you add a <a> label and a <div> label to Accordion 1, an Accordion embedded in Accortion1 is correctly parsed in Section1, then you are wrong. The final code and effect are as follows.
Copy codeThe Code is as follows:
<Div id = "tabs-1">
<Div id = "accordion1">
<H3> <a href = "#"> Section 1 </a> <Div>
<Div id = "subaccortion">
<H3> <a href = "#"> subaccortion </a> <Div> content of subaccortion </div>
</Div>
</Div>
</Div>
<Div id = "accordion2">
........

 

Figure 11

 

A bit imperfect is that Section1 has a scroll bar. Next we will set the height attribute and make the sub-accortion in it collapsed at the beginning.

The script code is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Tabs"). tabs ();
$ ("# Accordion1"). accordion ({collapsible: true, autoHeight: false });
$ ("# Subaccortion"). accordion ({collapsible: true, active: false });
$ ("# Accordion2"). accordion ({collapsible: true, autoHeight: false });
$ ("# Accordion3"). accordion ({collapsible: true, autoHeight: false });
})
</Script>

Figure 12

As you can see, you can set whether a tag is in the folding or open state at the beginning. Of course, you can also disable an accortion so that clicking the title won't show up.

 3. Apply Theme to the plug-in3.1 change color

Now, we can easily use jQuery UI to make the interface. But imagine if so many people are using it, will it make the entire Internet the same? When a user opens a browser, what he sees is the same thing. We also need to make some adjustments when using these plug-ins to adapt to the themes and colors of our own websites.

JQuery UI supports user-defined styles. You can even change the implementation code for more advanced customization, if you have the ability.

You can modify the corresponding css file to modify the style, but it is better to go to the theme website on the official website to download the theme you need and edit the theme you want online.

After entering theme roller, select your favorite theme style and download it.

 

Figure 13

Decompress the file and copy the jquery-ui-1.8.24.m.m.css file and the images folder to the appropriate position in the project. Then, you must reference the file correctly on the page to apply the style. No matter what theme you use, the image names used by the theme are the same, but the colors are different. Because this example is a project generated using the MVC template, the existing images and downloaded images in the imges folder in the project may be partially duplicated. When copying the files, ask if you want to replace them. Click "OK.

 

Figure 14

 

Figure 15

In this case, replace the referenced style table with the reference of this customer style table.
Copy codeThe Code is as follows:
<Link href = "http://www.jb51.net/Content/themes/base/jquery-ui-1.8.24.custom.css" type = "text/css" rel = "stylesheet"/>

Then refresh the page. The effect is as follows:

 

Figure 16

The opposite location of jquery-ui-1.8.24.custom.css and images folders should not be changed, that is, put them together, because the css file will call the images in the images folder. If you change their relative location, you need to change all the call paths for images in css to make theme work normally.

3.2 change the icon

It's not just about color. In the jQuery UI topic, many icons are preset for us to choose from. On the webpage, we can see a lot of rich icons. The color of these icons corresponds to the downloaded topic, which is included in the imges folder.

 

Figure 17

 

The problem is how to accurately specify the one we want in so many map labels. For example, you want to change the triangle icon on the left of the Accordion title to a sharp angle in the line shape.

The following is a small tip provided by the individual. Hover your mouse over the desired icon, and The tooltip prompt text appears. This text corresponds to this icon.

 

Figure 18

Now that we get this name, we can modify it in the script code.

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Tabs"). tabs ();
$ ("# Accordion1"). accordion ({collapsible: true, autoHeight: false,
Icons: {"header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s "}
});
$ ("# Subaccortion"). accordion ({collapsible: true, active: false,
Icons: {"header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s "}
});
$ ("# Accordion2"). accordion ({collapsible: true, autoHeight: false,
Icons: {"header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s "}
});
$ ("# Accordion3"). accordion ({collapsible: true, autoHeight: false,
Icons: {"header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s "}
});
})
</Script>

Finally, let's take a look at the effect of perfect.

Figure 19

This section describes how to use jQuery UI. Of course, jQuery UI not only includes the tabs and accordion plug-ins, but also uses other plug-ins and effects, for detailed usage and setup methods, you can find the answer in the official documentation and Demo.

Postscript: JQuery has become a mess. If jQuery UI is combined with jQuery UI, the burden on programmers will be reduced to a greater extent. While enjoying these conveniences, We Have To silently thank those colleagues who have made great contributions to jQuery and UI, and at the same time, we can do our best, to enrich jQuery plug-ins and UI libraries.

Example source code download: http://xiazai.jb51.net/201210/yuanma/jQueryUIExample_jb51.rar

Related connections
Official jQuery UI website
Http://jqueryui.com/
Theme roller
Http://jqueryui.com/themeroller/
JQuery learning: Zhang Ziqiu's learning jQuery from scratch series:
Http://www.jb51.net/article/24908.htm