-
Notifications
You must be signed in to change notification settings - Fork 52
/
Copy pathapi.html
343 lines (339 loc) · 9.37 KB
/
api.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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
font-size: 14px;
}
.parameters { width:100%; border:0; border-collapse:collapse }
.parameters th,
.parameters td { border:1px solid #c5c5c5; padding:5px; background-color:#fff; color:#000 }
.parameters th { background:#D9D9D9 !important; border-color:#d9d9d9 !important }
.parameters .parameter { font-family:Fixed, monospace }
.parameters ul li {line-height: 25px;}
</style>
</head>
<body>
<table class="parameters" style='margin-bottom: 2em;'>
<caption align="left">表1--jQuery UI Portlet 插件API</caption>
<tr>
<th>参数</th>
<th>描述</th>
<th>默认值</th>
<th>返回值</th>
</tr>
<tr>
<td>sortable</td>
<td>是否启用拖动功能，内部调用sortable插件</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>singleView</td>
<td>是否开启单视图模式，双击标题栏可启用单视图模式</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>create</td>
<td>当创建portlet组件时被调用</td>
<td>null</td>
<td></td>
</tr>
<tr>
<td>removeItem</td>
<td>关闭一个portlet时的回调函数</td>
<td>null</td>
<td></td>
</tr>
<tr>
<td>
<a href="demo/colspan.html">columns</a>
</td>
<td>见表2</td>
<td>null</td>
<td></td>
</tr>
<tr>
<td>
<a href="demo/drag-events.html">events</a>
</td>
<td>拖动事件：在回调function中可以获取this（被拖动的单个portlet）对象
<pre>
drag: {
start: function( event, ui ) {// 拖动开始},
stop: function( event, ui ) {// 拖动结束},
over: function( event, ui ) {// 拖动过程中停止（此时未结束拖动事件，也就是stop还未触发）}
}
</pre>
</td>
<td>没有默认事件</td>
<td></td>
</tr>
<tr>
<td>
<a href="demo/dynamic-add.html">filterRepeat（v1.3）</a>
</td>
<td>是否开启重复对象的过滤，例如同一个ID的Portlet只允许创建一次；如果该属性设置为true则拦截，如果同时指定了handleRepeat属性则调用</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td><a href="demo/dynamic-add.html">handleRepeat（v1.3）</a></td>
<td>
和filterRepeat属性配合使用，如果filterRepeat属性为true该函数将被调用；并要求返回true或者false，
返回值为true时允许创建重复的Portlet，否则不允许。
</td>
<td>null</td>
<td>true|false</td>
</tr>
</table>
<table class="parameters" style='margin-bottom: 2em;'>
<caption align="left">表2--jQuery UI Portlet 插件API--columns</caption>
<tr>
<th>参数</th>
<th>描述</th>
<th>默认值</th>
</tr>
<tr>
<td>width</td>
<td>宽度</td>
<td>300</td>
</tr>
<tr>
<td>portlets</td>
<td colspan="2">
<table class="parameters">
<tr>
<th>参数</th>
<th>描述</th>
<th>默认值</th>
<th>返回值</th>
</tr>
<tr>
<td>attrs</td>
<td>portlet的属性， json数组格式</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>title</td>
<td>portlet的title，支持：静态文本，function</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>icon</td>
<td>标题栏左侧的图标，使用jQuery UI提供的图标. icon: 'ui-icon-person'</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>beforeCreate(v1.3)</td>
<td>创建Portlet元素时调用，该function需要返回一个boolean值，true允许创建，false不允许</td>
<td> </td>
<td>true|false</td>
</tr>
<tr>
<td>afterCreated(v1.3)</td>
<td>创建Portlet元素后</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>beforeRemove(v1.3)</td>
<td>删除一个Portlet元素时，该function需要返回一个boolean值，true允许创建，false不允许</td>
<td> </td>
<td>true|false</td>
</tr>
<tr>
<td>afterLoadContent(v1.3)</td>
<td>内容载入完成后</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>beforeRefresh</td>
<td>刷新portlet之前被调用</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>afterRefresh</td>
<td>刷新portlet之后被调用</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>singleView</td>
<td>
<ul>
<li><b>width:</b>启用单视图模式时portlet的宽度；设置方式：数字、function；默认：body的宽度</li>
<li><b>height:</b>启用单视图模式时portlet的高度；设置方式：数字、function；默认：使用原高度</li>
<li><b>enable:</b>触发单视图模式后回调</li>
<li><b>recovery:</b>关闭（还原）单视图模式后回调</li>
</ul>
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>content</td>
<td>
<ul>
<li><b>type:</b>内容获取方式：text、ajax</li>
<li><b>text:</b>portlet的内容，html或者function</li>
<li><b>style:</b>设置内容区域的样式，目前支持属性：<b>height</b></li>
<li><b>beforeShow:</b>设置内容之前被调用</li>
<li><b>afterShow:</b>设置内容之后被调用</li>
<li><b>url:</b>当type:'ajax'时需要指定数据来源的网址</li>
<li><b>dataType:</b>当type:'ajax'时需要指定获取的数据类型，所有jquery的ajax支持的数据类型，目前支持：html、json</li>
<li><b>formatter:</b>当type:'ajax'并且dataType:'json'时被调用，用来处理json数据从而转换为html。<br/>调用时传入三个参数：[表1中的参数，本表中的参数, 数据]</li>
<li><b>error:</b>当ajax请求出现错误时调用，参数参考jqueyr的api，this对象为当前的内容区域</li>
</ul>
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>scripts</td>
<td>数组：指定portlet加载完内容后的js文件路径</td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<table class="parameters" style='margin-bottom: 2em;'>
<caption align="left">表3--jQuery UI Portlet 插件更新参数 $('#portlet1').portlet('option', 'paramName', paramValue)</caption>
<tr>
<th>参数名称</th>
<th>描述</th>
</tr>
<tr>
<td width="120">
<a href="demo/disable-drag.html">sortable</a>
</td>
<td>
设置开启/禁用拖动功能
<pre>$('#portlet-demo').portlet('option', 'sortable', false);</pre>
</td>
</tr>
<tr>
<td>
<a href="demo/dynamic-add.html">remove（v1.3）</a>
</td>
<td>
删除一个Portlet，下面的代码表示删除ID为feeds的Portlet
<pre>$('#portlet-demo').portlet('option', 'remove', '#feeds');</pre>
</td>
</tr>
<tr>
<td>
<a href="demo/dynamic-add.html">filterRepeat（v1.3）</a>
</td>
<td>
获取或者设置filterRepeat属性。
下面的代码将返回filterRepeat的值：
<pre>$('#portlet-demo').portlet('option', 'filterRepeat');</pre>
下面的代码将更改filterRepeat的值：
<pre>$('#portlet-demo').portlet('option', 'filterRepeat', true);</pre>
</td>
</tr>
<tr>
<td>
<a href="demo/dynamic-add.html">add(v1.3）</a>
</td>
<td>
动态添加一个Portlet元素，需要传递两个参数:
<hr>
<dl>
<dt>position</dt>
<dd>
<p><strong>x</strong>：横坐标（所在列的行数），可以是数字也可以是字符（last:表示末尾）</p>
<p><strong>y</strong>：纵坐标（哪一列）</p>
</dd>
</dl>
<hr>
<pre>
$('#portlet-demo').portlet('option', 'add', {
position: {
x: 0,
y: 1
},
portlet: {
attrs: {
id: 'news'
},
title: 'News（亲，我是被动态添加的呦）',
afterCreated: function() {
alert('动态创建了News。。。');
},
content: {
style: {
height: '100'
},
type: 'text',
text: function() {
return $('#newsTemplate').html();
}
}
}
});
</pre>
</td>
</tr>
</table>
<table class="parameters" style='margin-bottom: 2em;'>
<caption align="left">表4--jQuery UI Portlet 插件方法 $('#portlet1').portlet('method_name')</caption>
<tr>
<th>方法名称</th>
<th>描述</th>
<th>结果或用法</th>
</tr>
<tr>
<td>
<a href="demo/getindexs.html">index</a>
</td>
<td>获取每一个portlet的XY坐标</td>
<td>
<pre>
var indexs = $('#portlet-demo').portlet('index');
{
news: {
x: 0,
y: 3
}
}
</pre>
表示ID为news的portlet在第一列第4行
</td>
</tr>
<tr>
<td>destroy</td>
<td>销毁</td>
<td>
<pre>$('#aaa').portlet('destroy');</pre>
</td>
</tr>
<tr>
<td><a href="demo/toggle.html">toggle</a></td>
<td>
切换<b>单个</b>portlet的显示，如果没有传入参数默认使用<b>toggle</b>，如果传入了参数[hide, show]则执行单个动画。
</td>
<td></td>
</tr>
<tr>
<td>
<a href="demo/toggle.html">toggleAll</a>
</td>
<td>
切换<b>全部</b>portlet的显示，如果没有传入参数默认使用<b>toggle</b>，如果传入了参数[hide, show]则执行单个动画。
</td>
<td></td>
</tr>
</table>
</body>
</html>