Use of jQuery Easy UI

Use of jQuery Easy UI

I. Preliminary understanding

1. What is jQuery Easy UI?

JQuery Easy UI is a set of jQuery-based UI plug-ins. The goal of jQuery Easy UI is to help Web developers easily create a rich and beautiful UI interface.

Official Website http://www.jeasyui.com

2. What are the features of jQuery EasyUI?

(1) A set of jquery-based user interface plug-ins;

(2) source code encryption, paid for the commercial version

(3) You do not need to write a lot of javascript code to use EasyUI. Generally, you only need to write HTML tags to define the user interface;

(4) HTML5 support

(5) It is simple, but powerful. It can save time and resources when developing products;

(6) support expansion and control expansion as needed

3. is it compatible with earlier IE versions? I use version 1.3.6 and do not support IE8 or earlier versions.

Ii. introduce necessary documents:

Introduce the jQuery core library, which uses 2.0

<Script type = "text/javascript" src = "easyui/jquery. min. js"> </script>

Introduce the jQuery EasyUI core library, which is 1.3.6

<Script type = "text/javascript" src = "easyui/jquery. easyui. min. js"> </script>

Introduce EasyUI Chinese prompt information

<Script type = "text/javascript" src = "easyui/locale/easyui-lang-zh_CN.js"> </script>

Introduce self-developed JS files

<Script type = "text/javascript" src = "js/index. js"> </script>

Introduce CSS of EasyUI core UI File

Introduce EasyUI icon file

3. How to load the UI component:

1. Use the class method to load

Use class to load data. Format: easyui-component name

Content

Example:

JQuery Easy UI
 <Script type = "text/javascript" src = "easyui/jquery. min. js "> </script> <script type =" text/javascript "src =" easyui/jquery. easyui. min. js "> </script> <script type =" text/javascript "src =" easyui/locale/easyui-lang-zh_CN.js "> </script>
 
 Content

PS: a ui component can be generated using the specified format, because a Parser (Parser) of jQuery EasyUI plays a role. After parsing, you can see from Firebug

HTML after the UI component changes.

2. Use JS call to load

$ ('# Box'). dialog ();

Example:

JQuery Easy UI
 <Script type = "text/javascript" src = "easyui/jquery. min. js "> </script> <script type =" text/javascript "src =" easyui/jquery. easyui. min. js "> </script> <script type =" text/javascript "src =" easyui/locale/easyui-lang-zh_CN.js "> </script>
 
 <Script> // call the Loading Method Using js $ (function () {$ ("# box"). dialog () ;}) </script>Content

PS: It is generally recommended to use the second JS call for loading. Because a UI component has many attributes and methods, it is inconvenient to use class. In addition, according to the principle of JS and HTML separation,

The second method improves the readability of the Code.

3. Use easyload. js for smart Loading

// Delete the JS core file and CSS of jQuery EasyUI and introduce the easyloader. js File

<Script type = "text/javascript" src = "easyui/easyloader. js"> </script>

// JS Code

Easyloader. load ('Dialog ', function (){

$ ('# Box'). dialog ();

});

Example:

JQuery Easy UI
 <Script type = "text/javascript" src = "easyui/jquery. min. js "> </script> <script type =" text/javascript "src =" easyui/easyloader. js "> </script> <script type =" text/javascript "src =" easyui/locale/easyui-lang-zh_CN.js "> </script> <script> // use easyload. js smart loading (On-Demand Loading) $ (function () {easyloader. load ('Dialog ', function () {$ ("# box "). dialog () ;})}) </script>Content

Iv. Use Cases and precautions of the Parser

Parser is the parser. Although it only has a few lines of code, jQuery Easyui can render pages normally based on the class. Generally, we cannot use the solution.

Analyzer. This article mainly discusses how to use it under what circumstances and how to use it.

1. automatically call parser:

The reason why we only need to write the corresponding class in the page, Easyui can render the page successfully, because the parser in the default situation, when the document is loaded ($ (document ). ready) called

And render the entire page.

2. Manually call parper:

When the page DOM has been loaded and we use JavaScript code to create a node whose class attribute is the corresponding value of easyui, the node will not be rendered, because the parser is only loaded on the page.

Rendering the entire page without monitoring the whole page. Therefore, we need to manually call parser for rendering.

Parser example:

ParserDemo
 <Script type = "text/javascript" src = "easyui/jquery. min. js "> </script> <script type =" text/javascript "src =" easyui/easyloader. js "> </script> <script type =" text/javascript "src =" easyui/locale/easyui-lang-zh_CN.js "> </script> <script> $ (function () {// Why can I load the UI component only when the class attribute is used, because the page will be automatically executed once after DOM loading is complete $. parser. parse (); $. parser. onComplete = function () {alert ('dom loaded, automatically parsed, completed ') ;}}) function f () {/** after DOM loading, you cannot manually specify the class attribute to complete rendering, because parser only parses the class attribute once after DOM loading, and does not constantly monitor DOM page changes, so we need to explicitly call $. parser. parse (); */$ ("# box "). attr ("class", "easyui-dialog"); // $. parser. parse ("# box"); note: This is difficult, because when parse () carries a parameter, it renders the parent class of the element specified by the JQ selector $. parser. parse ("# p_box"); // It also has a callback function $. parser. onComplete = function () {alert ('Manual rendering resolution completed ') ;}}</script>Content

Click to download source code