轻量级jquery框架之--布局(layout)
布局需求
(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
轻量级jquery框架之--布局(layout)的更多相关文章
- 轻量级jquery框架之--面板(panel)
面板需求: (1)支持可拖拽,面板将作为后期的布局组件.window组件.alert组件的基础. (2)支持自定义工具栏,工具栏位置定义在面板底部,工具栏依赖toolbar组件. (3)支持加载JSO ...
- 轻量级jquery框架之--树(tree)
前言 在常用的UI组件中,树形组件与数据列表组件可以说是构成一个管理平台基本的两大数据核心组件.树形组件用于系统菜单,数据列表用于数据表现,两者配合即可完成一个简单的数据系统.要实现一个支持复选.工具 ...
- 轻量级jquery框架之--工具栏(toolbar)
工具栏需求: (1)要求工具栏可以通过JSON配置格式生成,这样可以从服务器端控制生成的JSON来控制UI层面的按钮状态 (2)可以自定义按钮的图标样式. (3)可以定义按钮事件,按钮事件需要支持以字 ...
- 2016 年 50 个最佳的轻量级 JavaScript 框架和库
作者:IT程序狮链接:https://zhuanlan.zhihu.com/p/24598210来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 回顾今年已发布的 JS ...
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
- jquery easy ui 1.3.4 布局layout(4)
4.1.easyui布局-layout 在easyui里面只有一种布局方式,layout(东.南.西.北.中)的布局方式,创建layout布局的方式如下: <div id="cc&qu ...
- 轻量级php框架phpk v1.0发布
phpk框架简介 PHPK是一个简单易用,易于扩展的轻量级PHP框架.phpk不仅仅是一个php框架,也是一个js框架,内置一套全新的js内库,完全摒弃了庞大的jquery,所有的前端都是一个全新的微 ...
- JustWeEngine - 轻量级游戏框架
JustWeEngine - 轻量级游戏框架 An easy open source Android game engine. Github地址 引擎核心类流程图 使用方法 引入Engine作为Lib ...
- c# 轻量级ORM框架 实现(一)
发布一个自己写的一个轻量级ORM框架,本框架设计期初基于三层架构.所以从命名上来看,了解三层的朋友会很好理解. 设计该框架的目的:不想重复的写增删改查,把精力放到功能实现上. 发布改框架的原因:希望给 ...
随机推荐
- jQuery代码片段
禁用页面右键菜单 $(document).bind('contextmenu', function(){ return false; }); 浏览器判断 $.browser.version $.bro ...
- 【转】linux之自建yum仓库
原链接:http://www.live-in.org/archives/1410.html 平时使用yum方式安装更新软件,可以自建一个yum源,同步官方更新源,这样如果本地有机器要升级的话就可以直接 ...
- R语言画正弦曲线
正弦曲线一个周期是2π,我们要先生成x的取值范围. 可以用seq函数生成一个等差序列,步进为0.01 x=seq( 0, 2*pi, 0.01 ) pi表示π y=sin(x) plot(x, ...
- 使用grid++report打印选中行
接上一篇<hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结>对grid++report做进一步开发 先写一下实现流程: 1.默认为全部载入 ...
- Android 文件操作之openFileOutput
openFileOutput()方法的第一参数用于指定文件名称,不能包含路径分隔符“/” ,如果文件不存在,Android 会自动创建它.创建的文件保存在/data/data/<package ...
- android map高德地图显示多个点,并且每个marker点可以响应鼠标点击事件,处理跳转页面
定义一个数组,然后将要显示的markers放进数组里面,让后循环每个marke对象,赋予监听事件,在监听事件里面写其它需要的功能: js举例: var arr = new Arry(); var ma ...
- UML--核心元素之业务实体
如果说参与者和用例描述了我们在这个问题领域中达到什么样的目标,那么业务实体就描述了我们使用什么来达到业务目标以及通过什么来记录这个业务目标. 如果把问题领域比喻成一幢大楼的话,业务实体就是构成这幢大楼 ...
- c、c++知识点
一. (1)在linux下类似uint8_t这样的文件定义在头文件<stdint.h>里面 (2)截取了stdint.h头文件里的一些常用部分 二.c++中c_str()用法 函数返回 ...
- JBoss AS 7性能调优(三)
原文:http://www.mastertheboss.com/jboss-performance/jboss-as-7-performance-tuning/page-4 调优Webserver线程 ...
- 在多线程环境中使用Jedis
Jedis是一个Java语言的Redis客户端,它为Java语言连接与操作Redis提供了简单易用的接口. Jedis不是线程安全的.故不应该在多线程环境中共用一个Jedis实例.可是.也应该避免直接 ...