布局需求

(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)的更多相关文章

  1. 轻量级jquery框架之--面板(panel)

    面板需求: (1)支持可拖拽,面板将作为后期的布局组件.window组件.alert组件的基础. (2)支持自定义工具栏,工具栏位置定义在面板底部,工具栏依赖toolbar组件. (3)支持加载JSO ...

  2. 轻量级jquery框架之--树(tree)

    前言 在常用的UI组件中,树形组件与数据列表组件可以说是构成一个管理平台基本的两大数据核心组件.树形组件用于系统菜单,数据列表用于数据表现,两者配合即可完成一个简单的数据系统.要实现一个支持复选.工具 ...

  3. 轻量级jquery框架之--工具栏(toolbar)

    工具栏需求: (1)要求工具栏可以通过JSON配置格式生成,这样可以从服务器端控制生成的JSON来控制UI层面的按钮状态 (2)可以自定义按钮的图标样式. (3)可以定义按钮事件,按钮事件需要支持以字 ...

  4. 2016 年 50 个最佳的轻量级 JavaScript 框架和库

    作者:IT程序狮链接:https://zhuanlan.zhihu.com/p/24598210来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 回顾今年已发布的 JS ...

  5. jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)

    一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...

  6. jquery easy ui 1.3.4 布局layout(4)

    4.1.easyui布局-layout 在easyui里面只有一种布局方式,layout(东.南.西.北.中)的布局方式,创建layout布局的方式如下: <div id="cc&qu ...

  7. 轻量级php框架phpk v1.0发布

    phpk框架简介 PHPK是一个简单易用,易于扩展的轻量级PHP框架.phpk不仅仅是一个php框架,也是一个js框架,内置一套全新的js内库,完全摒弃了庞大的jquery,所有的前端都是一个全新的微 ...

  8. JustWeEngine - 轻量级游戏框架

    JustWeEngine - 轻量级游戏框架 An easy open source Android game engine. Github地址 引擎核心类流程图 使用方法 引入Engine作为Lib ...

  9. c# 轻量级ORM框架 实现(一)

    发布一个自己写的一个轻量级ORM框架,本框架设计期初基于三层架构.所以从命名上来看,了解三层的朋友会很好理解. 设计该框架的目的:不想重复的写增删改查,把精力放到功能实现上. 发布改框架的原因:希望给 ...

随机推荐

  1. 以字符串形式读取github上.json文件

    如下: https://github.com/hpu-spring87/ebooks/blob/master/update.json 如果直接用httpclient读取该URL地址,得到结果是这样的: ...

  2. 调查程序phpquestionnaire 2.2中文安装注意

    最近找调查投票软件 找到limesurvey 和 phpquestionnaire,limesurvey 中文可以用,但是比较烦琐.phpquestionnaire有汉化过的包下载,但是安装完,发现中 ...

  3. iOS学习之详解AppDelegate

    AppDelegate, 类似于监听接口. 用个很简单的例子说:ios系统会控制每个程序的开始和结束.但是ios又不知道每个程序的开始需要运行成么代码,结束需要运行什么代码.这个时候,ios就制定了一 ...

  4. NPAPI开发常识

    其实,就在几天前,我根本不知道什么是NPAPI插件.因为最近的项目中用到需要在非IE下检测客户端是否安装,最终找到浏览器插件NPAPI. 以下资料来源于网络收集,以此给那些和我一样迷茫的人.本文的目的 ...

  5. LeetCode_Word Ladder

    Given two words (start and end), and a dictionary, find the length of shortest transformation sequen ...

  6. Qt5+VS2013兼容XP方法

    用Qt5+VS2013编译程序默认配置会在XP运行时报"不是有效的Win32程序"工作需要必须要XP运行 pro文件中加一句: 复制代码 QMAKE_LFLAGS_WINDOWS ...

  7. c++ 02

    一.堆内存的动态分配与释放 malloc/calloc/realloc/free new/delete:详见memory.cpp 1.通过new运算符分配单个变量 数据类型* 指针变量 = new 数 ...

  8. linux中patch命令 -p 选项

    patch命令和diff命令是linux打补丁的成对命令,diff 负责生产xxxxx.patch文件,patch命令负责将补丁打到要修改的源码上.但是patch命令的参数-p很容易使人迷惑,因为对- ...

  9. GIT入门篇-基本概念与操作

    GIT 首先必须说明的是, 这篇文章不是阐述GIT原理性和比较深入的文章.只是对于日常开发中比较常用的需求的总结和GIT这些命令大体的原理解释.所以掌握这个只能说能够应付一定的开发需求.但是如果你是个 ...

  10. nodejs学习笔记之包、模块实现

        简单了解了node的安装和一些基本的常识之后,今天学习了node中很重要的包和模块的一些知识点.       首先学习一下包的规范,它由包结构和包描述两部分组成.包结构用于组织包的各种文件,包 ...