JQuery UI component set with more beautiful Wijmo: Found Wijmo

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 <div> elements.
$ (". Super") Select All "super" elements.
$ ("Div. super") select all <div> elements of the "super" type.
$ ("# Wow") Select the first element with the "wow" identifier.
$ ("Div # wow") Select the first <div> 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 <div> 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. <! -- JQuery reference -->
2.
3. <script src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type = "text/javascript"> </script>
4.
5. <script src = "http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type = "text/javascript"> </script>
6.
7. <! -Topic -->
8.
9. <link href = "http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel = "stylesheet" type = "text/css" title = "rocket-jqueryui"/>
10.
11. <! -- Css of the Wijmo component -->
12.
13. <link href = "http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.css" rel = "stylesheet" type = "text/css"/>
14.
15. <! -- JavaScript of the Wijmo component -->
16.
17. <script src = "http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0.min.js" type = "text/javascript"> </script>
18.
19. <script src = "http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.js" type = "text/javascript"> </script>
 
In the above markup syntax, you should note that some. js files are marked as *. min. js. These files have been simplified and compressed. In other words, all unnecessary characters have been deleted so that the webpage can load more quickly. You may also notice that there is no reference to an independent. js file. JavaScript For all parts has been merged into a file, for example, a wijmo-complete.2.0.0.min.js. If you want to link to a separate. js file, refer to the Dependencies topic of each component.
 
Create your first Wijmo Project
Now that you have mastered the main concepts of jQuery, you can start recruiting and creating your first project. In this example project, you will learn to add a Wijmo component, wijcalendar, to your project, and then customize some options.
The first step is to create an HTML page and add the project dependency link to the Note: Please refer to the latest dependency from CDN from http://www.wijmo.com/downloads/cdn.
 
1. <! -- JQuery reference -->
2.
3. <script src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type = "text/javascript"> </script>
4.
5. <script src = "http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type = "text/javascript"> </script>
6.
7. <! -- JavaScript of the Wijmo component -->
8.
9. <script src = "http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0.min.js" type = "text/javascript"> </script>
10.
11. <script src = "http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.js" type = "text/javascript"> </script>
 
You also want to add your CSS style sheet. You can also add the link to the cdn in the  
1. <! -Topic -->
2.
3. <link href = "http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel = "stylesheet" type = "text/css" title = "rocket-jqueryui"/>
4.
5. <! -- Css of the Wijmo component -->
6.
7. <link href = "http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.css" rel = "stylesheet" type = "text/css"/>
 
Place the following markup on the subject of the HTML document to create a wijcalendar html object:
 
1. <div id = "calendar1" style = "position: relative; left: 40px; top: 40px;"> </div>
 
Now, you need to add the following script to the  
1. <script type = "text/javascript"> $ (function () {$ ("# calendar1"). wijcalendar () ;}); </script>
 
View the complete wijcalendar markup Example page to learn about the final markup language effect.
This wijcalendar has predefined configurations for option settings, so you can use it immediately after Initialization is complete. If you open your project in a browser, you will find a calendar component with complete functions, as shown in:

 

 

But what should I do if I want to set the date of today and the following months not to be displayed on the calendar? Obviously, deleting them is not a wise choice. All you need to do is pass it as a parameter to the calendar component and set the showOterMonthDays option to false:

 
$ ("# Calendar1"). wijcalendar ({showOtherMonthDays: false });

Open your project in a web browser and you can see that the days of other months no longer appear on the calendar. It looks like this:

 


 

You can pass multiple parameters to a widget. To do this, you only need to add a comma after showOtherMonthDays: false and place the new parameter after it. The following example demonstrates how to pass the displayDate setting as a parameter in addition to the showOtherMonthDays option:

 
$ ("# Calendar1"). wijcalendar ({showOtherMonthDays: false, displayDate: new Date ('2017/25 ')});

It is so easy to add and customize a Wijmo component. However, this example only reveals what you can do through Wijmo components.

 

From powertoolsteam