<!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--Start</caption>
<tr>
<th>方法</th>
<th>描述</th>
<th>默认值</th>
<th>返回值</th>
</tr>
<tr>
<td>参数说明</td>
<td colspan='3'>此portlet实现以列布局的方式实现，即先确定列数再渲染内容，列做为内容的容器,<font color='#FF0000'>带 * 项为必填项</font>,此插件默认一个页面只能添加一个portlet，如果要实现一个页面同时加载多个portlet，请参考jquery.portletInterface.js开头部分注释的参数信息<pre>
{ <font color='#55bb60'>//*protlet的名字，如果不提供系统默认以（new Portlet+系统当前时间）作为名称</font>
"name": "new Portlet-Tue Nov 05 2013 10:34:11 GMT+0800 (CST)",
"sortable": true,<font color='#55bb60'>//是否允许拖动，默认为true</font>
"singleView": true,<font color='#55bb60'>//是否允许双击标题栏实现最大化/最小化，默认为true</font>
"filterRepeat": false,<font color='#55bb60'>//是否可以重复添加同一个widget小模块，根据protlets.attrs,id的属性做为判断条件，默认为false允许</font>
"unlock":false,<font color='#55bb60'>//是否允许删除和设置,默认为true允许,它的优先先级大于子类中的，用于写配置界面时使用，展示时此属性一般都为false</font>
"columns": [<font color='#55bb60'>//* 必填项，columns属性的内容也全部为必需项，表示widget的布局和内容</font>
{
"width": 282,<font color='#55bb60'>//第一列宽度，此参数会根据layout的属性自动计算，主要用于测试过程中</font>
"portlets": [
{
"attrs": {
"id": <font color='#55bb60'>97//此widget唯一ID</font>
},
"title": <font color='#55bb60'>"New97",//名称，显示在标题栏</font>
"icon": "",<font color='#55bb60'>//图标，为一CSS 的.class名称</font>
"unlock":true,<font color='#55bb60'>//是否允许删除和设置,默认为true允许</font>
"content": {
"type": "ajax",<font color='#55bb60'>//内容渲染方式，可选三种ajax|,text, iframe,除text外都需要指定url属性</font>
"style": {
"height": 100<font color='#55bb60'>//高度</font>
},
"url": "ajax.json",<font color='#55bb60'>//内容来源</font>
"search":"search.html",<font color='#55bb60'>//内容URL的查询条件，详细见注1</font>
"dataType": "json",<font color='#55bb60'>//当type为ajax时需要指定内容渲染方式，可选荐html|json</font>
"error": null<font color='#55bb60'>//可选项，当ajax请求出现错误时的回调函数</font>
}
}
]<font color='#55bb60'>//end portlets</font>
}
],<font color='#55bb60'>//end columns</font>
"layout": "2|6|2"<font color='#55bb60'>//布局，当新建时以body的宽做为总宽度，当重新绘制时以当前元素的宽做为总宽度，
所以指定protlet容器时最好指定其width:100%或某一数值。2|6|2表示各占多少百分比，可选参数10|0|0、5|5|0、2|8|0、8|2|0、2|6|2、3|3|3</font>
}
</pre>
<font color='red'> 注1：此类页的写法比较特殊，它是定义各widget内容的查询条件的，此页面只允许出现一个form标签或把查询条件放在第一个form中，并且不用写button和其它代码，详细参考
<a href ='demo/search.html'>search.html</a>源码.</font>
</td>
</tr>
<tr>
<td>如何使用</td>
<td colspan='3'>
<pre>
< div id='portlet-demo'></div>
$.getJSON('../script/portlet.json', function(data){
$('#portlet-demo').portletInterface(data);
});
});<font color='#55bb60'>//把符合上面表中的JSON串直接传递给portletInterface(data)即可</font>
</pre>
</td>
</tr>
</table>
<!--================-->
<table class="parameters" style='margin-bottom: 2em;'>
<caption align="left">表2--jQuery UI Portlet 插件方法,</caption>
<tr>
<th>方法名称</th>
<th>描述</th>
</tr>
<tr>
<td colspan='4'>此插件方法调用未做限制，理论上可以随意调用，但在使用时建议只调用此API中公开的方法，日后会对非公开方法调用加以限制。以下大部分方法都是实用方法，通过<font color='#FF0000'>$.portletInterface.methodName(options)的方式调用</font>必须引入的JS类<br/>
<UL>
<LI>jquery-1.8.3+.js:要求最低版本</LI>
<LI>jquery-ui-1.10+.custom.min.js:要滶的最低版本</LI>
<LI>jquery.portlet.js:核心类</LI>
<LI>jquery.portlet.dataparse.js:接口类，如果不引入此类，可以直接使用上面的jquery.portlet.js做为演示，但会失去数据修改功能</LI>
<LI>jquery.form.js:主要用于widget的查询功能，如果不需要查询按键则不需要引入此类</LI>
<li>jquery.portlet.css:核心类</li>
<li>jquery-ui-1.10.2.custom.min.css:和jquery ui配套的css及其资源</li>
</UL>
</td>
</tr>
<tr>
<td width="120">
portletInterface(json)
</td>
<td>
创建一个portlet;
<pre>
$('#portlet-demo').portletInterface(json);<font color='#55bb60'>//json是符合上表中标准的JSON数据串</font>
}</pre>
</td>
</tr>
<tr>
<td width="120">
createPortlet(layout, [callback])
</td>
<td>
此方法实际上是得到符合标准的json数据，建议和portletInterface一起使用，可以实现动态创建portlet
<pre>
$.portletInterface.createPortlet({layout: '2|6|2', callBack: function(aa){
$('#portlet-demo').portletInterface(aa);
}
</pre><font color='#55bb60'>
<ul><li>@param layout:布局，必须项，可选值10|0|0、5|5|0、2|8|0、8|2|0、2|6|2、3|3|3</li><li>@param callBack：可选，回调函数</li><li>@return json</li></ul>
</font>
</td>
</tr>
<tr>
<td width="120">
indexAll()
</td>
<td>
返回所有widget组件的索引信息，此方法没有参数，返回值为一数组，key为widget的ID值，value为{x:indexX, y:y:indexY}，如果想到某个widget的位置信息可以调用indexAt(id)
方法，返回值是是一个对象。
<pre>
var indexs = $.portletInterface.indexAll();
$('#index').html('');
$.each(indexs, function(k, v) {
$('< li/>', {html: '<strong>' + k + '</strong>：x=' + v.x + ", y=" + v.y}).appendTo('#index');
});</pre>
</td>
</tr>
<tr>
<td width="120">
addItem(position, content)
</td>
<td>
动态创建一个widget;
<pre>
$('#addItem').button({icons:{primary:'ui-icon-info'}}).click(function(){
var position = {x:0, y:0};<font color='#55bb60'>//必要参数，，要插入的位置：可选值有：
1、{x:, y:}其中x表示列数，y值暂时没有用，默认添加到此列最后；2、'auto'，自动添加到列中元素最小的那列</font>
var id = Math.round( Math.random()*100 );<font color='#55bb60'>//测试用的随机ID值，一般此值会取数据库中代理ID的值</font>
var param = {id:id, title:'New'+id, icon:'', type:'ajax',height:100, url:'ajax.json', dataType:'json'}</font>
<font color='#55bb60'>//$.portletInterface.addItem('last', param);//if none </font>
$.portletInterface.addItem(position, param);<font color='#55bb60'>//if has one more</font>
});</pre>
<font color='#55bb60'>
<ul><li>@param position:必须项，�
jquery portlet （128个子文件） 
jquery-ui-1.10.2.custom.min.css 26KB ._jquery.portlet.css 4KB ._jquery-ui-1.10.2.custom.min.css 4KB jquery.portlet.css 814B .DS_Store 15KB .DS_Store 12KB .DS_Store 6KB .DS_Store 6KB .DS_Store 6KB .DS_Store 6KB .DS_Store 6KB .DS_Store 6KB .DS_Store 6KB ._.DS_Store 4KB ._.DS_Store 4KB ._.DS_Store 4KB ._.DS_Store 4KB ._.DS_Store 4KB ._.DS_Store 4KB ._.DS_Store 4KB ._.DS_Store 4KB ._.DS_Store 4KB entries 2KB entries 1020B entries 962B entries 903B entries 840B entries 397B entries 354B entries 217B entries 211B .gitignore 10B
api.html 10KB getindexs.html 5KB ._ajax.html 4KB ._getindexs.html 4KB ._api.html 4KB ._index.html 4KB ._bug.html 4KB ._search.html 4KB ._config.html 4KB index.html 3KB bug.html 998B search.html 128B ajax.html 111B config.html 51B jquery-ui-1.10.2.custom.min.js 223KB jquery-1.8.3.min.js 91KB jquery.layout-latest.min.js 62KB jquery.form.js 29KB jquery.portlet.js 23KB jquery.portlet.dataparse.js 6KB ._jquery-ui-1.10.2.custom.min.js 4KB ._jquery.layout-latest.min.js 4KB ._jquery-1.8.3.min.js 4KB ._jquery.portlet.dataparse.js 4KB ._jquery.portlet.js 4KB jquery.js 580B ._portlet-1.json 4KB ._ajax.json 4KB ._portlet.json 4KB portlet-1.json 2KB portlet.json 1KB ajax.json 1KB
ui-bg_gloss-wave_75_2191c0_500x100.png 6KB ui-bg_gloss-wave_45_e14f1c_500x100.png 6KB ui-icons_056b93_256x240.png 4KB ui-icons_e0fdff_256x240.png 4KB ui-icons_d8e7f3_256x240.png 4KB ui-bg_glass_75_79c9ec_1x400.png 348B ui-bg_glass_45_0078ae_1x400.png 346B ui-bg_inset-hard_100_fcfdfd_1x100.png 292B jquery-ui-1.10.2.custom.min.js.svn-base 223KB jquery-1.8.3.min.js.svn-base 91KB jquery.layout-latest.min.js.svn-base 62KB jquery.form.js.svn-base 29KB jquery-ui-1.10.2.custom.min.css.svn-base 26KB jquery.portlet.js.svn-base 23KB api.html.svn-base 10KB jquery.portlet.dataparse.js.svn-base 6KB ui-bg_gloss-wave_75_2191c0_500x100.png.svn-base 6KB ui-bg_gloss-wave_45_e14f1c_500x100.png.svn-base 6KB getindexs.html.svn-base 5KB ui-icons_056b93_256x240.png.svn-base 4KB ui-icons_d8e7f3_256x240.png.svn-base 4KB ui-icons_e0fdff_256x240.png.svn-base 4KB index.html.svn-base 3KB portlet-1.json.svn-base 2KB portlet.json.svn-base 1KB ajax.json.svn-base 1KB bug.html.svn-base 998B jquery.portlet.css.svn-base 814B jquery.js.svn-base 580B ui-bg_glass_75_79c9ec_1x400.png.svn-base 348B ui-bg_glass_45_0078ae_1x400.png.svn-base 346B ui-bg_inset-hard_100_fcfdfd_1x100.png.svn-base 292B search.html.svn-base 128B ajax.html.svn-base 111B ui-icons_056b93_256x240.png.svn-base 79B ui-icons_d8e7f3_256x240.png.svn-base 79B共 128 条
- 1
- 2
资源评论
sunyanjie12014-03-31挺好用的，但是布局还要自己设置，如果内部有个类似表格的布局设置就更好了，有点贪心哦！- icelisilver22015-06-03总的来说 还不错哦
Element2014-03-20$pt 识别不了啥问题。- atomGJ2014-01-08帅，但是有个问题， 动态图的大小没有重新加载，板式修改后出现滚动条
- AMIEugene2014-03-17都是基于1.3.1的，不能直接写URL地址
