forked from cocoo/easyui-bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patheasyloader.html
152 lines (138 loc) · 5.4 KB
/
easyloader.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>easyloader</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">
<h3>EasyLoader</h3>
<h4>Usage</h4>
<h5>Load EasyUI module</h5>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>easyloader.base = </span><span class="string">'../'</span><span>; </span><span class="comment">// set the easyui base directory</span><span> </span></span></li><li class=""><span>easyloader.load(<span class="string">'messager'</span><span>, </span><span class="keyword">function</span><span>(){ </span><span class="comment">// load the specified module</span><span> </span></span></li><li class="alt"><span> $.messager.alert(<span class="string">'Title'</span><span>, </span><span class="string">'load ok'</span><span>); </span></span></li><li class=""><span>}); </span></li></ol></div><pre class="JScript" name="code-easyloader" style="display: none;"> easyloader.base = '../'; // set the easyui base directory
easyloader.load('messager', function(){ // load the specified module
$.messager.alert('Title', 'load ok');
});
</pre>
<h5>Load script from an absolute url</h5>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>using(</span><span class="string">'http://code.jquery.com/jquery-1.4.4.min.js'</span><span>, </span><span class="keyword">function</span><span>(){ </span></span></li><li class=""><span> <span class="comment">// ...</span><span> </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre class="JScript" name="code-easyloader" style="display: none;"> using('http://code.jquery.com/jquery-1.4.4.min.js', function(){
// ...
});
</pre>
<h5>Load script from relative url</h5>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span class="comment">// the script path relative to easyui directory</span><span> </span></span></li><li class=""><span>using(<span class="string">'./myscript.js'</span><span>, </span><span class="keyword">function</span><span>(){ </span></span></li><li class="alt"><span> <span class="comment">// ...</span><span> </span></span></li><li class=""><span>}); </span></li></ol></div><pre class="JScript" name="code-easyloader" style="display: none;"> // the script path relative to easyui directory
using('./myscript.js', function(){
// ...
});
</pre>
<h4>Properties</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>modules</td>
<td>object</td>
<td>Predefined modules.</td>
<td></td>
</tr>
<tr>
<td>locales</td>
<td>object</td>
<td>Predefined locales.</td>
<td></td>
</tr>
<tr>
<td>base</td>
<td>string</td>
<td>The easyui base directory, must end with '/'.</td>
<td>The base directory will be auto setted relative to easyload.js</td>
</tr>
<tr>
<td>theme</td>
<td>string</td>
<td>The name of theme that defined in 'themes' directory</td>
<td>default</td>
</tr>
<tr>
<td>css</td>
<td>boolean</td>
<td>Defines if loading css file when loading module</td>
<td>true</td>
</tr>
<tr>
<td>locale</td>
<td>string</td>
<td>The locale name</td>
<td>null</td>
</tr>
<tr>
<td>timeout</td>
<td>number</td>
<td>Timeout value in milliseconds. Fires if a timeout occurs.</td>
<td>2000</td>
</tr>
</tbody></table>
<h4>Defined locales</h4>
<ul>
<li>af</li>
<li>bg</li>
<li>ca</li>
<li>cs</li>
<li>cz</li>
<li>da</li>
<li>de</li>
<li>en</li>
<li>es</li>
<li>fr</li>
<li>nl</li>
<li>tr</li>
<li>zh_CN</li>
<li>zh_TW</li>
</ul>
<h4>Events</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameters</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>onProgress</td>
<td>name</td>
<td>Fires when a module is loaded successfully.</td>
</tr>
<tr>
<td>onLoad</td>
<td>name</td>
<td>Fires when a module and it's dependencies are loaded successfully.</td>
</tr>
</tbody></table>
<h4>Methods</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>load</td>
<td>module, callback</td>
<td>Load the specified module. When load success a callback function will be called.<br>
The module parameter valid type are:<br>
a single module name<br>
an module array<br>
a css file that end with '.css'<br>
a js file that end with '.js'</td>
</tr>
</tbody></table>
</div>
</body>
</html>