Experiences and tips on using jQueryUI _ jquery-js tutorial

Source: Internet
Author: User
Recently, some plug-ins have been used in the project to create pages. Here we will share the use of jQueryUI, hoping to help new users. Download jQuery UI with source code at the end of the article
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 related pages with the script tag. 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:

The Code is as follows:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.