面板需求:

(1)支持可拖拽,面板将作为后期的布局组件、window组件、alert组件的基础。

(2)支持自定义工具栏,工具栏位置定义在面板底部,工具栏依赖toolbar组件。

(3)支持加载JSON,HTML,IFRAME三种数据格式的请求,支持动态reload重加载,重装时可以重新设置参数和url。

(4)支持自定义标题(可动态修改标题)、图标样式。

(5)支持扩大缩小、右侧收起,上下收起。

面板API设计:

      /**
*args={
content: null,//url地址
dataType:'html/json/iframe'
}
**/
load: function () {
},
/**
* args={title:'标题',iconCls:'按钮样式'}/args=title
***/
setTitle: function () {
},
/**
*关闭当前panel
***/
close: function () {
},
/**
*重置大小
***/
resize: function () {
}

面板JSON配置

    var defaultOpts = {
title: '',//标题
iconCls: '',//图标cls,对应icon.css里的class
toolbar: null,//工具栏对象
toolbarPos:'right',
width: 'auto',
height: 'auto',
content: null,//静态内容或者url地址
dataType:'html',//当为url请求时,html/json/iframe
maxminable: false,//可变化小大
closeable: false,//是否关闭
expandable: false,//可左右收缩
collapseable: false,//上下收缩
onResized:function(pr){},//大小变化事件
onPreLoad: function () { },//加载前
onLoaded: function () { },//加载后
onClosed: function () { },//关闭后
onExpand: function (pr) { },//左右收缩后
onCollapse: function (pr) { }//上下收缩后
};

面板预览

代码下载:

  https://code.csdn.net/hjwen/open-ui/tree/master

轻量级jquery框架之--面板(panel)的更多相关文章

  1. 轻量级jquery框架之--布局(layout)

    布局需求 (1)支持横向生成布局项即可,不需要纵向生成布局. (2)支持布局项右侧收缩功能 (3)支持自定义布局项图标.标题,并提供动态修改布局项图片和标题的api (4)支持JSON/html/if ...

  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. 如何编写轻量级 CSS 框架

    Github 地址: https://github.com/nzbin/snack Demo 演示: https://nzbin.github.io/snack/ 前言 这篇文章我已经酝酿了半年之久, ...

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

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

  7. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  8. 044——VUE中组件之使用内容分发slot构建bootstrap面板panel

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

随机推荐

  1. tableView点击后取消选中效果

    [self.tableView deselectRowAtIndexPath:[self.tableView indexPathForSelectedRow] animated:YES]; @impo ...

  2. unity3D射线检测敌人是否在前方

    //发射一条射线,去检测玩家是否在自己面前,用来随后的发射炮弹 bool isForward = false; var TranformShootPoint = ai.WorkingMemory.Ge ...

  3. (转)Autotrace工具使用——小工具,大用场

    监控SQL语句,获取执行计划和执行成本,是每个Oracle开发人员与DBA所必须具备的能力之一. 当Oracle彻底进入CBO时代,我们面对一种全新的局面.一方面,基于数据统计量的CBO优化器,让SQ ...

  4. 有空可以对C#尝一下鲜,WCF看上去很诱人(跨进程、跨机器、跨子网,跨企业网乃至跨Internet的分布式服务)

    说道底不还是要借助NGNIX实现,PHP自身呢?C#的WCF可以脱离IIS就可以实现跨进程.跨机器.跨子网,跨企业网乃至跨Internet的分布式服务,宿主可以是IIS,WinForm,WPF, Wi ...

  5. 【转】Android下编译jni库的二种方法(含示例)

    原文网址:http://blog.sina.com.cn/s/blog_3e3fcadd01011384.html 总结如下:两种方法是:1)使用Android源码中的Make系统2)使用NDK(从N ...

  6. 使用WCF实现SOA面向服务编程—— 架构设计

    原文地址:http://www.cnblogs.com/leslies2/archive/2011/03/29/1997889.html SOA本身就是一种面向企业级服务的系统架构,简单来说,SOA就 ...

  7. 一个跨域请求的XSS漏洞

    场景回顾 一个表单进行跨域提交的方式有很多,我们使用的采用隐藏iframe,在本域下放一个代理页面,通过服务端配合完成一次完整的请求. 首先,部署proxy.html代理页面.这个页面处理服务端返回的 ...

  8. [转]Hulu 2013北京地区校招笔试题

    填空题: 1.中序遍历二叉树,结果为ABCDEFGH,后序遍历结果为ABEDCHGF,逆序遍历结果为? 2.对字符串HELL0_HULU中的字符进行二进制编码,使得字符串的编码长度尽可能短,最短长度为 ...

  9. RCU 机制 [转IBM]

    2005 年 7 月 01 日 本文详细地介绍了 Linux 2.6 内核中新的锁机制 RCU(Read-Copy Update) 的实现机制,使用要求与典型应用. 一.引言 众所周知,为了保护共享数 ...

  10. Javascript刷新页面的几种方法:

    Javascript刷新页面的几种方法: 1    history.go(0) 2    window.location.reload() window.location.reload(true)  ...