1 //The introduction of the JQuery Core library, using 2.0 <scripttype= "Text/javascript" src= "easyui/jquery.min.js" ></script>//Introduction JQuery Easyui Core Library, used here is 1.3.6 <scripttype= "Text/javascript" src= "Easyui/jquery.easyui.min.js" ></script >2 //introduction of Easyui Chinese hint <scripttype= "text/javascript" src= "Easyui/locale/easyui-lang-zh_cn.js" ></script> 3 //introduction of the JS file you developed <scripttype= "Text/javascript" src= "Js/index.js" ></script>4 //introduction of Easyui core UI file CSS <linkrel= "stylesheet" type= "Text/css " href= "Easyui/themes/default/easyui.css"/>5 //Introduction of Easyui icon file <linkrel= "stylesheet" type= "Text/css " href= "Easyui/themes/icon.css"/>
introduction of necessary Documents
1There are two ways to load a UI component: 1. Load using class mode; 2. Using the JS call to load2 3 //use class to load, format: easyui-component name4 5<divclass= "Easyui-dialog" id= "box" title= "title" style= "width:400px;height:200px;" > Content Section </div>6 7 PS: A UI component can be generated using the specified format, due to the role of a parser (Parser) for Jqueryeasyui. After parsing, you can see from the Firebug that the UI component changes after the HTML8 9 Ten One A //using the JS call to load - -$ (' #box '). dialog (); the -PS: It is generally recommended to use the second JS call to load, because a UI component has a lot of properties and methods, and it is extremely inconvenient to use the class usage. And according to the principle of JS and HTML separation, the second kind of improved the readability of the code.
how the UI component is loaded
1The Parser parser is dedicated to parsing and rendering various UI components, and in general, we do not need to use it to automate the parsing of UI components. Of course, there may be situations where manual parsing might be required in some circumstances. Manual parsing is generally valid when using class, such as setting class= "Easyui-dialog". 2 3 4 Parser Property5 6 Property name Default value Description7$.parser.autotruedefine whether the Easyui component is resolved automatically8 9 //turn off the automatic parsing function, and place it outside of $ (function () {}) $.parser.auto = false;Ten One Parser Method A - attribute Name parameter Description - $.parser.parse null or JQ selector resolves the specified UI component the $.parser.oncomplete callback function after parsing is complete - - //Resolve all UI - $.parser.parse (); + - //resolves the specified UI +$.parser.parse (' #box '); A at - PS: Using the specified UI resolution, the parent class container must be set to resolve to. For example: - -<divid= "box" > <divclass= "Easyui-dialog" title= "title" style= "width:400px;height:200px;" > <span> Content section </span> </div> </div> - - in //The UI component is parsed and executed, and placed outside the $ (function () {}) - to$.parser.oncomplete =function() {alert (' UI component parsing is complete! ‘); };
. Parser Parser
1. Introduction of necessary Documents 2. How to load UI components 4.Parser parser