轻量级jquery框架之--布局(layout)
2024-10-18 21:22:06
布局需求
（1）支持横向生成布局项即可，不需要纵向生成布局。
（2）支持布局项右侧收缩功能
（3）支持自定义布局项图标、标题，并提供动态修改布局项图片和标题的api
（4）支持JSON/html/iframe 三种数据加载方式
（5）提供动态修改请求参数(url、参数)并可以重新加载数据的api
（6）layout依赖于panel组件并支持工具栏定义（依赖工具栏）
API设计
/**
* args={title:'标题',iconCls:'按钮样式'}/args=title
***/
setTitle: function () {
var args = arguments[0];
return this.each(function () {
$(this).data("panels")[args.panelIdx].panel('setTitle', args);
});
},
/**
*args={
panelIdx:面板的索引、对应items里面的数据下标,
content: null,//url地址
dataType:'html/json/iframe',
title:'设置该项会改变标题，可是不设置',
iconCls:'设置新的图标，可是不设置'
}
**/
load: function () {
var args = arguments[0];
return this.each(function () {
var $p=$(this).data("panels")[args.panelIdx];
$p.panel('load', args);
if (typeof args.title != 'undefined') {
var as={title:args.title};
if (typeof args.iconCls != 'undefined')
as.iconCls = args.iconCls;
$p.panel('setTitle', as);
} });
}
面板配置JSON
$(function () {
$layout = $("#main_body").layout({
items: [
{
width: 220, //宽度
dragable: true, //是否可以拖拉改变大小
title: '系统面板',
iconCls: 'myaccount',
content: '我的菜单面板内容'
},
{
width: 'auto', //宽度
title: '模块2',
iconCls: 'outbox',
dataType: 'html',//html/json/iframe
content: 'data/html.html',
onLoaded: function (pr) {
if (idx == 2)
$(this).html(JSON.stringify(pr));
console.log("html onLoaded fire! " + JSON.stringify(pr));
}
}
,{
width: 200, //宽度
title: '右侧模块',
iconCls: 'settings',
dataType: 'json',//html/json/iframe
content: 'data/test.ashx?flag=panel',
onLoaded: function (pr) {
console.log("onLoaded fire! " + JSON.stringify(pr));
$(this).html(JSON.stringify(pr));
},
toolbar: [{
iconCls: '',
text: '确认',
click: function (pr) {
alert('确认');
}
}, {
iconCls: '',
statu: false,
text: '取消',
click: function (pr) {
alert('取消');
}
}]
}
],
expand: function (pr) {//展开，收缩 pr=max/min
console.log("expand:" +pr);
},
onDragStop: function (pr) {//拖动结束事件
console.log("onDragStop:" +JSON.stringify(pr));
}
});
});
布局预览
代码下载：
https://code.csdn.net/hjwen/open-ui/tree/master
最新文章
- HTML 个人资料框
- loadrunner中创建唯一随机数
- Jquery 表格操作，记录分页情况下，每一页中被用户勾选的信息
- 带你揭开ATM的神秘面纱
- [C语言]（二）01 获取Windows图形构件大小信息
- 详解Ossim 4.3控制台
- Python实现kMeans(k均值聚类)
- Igor In the Museum(搜搜搜151515151515******************************************************1515151515151515151515)
- Node.js入门（含NVM、NPM、NVM的安装）
- Python能做些什么？
- JQuery UI - resizable
- 基于上三角变换或基于DFS的行（列）展开的n阶行列式求值算法分析及性能评估
- 并发包 concurrent(一) Atomic
- ELM：ELM基于近红外光谱的汽油测试集辛烷值含量预测结果对比—Jason niu
- SAS 逻辑库
- 错误/异常：java.io.FileNotFoundException: .\src\db.properties (系统找不到指定的路径。)；的解决方法
- P1197 [JSOI2008]星球大战 并查集 反向
- Bootstrap(6)图标菜单按钮组件
- 21.Mysql Server优化
- 解析URL参数