This article was reproduced from: http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html
The script library is used to load a whole bunch of stylesheets and script files, and in Easyui, in addition to being loaded in the usual way, provides a way to load using Easyloader. This component was created primarily to load components on demand. Under what circumstances should it be used?
Easyloader is used to help us automatically load the required script files and style files, so that we only need to reference the jquery script and the Easyloader script in the page, and Easyloader can help us analyze the dependencies of the modules and load the dependencies first. The module loads well and invokes the parse module to parse the page. The tags that start with class Easyui are converted into Easyui controls.
Below we use Easyloader to load the required modules using the Messager and dialog modules as an example.
Our page can simply be written to the following content. Note that the usual style sheets and a whole bunch of script references are not required.
1 <%@ Page Language="Java"pageencoding="UTF-8"%>2 <!DOCTYPE HTML>3 <HTML>4 <Head>5 <title>Easyui Getting Started--easyui the use of Easyloader</title>6 <!--Introducing jquery -7 <Scripttype= "Text/javascript"src= "${pagecontext.request.contextpath}/jquery-easyui-1.4.1/jquery.min.js"></Script>8 <!--introduction of Easyloader.js -9 <Scripttype= "Text/javascript"src= "${pagecontext.request.contextpath}/jquery-easyui-1.4.1/easyloader.js"></Script>Ten One <Scripttype= "Text/javascript"> A $(function(){ - //use Easyloader to load the relevant JS and CSS styles used by the dialog module - Easyloader.load ('Dialog',function(){ the /*to dynamically create Easyui dialog using javascript: - 1. Define a div and assign an ID to the DIV - 2. Use the jquery selector to select the Div, and then call the dialog () method to create the Easyui dialog - */ + //to create a Easyui dialog using a custom parameter - $('#dd2'). dialog ({ + Title:'dialog created with JavaScript', A Width: -, at Height: $, - Closed:false, - Cache:false, - modal:true - }); - }); in - Easyloader.locale= "ZH_CN"; to //Easyloader.load also has an alias using defined on the Window object + //use Easyloader to load the relevant JS and CSS styles used by the Messager module - using ("Messager", function () { the Alert ("Loaded successfully! "); * $("#btnAlert"). Click (function () { $ $.messager.alert ('Warning', 'The warning message');Panax Notoginseng }); - }); the }); + </Script> A the </Head> + - <Body> $ <%--To Create a Easyui dialog by using pure HTML: $ 1, define a div - 2, set the class style property of the div to Easyui-dialog, so you can turn the normal div into a easyui dialog. - --%> the <Divclass= "Easyui-dialog"ID= "DD1"title= "Easyui Dialog"style= "width:500px;height:300px;"> - Hello world!Wuyi </Div> the <DivID= "DD2">Dialog Content</Div> - <aID= "Btnalert"class= "Easyui-linkbutton">Pop-up Prompt box</a> Wu </Body> - </HTML>
Watch it! Only jquery scripts and Easyloader scripts do not have a whole bunch of styles and other script files.
The page works as follows:
Load is used to describe the module that needs to be loaded, which is a function defined in Easyloader, the first parameter of the function is the name of the module to be loaded, and the second parameter is the callback function after the load succeeds. This is used to prompt for a successful load.
Load-loaded modules have two formats, either a single module represented by a string, or an array of strings, loaded with multiple modules at the same time.
1 // 2 . Span style= "color: #0000ff;" >if (typeof name = = ' String ' ) { Span style= "color: #008080;" >3 add (name); 4 } 5 for (var i = 0; i < name.length; I++ Add (Name[i]); 7 8 }Easyloader.load also has an alias using defined on the Window object, as follows:
Therefore, the loaded code can also be written in this way.
1 function () {2 alert ("Loaded successfully! "); 3 });Once the load is successful, we can use the loaded modules in the code.
The page also uses class to illustrate a button, where class= "Easyui-linkbutton" is used, andEasyloader can also help us parse the special class name in the element and use the module directly on the page.
Easyloader will find the script in the Plugins subfolder, and the style sheet in the Themes folder in the folder where it is located. So you need to keep the files in the right place. However, Easyloader also provides a base property that specifies the starting point for finding plugins and scripts.
1 // Jquery-easyui root directory, when loading Easyloader, will automatically change depending on where you place it 2
In addition to base, there are several important properties
1 base: '. ',// This property is to load JS, record folder path 2// default Theme 3 CSS:true, 4 locale:null
For example, if you want to use a Chinese language pack, you can use the following. You will see that the text in the button of the Cue box has been converted from OK to "OK".
1 easyloader.locale = "ZH_CN"; 2 function () {3 alert ("Loaded successfully! "); 4 });The above is about Easyloader analysis and use.
Easyui Study Summary (ii)--easyloader Analysis and use (reprint)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
