JQuery plug-in usage Summary

Jquery plays a very powerful role in front-end data verification and processing. First, Jquery is the encapsulation of JS code, which is equivalent to our front-end framework, but it is only a basic js framework that can implement some simple functions. For some complex functions, it is very troublesome to implement it. But don't worry. The JQeury plug-in can solve many problems for us, and more importantly, it is very easy to use. A brief summary of the JQuery plug-ins used.

I. Jquery. treeview:

The implication is to present the page data in the form of a tree. Unlike dhtmlXtree in the previous blog, it displays data in html files, while html files mainly use UL and li for nested data. Let's take a look at how html stores data:

<Ul id = "browser" class = "filetree"> <li class = "folder"> <span class = "folder"> Process Management Engine System </span> <ul> <li class = "closed"> <span class = "folder"> fault management </span> <ul> <li> <span class = "file"> <a href = "troubleTicket/index.html" target = "workareaFrame"> fault ticket maintenance </a> </span> </li> <span class = "file"> <a href = "troubleTicket/approving.html" target = "workareaFrame"> fault pending ticket </a> </span> </li> <span class = "file"> 




The js Code of Jquery. treeview and the corresponding css file are also displayed on the page. Then, the simple Jquery code operation can be implemented:





$(document).ready(function(){$("#browser").treeview();});



In this way, the data is displayed as a tree. Of course, if we need to display the dynamic data in the database in this way, we need to use strings in the background to splice them into html files in this format and then obtain the display information, in fact, the use of dhtmlxTree is very similar, but the implementation method is different.
 
Ii. Jquery. form
This Jquery plug-in is provided to solve the problem of getting page data through Ajax. Normally, we use Form to submit the Form, and then provide the name attribute of the data to be submitted, so that we can obtain it through the MVC process framework such as struts2, so that we do not need to manually obtain it. Jquery. form makes up for the shortcomings of Ajax asynchronous communication. Here I wrote about Ajax operations in JQuery in my front blog.
 
Iii. jquery. pagination
This is used to help us score
The page Jquery plug-in can provide paging information similar to Baidu query. It is very practical to see this picture.
 
Let's take a look at how to use it. first introduce the relevant js code, and then write the div block that displays the paging information at the corresponding position on the webpage: <divid = "Pagination"> </div>, and then write the js Code:




// Generate the Pagination bar $ ("# Pagination") on the page "). pagination (result. totalsize, {callback: pageQuery, // callback method paging query function, above result. totalsize, which is the total number of pages items_per_page: pageSize, // number of data entries displayed per page prev_text: "Previous Page", next_text: "Next page", link_to: "javascript: void (0 )", // provide a clickable button current_page: pageIndex // current page index });



Of course, this is the simplest query of paging information. For more information, just compile it by imitating the example provided by the plug-in.
 
Iv. jquery. autocomplete
This plug-in is used to automatically complete database information. Look at Baidu and many other browsers. When we enter the information we want to query, as the number of input characters increases, the prompt information is constantly changing, this plug-in can also help us implement this function.


Implementation principle: You can import the entered characters to the backend for fuzzy match query, prompt the queried data, and then complete the automatic complementing function. Of course, we need to convert the data queried in the background to a certain format. We can imitate the example in the plug-in. Here let's take a look at the processing of the js Code at the front end:


// Specify the action path for fuzzy search based on input content $ ("# orgCode "). autocomplete ("/org/loadOrgByCode. action ", {cellSeparator:" | ", // split lineSeparator:" \ n ", minChars: 2, // enter at least two characters to automatically match maxItemsToShow: 10, // a maximum of 10 pieces of data can be displayed on one page. formatItem: function (row) {// The format of the prompt // alert (row [0] + ", "+ row [1] +", "+ row [2] +", "+ row [3]); return "code->" + row [0] + "name->" + row [1] + "type->" + row [2] ;}, onItemSelect: function (li) {// Add the prompt content to the text box $ ("# orgName "). val (li. extra [0]); $ ("# orgType "). val (li. extra [1]); $ ("# orgId "). val (li. extra [2]) ;}});


V. jquery. ui
This is a very powerful Jquery plug-in that can implement many special effects, such as auto-completion, just like the Jquery. autocomplete, tabs tab style, and calendar functions above ...... Here, we will briefly look at the implementation of tabs and calendars.


1, tab, first provide such html code in the page,
<Div id = "tabs"> <ul> <li> <a href = "# tabs-1"> User Information </a> </li> 


After the relevant js code is introduced, you can write a very simple code in the script Tag:


$(function(){$('#tabs').tabs();});

2. The calendar control is simple to use. When a single-host text box is displayed, the calendar is displayed for us to choose. It is still very good:




Var cfg = {"dateFormat": "yy-mm-dd", // Date Format: changeMonth: true, changeYear: true, showSecond: true, timeFormat: 'hh: mm: ss'} $ ("# expireTime "). datetimepicker (cfg); // set the specified text box and click the calendar control.




Jquery ui, which uses a few simple functions, is very powerful and practical. For more Jquery ui knowledge, you can go to the official website to view various materials, including API documentation, and some common examples, still very important: http://api.jqueryui.com/Of course, are English, but indeed the best source of information.
 
In summary, although there are not many plug-ins in Jquery, they are representative. It is most important to learn how to use plug-ins through some plug-ins experience. The IT industry is a fast-developing industry. If we want to stay in this industry, we need to keep learning. Of course, the learning ability is very important. All in all, don't be afraid of new things. New things are coming, prove that you want to improve ...............