1 JQuery UI
2 for my use
2.1 Tabs
2.2 Accordion
2.2.1 Use the basic accordion
2.2.2 Implementation opens multiple labels
Nesting of 2.2.3 accordion
3 Apply Theme--theme roller to plugins
3.1 Change color
3.2 Change Icon
4 Related connections
JQuery UI
Sometimes you just have to Javascrip and write a lot of code to achieve a gradual animation effect. Until the advent of jquery, developers were freed from a whole bunch of tedious JS code, instead of a few lines of jquery code. Today, jquery has undoubtedly become one of the most popular JavaScript class libraries.
The jquery UI is a set of interface tools developed on the basis of jquery, almost including the plug-ins and animation effects you can think and use on the Web page, so that a code farmer with no artistic sense can make a dazzling interface. Let you do the interface when the "get" to use, and one thing is, it is free and open source, users can customize or even redesign according to needs.
2 for my use
Here's a tabs and accordion plugin to see how to use the jquery UI in your project. The detailed use of other Plug-ins documentation and demos can be learned here, just in English.
2.1Tabs
Tabs forms of Plug-ins are widely used in Web pages and desktop applications and can be used as menus or as tabs for a small portion of content
First of all, to create an MVC project in VS2010, to use the jquery UI, you first include the jquery and jquery UI script files in the project, and the related pages are referenced with <script> tags. After we created the MVC project, in the Scripts folder, the system has automatically included the jquery and jquery UI script files in the project (Figure 1).
Figure 1
Note: The jquery-1.5.1-vsdoc.js is a version that contains the full hint annotation, and there is an intelligent display of hints and annotations when writing code in VS; Jquery-1.5.1.js is a standard version, with Min being a condensed version to reduce download time on the client side. In the General page we will use a streamlined version, as long as the project folder contains Jquery-1.5.1-vsdoc.js,vs will automatically invoke the inside of the hint information.
All you need to do now is to include it in the page. Since the system has already referenced jquery to the page in the Site.mater page after the project was created, it means that all pages that use the master page default to jquery, so we just need to add the statement to the jquery UI file on the index page:
Copy Code code as follows:
<script src= "Http://www.cnblogs.com/Scripts/jquery-ui-1.8.11.min.js" type= "Text/javascript" ></script >
To render the tabs plugin on the page, we need to define a div and select it in the <script> script code to apply the tabs method to it.
Copy Code code as follows:
<div id= "Tabs" >
</div>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#tabs"). tabs ();
})
</script>
Running the program now won't see anything, because we haven't defined the tab in the main div to show, just defining a place to put tabs. Now the Tabs div defines an unordered list that determines the number of labels to display and the name of the label to display.
Copy Code code 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>
3 list items are defined here, the names are TABS1, TABS2, TABS3, and the three div below the list correspond to the three labels defined above to render the text to be displayed in each label. The page section is basically finished. To run the program:
Figure 2
It is worth noting that this step does not appear in Figure 0, the tabs style is not applied. There may be only one reason, that is the stylesheet. Then Google then really did not include the corresponding style sheet to the page. This is not mentioned in the official demo, also did not give the corresponding attention, I think the demo should not be omitted here if the important code, not every first time using the jquery UI people can quickly find the problem. For every novice, in this step to the need to go to Google why the effect did not come out. 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 last complete code is probably like this.
Copy Code code 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 MVC template is used to generate the project, so in the Content/themes/base folder has been placed in the jquery ui CSS stylesheet, if not, you need to download it separately and put it in the project, and the correct reference on the page.
Now to refresh the page, the effect is out.
Figure 4
Since it is controlled by a style sheet, it means that we can customize it, change colors, and so on, which is described in the following application style.
2.2Accordion
There is something to be said for the accordion control. Because for a thing, if it is not flexible, not easy to expand, will bring great inconvenience to users.
Figure 5
2.2.1 Use the basic accordion
Let's take a look at how to apply the accordion plug-in. We'll put it on our TABS1 page. Like tabs, the application is also very simple, just the corresponding DIV definition, and then, in the script always have to do the work is a code. is not experiencing the convenience of the jquery UI.
Remove the <P> tags and contents from the previous tabs-1 Div and replace them with the following code.
Copy Code code as follows:
<div id= "Tabs-1" >
<div id= "Accordion" >
<a href= "#" >section 1</a><div>
<p>content of section 1</p>
</div>
<a href= "#" >section 2</a><div>
<p>content of section 2</p>
</div>
<a href= "#" >section 3</a><div>
<p>content of section 3</p>
</div>
</div>
</div>
The perimeter div with ID accordion is the container, select it in the script code, and apply the accordion method to it.
Copy Code code as follows:
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#tabs"). tabs ();
$ ("#accordion"). accordion ();
})
</script>
After that, each <a> tag inside will be parsed into a clickable title,<a> tag followed by <div> to place the contents of this small block. The final effect is shown below.
Figure 6
There are two points to be aware of. One is the style, each jquery UI actually uses the stylesheet mentioned above, and if it's not previously referenced in the page, the accordion effect will not come out. The second is that the format here needs to be in strict accordance with a <a> tag and then with a <div> tag form, such a cross form if it is disrupted, the results will be you do not want to pull. For example, you are in <a> with two <div>
Copy Code code as follows:
<div id= "Accordion" >
<a href= "#" >section 1</a><div>
<p>content of section 1.1</p>
</div>
<div>
<p>content of section 1.2</p>
</div>
<a href= "#" >section 2</a><div>
<p>content of section 2</p>
</div>
<a href= "#" >section 3</a><div>
<p>content of section 3</p>
</div>
</div>
You thought the two div would be wrapped in the first secion, but the real effect would be a bit outrageous:
Figure 7
Isn't it a bit of a pit dad? So if I need to layout in section, I have to put two div or more. Then you have to put the content into a div and put it in the section1, so there's no mistake. To show that you really have two div, add a border to each div.
Copy Code code as follows:
<div id= "Accordion" >
<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>
<a href= "#" >section 2</a><div>
<p>content of section 2</p>
</div>
<a href= "#" >section 3</a><div>
<p>content of section 3</p>
</div>
Figure 8
2.2.2 Implementation opens multiple labels
JQuery UI Accordion One of the biggest mishap is also the most painful feature is that you can only open a tag, such as Section1 was opened, other secton must be in a closed state. If I want to implement a few tabs that are open at the same time, and I do not want to open the tag because I clicked on another tab and closed it off. Unfortunately, this plugin does not provide the corresponding option. The better thing is, in the official demo, clearly said, if you want to let multiple tags are open at the same time, then you do not use our accordion good, love what to use, anyway, we just want to let it only support a tag is opened.
Figure 9
Well, I'm not strong enough to rewrite this accordion plugin, so I Google "Expander" "Multi open Accordion" and so on, there are many friends there is such a demand, and there are some cattle to give some solutions, but are a bit complicated. At the end of the last, I suddenly epiphany, the definition of each section as a accordion not on the line. A acction can only open a secton at the same time, if I want each section to open and close without affecting the other parts, then the accordion instead of each of the sections, and accordion only defined a chapter.
It's a little dizzy. The following changes the code before, define the ID is accordion1,accordion2,accordion3 three div and put the corresponding content:
Copy Code code as follows:
<div id= "Tabs-1" >
<div id= "Accordion1" >
<div>content of section 1</div>
</div>
<div id= "Accordion2" >
<div>content of section 2</div>
</div>
<div id= "Accordion3" >
<div>content of section 3</div>
</div>
</div>
Then modify the script code:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#tabs"). tabs ();
$ ("#accordion1"). accordion ();
$ ("#accordion2"). accordion ();
$ ("#accordion3"). accordion ();
})
</script>
Run the program, found three Secton opened at the same time, and can not be closed! This is obviously not the result we want. The reason is very simple, if the above mentioned accordion this plug-in has and only a section is opened, each accordion we only defined a section, that this section should be in the open state, because it is only one, There's no other section to open after it's closed, so we just want to shut it out.
Fortunately, we can make this unique section available for folding and opening by setting the accordion collapsible to true. Just modify the script as follows:
Copy Code code 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, everything as we think.
Figure 10
Nesting of 2.2.3Accordion
Another problem is the nesting of accordion. At first I was in some trouble trying to implement this function.
For example, now we want to put a accordion in section 1, give it a name Subaccordion bar, need to note that this subaccordion must be placed in the "content of the Section1" Div, Any other form of placement will not have the correct effect. If you think you can add a <a> tag to the accordion 1 and add a <div>, you will correctly parse a accordion embedded in the Section1, and you are wrong. The final code and effect are as follows.
Copy Code code as follows:
<div id= "Tabs-1" >
<div id= "Accordion1" >
<div>
<div id= "Subaccortion" >
<div>content of Subaccortion</div>
</div>
</div>
</div>
<div id= "Accordion2" >
........
Figure 11
A little bit imperfect is Section1 the scroll bar appears, let's set the height attribute and let the inside of the son Accortion in the beginning of the folding state.
Modify the script code as follows:
Copy Code code 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
From here you can see that you can set any one of the tabs at the beginning to be folded or open. Of course, can also be a accortion disable off, so click on the title will not have folding open action.
3 Apply Theme--theme Roller 3.1 to the plugin change color
Now, we can easily use the jquery UI to make the interface. But imagine, so many people if all in use, will not make the whole Internet, the user opened a browser where to see is the same thing, will be a little touch north. And we also need to use these plug-ins to make some adjustments to meet the theme of our own website, hue and so on.
The JQuery UI supports user-defined styles, and you can even change the implementation code to make more advanced customizations, if you have the ability.
You can modify the corresponding CSS file to achieve the purpose of modifying the style, but this is not as good as the website of the theme website to download the theme you need, and can also edit the topic you want online.
After entering theme roller, choose the theme style you like to download.
Figure 13
After decompression, go to the CSS folder, copy the Jquery-ui-1.8.24.custom.css file and the images folder to the appropriate location in the project, and then apply the style when the page is correctly referenced. No matter what theme you apply, the name of the picture used in the theme is the same, but the color is different. Because this example is a project built with an MVC template, the picture that already exists in the Imges folder in the project and the picture that is downloaded may be part of the duplicate, ask if it is replaced when you copy it, and click Yes.
Figure 14
Figure 15
Then change the previously written style sheet reference to a reference to this customer style sheet
Copy Code code as follows:
<link href= "Http://www.jb51.net/Content/themes/base/jquery-ui-1.8.24.custom.css" type= "Text/css" Stylesheet "/>
Then go to refresh the page, the effect of the following figure:
Figure 16
Note that the relative position of jquery-ui-1.8.24.custom.css and images folders is best not to change, that is, put them together two, because the CSS file will call the images folder in the picture, if you change their relative position, you need to go to the CSS in all the pictures The calling path is corrected to make the theme work correctly.
3.2 Change Icon
It's not just the colors, the JQuery UI theme, but also the many icons we've preset to choose from, and we can see a lot of rich icons on the web. The colors of these icons correspond to the topics you have downloaded and are included in the Imges folder.
Figure 17
The question is how to specify exactly what we want in so many icons. For example, now you want to change the triangle icon to the left of the accordion heading to a line-shaped sharp corner shape.
Here are just a few tips for individuals. The mouse pointer to the icon you want, will appear ToolTip prompt text, this text corresponds to this icon.
Figure 18
Now that we have the name, we can go to the script code to make the changes.
Copy Code code 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 look at the effect, perfect.
Figure 19
Here is a basic introduction to the jquery UI usage process. Of course, the JQuery UI not only contains tabs and accordion plug-ins, other plug-ins and the use of the effect is not much, detailed use and set up methods can be in the official documents and demo to find the answer.
PostScript : Because jquery has been a mess, if combined with the jquery UI, the programmer's burden will be reduced to a greater extent. While enjoying these conveniences, we have to silently express our gratitude to those who are dedicated to jquery and the UI, and we can do our part to enrich the Plug-ins and UI libraries that extend jquery.
Example Source download: Http://xiazai.jb51.net/201210/yuanma/jQueryUIExample_jb51.rar
Related connections
JQuery UI website
http://jqueryui.com/
Theme Roller
http://jqueryui.com/themeroller/
jquery Learning: Zhang Zixiu "learning jquery from scratch" series:
Http://www.jb51.net/article/24908.htm
