JQueryUI component set with better Wijmo: Found Wijmo

Source: Internet
Author: User
Content 1 What is Wijmo? 2jQuery syntax 3jQuery selector 3.1jQuery element selector 3.2jQuery attribute selector 3.3jQueryCSS selector 4 file preparation function 5jQuery Option 6 How to reference Wijmo7 to create your first jQuer... SyntaxHighlighter. all ();

Content
1. What is Wijmo?
2 jQuery syntax
3 jQuery Selector
3.1 jQuery element Selector
3.2 jQuery attribute Selector
3.3 jQuery CSS Selector
4. File preparation
5 jQuery options
6. How to reference Wijmo
7. Create your first jQuery Project
 
What is Wijmo?
Wijmo is a suite of UI components based on jQuery UI. The Wijmo component optimizes client Web development and makes full use of jQuery's powerful capabilities to achieve outstanding performance and ease of use. All Wijmo components have over 20 themes and support ThemeRoller.
This guide introduces the concepts of jQuery and then lets you start your first Wijmo project. In this way, you can go deep into our demo library and learn more about what Wijmo can bring to you.
 
JQuery syntax
The jQuery syntax is designed to allow developers to easily select one or more DOM elements and then operate on one or more selected elements. The basic syntax is as follows:
 
1. $ (selector). action ()
 
$ Indicates that jQuery is used. (selector) is used to query one or more DOM elements. At the same time,. action () is executed on the element.
JQuery syntax example:
$ (This). hide () hides the current element.
$ ("P"). hide () hides all paragraphs.
$ ("P. wow"). hide () hides all "wow" paragraphs.
$ ("# Wow"). hide () hides an element whose ID is "wow.
 
JQuery Selector
Before using jQuery, you need to understand the core concepts of jQuery selector. The jQuery selector uses the CSS syntax so that developers can accurately select an element and modify its display effect. By using these selectors, you can use Attribute names, tag names, ID identifiers, or even select specific DOM elements or element groups based on the content. The following lists the selector types:
 
JQuery element Selector
In jQuery, you can use the CSS selector to select specific DOM elements, for example:
$ (This) Select the current DOM element.
$ ("Div") select all elements.
$ (". Super") Select All "super" elements.
$ ("Div. super") Select All "super" elements.
$ ("# Wow") Select the first element with the "wow" identifier.
$ ("Div # wow") Select the first element with the "wow" identifier.
 
JQuery attribute Selector
If you want to select elements through attributes rather than DOM objects, you can use XPATH expressions to select elements with specific attributes. For example:
$ ("[Href]") select all elements with the href attribute.
$ ("[Href =" # "]") select all elements with an href attribute value equal.
$ ("[Href! = "#"] ") Select all elements with the href attribute not equal.
 
JQuery CSS Selector
If you want to change the CSS attribute of a DOM element, you can use the CSS selector. For example, the following jQuery script changes the background color of all elements to Red:
 
1. Configure (nvidiv).css ("background-color", "red ");
 
File preparation
To prevent jQuery code from being run before the document is fully loaded, all jQuery functions should be placed in the middle of the $ (document). ready function. For example:
 
1. $ (document). ready (function (){
2.
3. // do something after the file preparation is complete.
4.
5 .});
 
If you like, you can use a shortened $ (document). ready function instead. For example:
 
1. $ (function (){
2.
3. // do something after the file preparation is complete.
4.
5 .});
 
All steps in the $ (document). ready function will be loaded when the DOM is loaded, and will be completed before the page content is loaded.
 
JQuery options
The jQuery option is a simple attribute that is passed as a parameter to a component. Each Wijmo part has a default configuration option. Of course, there may be some situations where you want to override the default values of the attributes of these custom parts. For example, let's assume that the default value of the maxValue option of the wijprogressbar component is 100, but you want this value to change to 85. Changing the maxValue option from its default value to 85 is as simple as passing a parameter to wijprogressbar:
 
1. $ ('# ssssbar'). wijprogressbar ({
2.
3. maxValue: 85
4.
5 .});
 
By setting the maxValue option to 85, the value range of the wijprogressbar component is changed from 0 to 85, and the default value of the minValue attribute is 0. If you want to change the minValue option to 25, you only need to add a comma after the maxValue parameter, and then write the new minValue parameter value:
 
1. $ ('# ssssbar'). wijprogressbar ({
2.
3. maxValue: 85,
4.
5. minValue: 25
6.
7 .});
 
You can pass more option values to the component through parameters, but you only need to ensure that they are separated by commas.
 
How to reference Wijmo
You can use the content delivery network (CDN) to easily load Wijmo to your web page. CDN makes it easier to use external libraries and deploy them to end users. CDN is a computer network all over the world. Ideally, if you are in the United States and you access a web page using CDN, you will obtain the content you need from the server host set up in the United States. If you are in India or China, even if you access the same page, the content will come from the server closest to your location. When a web browser loads content, it usually checks whether the file has been cached. You can benefit from using CDN. If a user has visited a site through the same CDN, they will keep the cached version of a file on their machine. The page you visit will load faster, because the supported content does not need to be downloaded again.
Wijmo has supported CDN since the very beginning. You can
Http://wijmo.com/downloads/cdn/find the cdnpage. The tags required to load Wijmo to your page look similar to the following syntax:
 
1.
2.
3.

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.