Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

About jQuery UI usage experience and skills_jquery

WBOY
Release： 2016-05-16 17:49:31
Original
1169 people have browsed it

1 jQuery UI
2 works for me
2.1 Tabs
2.2 Accordion
2.2.1 Using basic Accordion
2.2.2 Opening multiple tabs
2.2.3 Accordion embedding Set
3 Apply theme to the plug-in——Theme Roller
　3.1 Change color scheme
　3.2 Change icon
4 Related links

jQuery UI

Sometimes you have to relearn javascript and write a lot of code just to achieve a gradient animation effect. Until the emergence of jQuery, developers were relieved from a lot of tedious js code and replaced it with a few lines of jQuery code. Today, jQuery has undoubtedly become one of the most popular JavaScript libraries.
jQuery UI is a set of interface tools developed based on jQuery. It includes almost all the plug-ins and animation special effects that you can think of and use on the web page, making it easier for a coder who has no sense of art and only knows how to code. It takes very little effort to create a stunning interface. It allows you to ‘take it’ and use it when making interfaces. Another point is that it is free and open source, and users can customize or even redesign it according to their needs.

2 works for me
Let’s take a look at how to use jQuery UI in the project using the Tabs and Accordion plug-ins. Detailed usage documentation and demonstrations of other plug-ins can be learned here, but they are only in English.
　2.1Tabs
Plug-ins in the form of Tabs are widely used in web pages and desktop applications. They can be used as menus or as tabs for a small part of the content

First create a new MVC project in VS2010. To use jQuery UI, you must first include jQuery and jQuery UI script files in the project, and the relevant pages must be referenced with the <script> tag. After we create an MVC project, in the Scripts folder, the system has automatically included jQuery and jQuery UI script files in the project (Figure 1). <br> <p style="TEXT-ALIGN: center"><img alt="" src="http://files.jb51.net/file_images/article/201210/2012101001451912.jpg"></p>Figure 1 <br> Note: jquery-1.5.1-vsdoc.js in the figure is a version that includes complete prompt comments. When writing code in VS, prompt information and comments will be intelligently displayed. ; jquery-1.5.1.js is the standard version; the one with min is the compressed and streamlined version, in order to reduce the download time on the client. We will use the simplified version in general pages. As long as the project folder contains jquery-1.5.1-vsdoc.js, VS will automatically call the prompt information inside. <br> All you need to do now is include it on the page. Since the system has already referenced jQuery to the page in the Site.Mater page after the project is created, this means that all pages that use the master page reference jQuery by default, so we only need to add the jQuery UI file to the index page. Statement: <br><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="11620" class="copybut" id="copybut11620" onclick="doCopy('code11620')"><u> Copy code </u></a></span> The code is as follows: </div> <div class="codebody" id="code11620"><script src="http:/ /www.cnblogs.com/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript" ></script>


In order to render Tabs on the page Plug-in, we need to define a Div, select it in the <script> script code, and apply the tabs method to it. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="3334" class="copybut" id="copybut3334" onclick="doCopy('code3334')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code3334"> <br><div id="tabs"> <br></div> <br><script type="text/javascript"> <br>$(document).ready(function () { <br>$("#tabs").tabs(); <br>}) <br></script>

You will not see anything when you run the program now, because we have not defined the tabs to be displayed in the main Div, we have just defined them. A place to put tabs. Now define an unordered list in the tabs Div. The list items determine the number of tabs to be displayed and the tab names to be displayed.
Copy code The code is as follows:




content of tab one



content of tab two




content of tab three





Three list items are defined here, named Tabs1, Tabs2, and Tabs3. The three Divs below the list correspond to the three labels defined above, which are used to present the text to be displayed in each label. The page part is basically completed. Run the program:

Picture 2

It is worth noting that the effect in Figure 0 does not appear at this step, and the tabs style is not applied. There can only be one reason, and that is the style sheet. Later, a Google search revealed that the corresponding style sheet was not included in the page. This is not mentioned in the official demo, and no corresponding attention is given. I think the demo here should not omit an important line of code. Not everyone who uses jQuery UI for the first time can quickly find the problem. . For every newbie, before reaching this step, you need to Google to find out why the effect is not coming out. Once you find the problem, it's easy to fix it. Add a reference to the jQuery UI stylesheet in the page.

Picture 3

The final complete code is probably like this.

Copy code The code is as follows:






content of tab one



content of tab two




content of tab three< ;/p>





Since the project is generated using the MVC template, the jQuery UI CSS style sheet has been placed in the Content/themes/base folder. If not, you need to download it separately and put it into the project, and add it to the page Quote correctly.

Now refresh the page again and the effect will appear.

Picture 4

Since it is controlled by a style sheet, it means that we can customize it at will, change colors, etc. This will be introduced in the application style later.

　2.2Accordion

There is something to be said about the Accordion control. Because for a thing, if it is not flexible enough and difficult to expand, it will bring great inconvenience to users.

Picture 5

　2.2.1 Using basic Accordion

Let’s first look at how to apply the Accordion plug-in. We'll put it on our Tabs1 page. Like Tabs, it is very simple to apply. You only need to define the corresponding Div. After that, all the work you need to do in the script is just one sentence of code. Have you experienced the convenience brought by jQuery UI?

Delete the

tag and content in the previous tabs-1 Div and replace it with the following code.

Copy code The code is as follows:




Section 1


content of section 1




Section 2



content of section 2




Section 3



content of section 3



< ;/div>


The surrounding Div with the id of accordion is the container. Select it in the script code and apply the accordion method to it.
Copy code The code is as follows:



After that, each tag inside will be parsed into a clickable title, and the tag will be followed by
Used to place the content of this nugget. The final effect is as shown below.

Picture 6

There are two points that need to be noted. The first is style. Every jQuery UI actually uses the style sheet mentioned above. If it has not been referenced into the page before, the Accordion effect here will not appear. Second, the format here needs to strictly follow the form of an tag followed by a

tag. If such a cross-form is disrupted, the result will be undesirable. For example, if you have followed by two
:

copy the code and the code is as follows:



Section 1


content of section 1.1




content of section 1.2




Section 2






Section 3



content of section 3





You originally thought that these two divs would be wrapped in the first section, but in fact the real effect would be a bit outrageous:

Picture 7

Isn’t it a bit cheating? So if I need to layout in the section, I have to put two Div or more. Then you must install these contents into a div and then put them in section1, so that there will be no mistakes. To show that there are indeed two Divs, add a border to each Div.

Copy code The code is as follows:


Section 1




content of section 1.1




content of section 1.2





Section 2



content of section 2




Section 3



content of section 3



Picture 8

　2.2.2 Implement opening multiple tabs

The biggest flaw and most annoying feature of jQuery UI Accordion is that only one tab can be opened at the same time. For example, if Section1 is clicked, other Sections must be closed. What if I want to have several tabs open at the same time, and I don't want the open tabs to be closed because I click on another tab. Unfortunately, this plug-in does not provide the corresponding Option. What's even more awesome is that it is clearly stated in the official Demo that if you insist on keeping multiple tabs open at the same time, then you should not use our Accordion. Use whatever you like. Anyway, we just want to make it. It only supports one tab being opened.

Picture 9

Well, I am not powerful enough to rewrite this Accordion plug-in, so I Google "expander" "multi open accordion" and the like. Indeed, there are still many friends who have such needs, and some excellent people have given them. There are some solutions, but they are all a bit complicated. Finally, I suddenly realized that it would be enough to define each section as an accordion. An action can only open one section at the same time. If I want each section to be opened and closed at will without affecting other sections, then just replace each section with an accordion, and only define one section in the accordion.

It sounds a bit confusing. Modify the previous code below, define three divs with IDs of accordion1, accordion2, and accordion3 and put the corresponding content:

Copy code The code is as follows:



< h3>Section 1
content of section 1


< ;div id="accordion2">

Section 2


content of section 2


Section 3
content of section 3




Then modify the script code:
Copy code The code is as follows:



Run the program and find that three sections are opened at the same time and cannot be closed! This is obviously not the result we want. The reason is very simple. If the above-mentioned accordion plug-in has and only one section is opened, and we only define one section in each accordion, then this section should undoubtedly be open, because there is only one section. , after closing it, no other section can be opened, so we can't close it even if we want to.
But fortunately, we can make this only section foldable and open by setting the accordion's collapsible to true. Just modify the script as follows:
Copy the code The code is as follows:



Run the program again, Okay, everything is as we thought.

Picture 10

　2.2.3Accordion nesting

Another problem is the nesting of accordions. I also encountered some trouble when trying to implement this function at first.

For example, now we want to put another accordion in section 1. Let’s name it subaccordion. What needs to be noted is that this subaccordion must be placed in the Div “content of section1”. Any other form of placement The correct effect will not appear even if it is played. If you think that adding an tag and a

directly to Accordion 1 will correctly parse an Accordion embedded in Accortion1 in Section1, then you are wrong. The final code and effect are as follows.

Copy code The code is as follows:



Section 1




subaccortion


content of subaccortion




.....

Figure 11

What is a little imperfect is the scroll bar appearing in Section1. Next, we set the height attribute and make the sub-accortion inside it be in a collapsed state at first.

Modify the script code as follows:

Copy the codeThe code is as follows:



Figure 12

From here you can already see that you can set whether any label is in a collapsed or open state at first. Of course, you can also disable an accommodation, so that clicking on the title will not cause the folding and opening action.

3 Apply a theme to the plug-in——Theme Roller　3.1Change the color

Now, we can easily use jQuery UI to create the interface. But just imagine, if so many people are using it, will it make the entire Internet the same? As soon as users open the browser, they will see the same thing wherever they go, and it will be a bit confusing. And we also need to make some adjustments when using these plug-ins to match the theme, tone, etc. of our own website.

jQuery UI supports user-defined styles, and you can even change the implementation code for more advanced customization, 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 going to the official website's theme website to download the theme you need, and you can also edit the theme you want online. .

After entering the theme roller, select the theme style you like and download it.

Picture 13

After unzipping, go to the css folder, copy the jquery-ui-1.8.24.custom.css file and images folder to the appropriate location in the project, and then need to correctly reference it on the page to apply the style . No matter what theme you use, the image names used in the theme are the same, just the colors are different. Since this example is a project generated using an MVC template, the pictures that already exist in the imges folder in the project and the downloaded pictures may have partially the same name. When copying, you will be asked whether to replace, and click OK.

Figure 14

Figure 15

At this time, change the previously written style sheet reference to a reference to the customer style sheet

Copy the code The code is as follows:



Then refresh the page, the effect is as follows:

Figure 16

It should be noted that it is best not to change the relative position of jquery-ui-1.8.24.custom.css and the images folder, that is, put them together, because the css file will call the images folder. For pictures, if you change their relative positions, you need to change all the call paths to the pictures in css to make the theme work properly.

　3.2 Change icon

Not only the colors, the jQuery UI theme also presets a lot of icons for us to choose from. We can see a lot of rich icons on the web page. The colors of these icons correspond to the theme you downloaded and are included in the imges folder.

Figure 17

The problem is how to specify the exact one we want among so many icons. For example, now I want to change the triangle icon on the left side of the Accordion title into a linear pointed shape.

The following is just a little tip provided by me. Point the mouse to the icon you want, and the tooltip text will appear. This text corresponds to the icon.

Figure 18

Now that we have the name, we can go to the script code to make modifications.

Copy code The code is as follows:



Finally let’s see the effect, perfect.

Picture 19

Here is a basic introduction to the use of jQuery UI. Of course, jQuery UI not only includes the two plug-ins of tabs and accordion. The use of other plug-ins and effects is also similar. Detailed usage and setting methods can be found in the official documentation and demo.

Postscript: Because jQuery is already so popular, if it 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 our colleagues who have contributed to jQuery and UI. At the same time, we can also do our part to enrich and expand jQuery's plug-ins and UI libraries.

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

Related links
jQuery UI official 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

Related labels：
jquery ui
source：php.cn
Previous article：Javascript code to implement horizontal or vertical scrolling of web content_javascript skills Next article：JavaScript animation objects support acceleration, deceleration, ease-in, and ease-out implementation code_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...
From 2024-04-05 09:26:49
0
1
1418
Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...
From 2024-04-04 18:40:04
0
1
3528
I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...
From 2024-04-04 17:27:27
0
1
417
Unable to send form data on Safari/Firefox iOS This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...
From 2024-04-04 12:53:48
0
1
303
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved