轻量级jquery框架之--面板(panel)
面板需求:
(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)的更多相关文章
- 轻量级jquery框架之--布局(layout)
布局需求 (1)支持横向生成布局项即可,不需要纵向生成布局. (2)支持布局项右侧收缩功能 (3)支持自定义布局项图标.标题,并提供动态修改布局项图片和标题的api (4)支持JSON/html/if ...
- 轻量级jquery框架之--树(tree)
前言 在常用的UI组件中,树形组件与数据列表组件可以说是构成一个管理平台基本的两大数据核心组件.树形组件用于系统菜单,数据列表用于数据表现,两者配合即可完成一个简单的数据系统.要实现一个支持复选.工具 ...
- 轻量级jquery框架之--工具栏(toolbar)
工具栏需求: (1)要求工具栏可以通过JSON配置格式生成,这样可以从服务器端控制生成的JSON来控制UI层面的按钮状态 (2)可以自定义按钮的图标样式. (3)可以定义按钮事件,按钮事件需要支持以字 ...
- 2016 年 50 个最佳的轻量级 JavaScript 框架和库
作者:IT程序狮链接:https://zhuanlan.zhihu.com/p/24598210来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 回顾今年已发布的 JS ...
- 如何编写轻量级 CSS 框架
Github 地址: https://github.com/nzbin/snack Demo 演示: https://nzbin.github.io/snack/ 前言 这篇文章我已经酝酿了半年之久, ...
- c# 轻量级ORM框架 实现(一)
发布一个自己写的一个轻量级ORM框架,本框架设计期初基于三层架构.所以从命名上来看,了解三层的朋友会很好理解. 设计该框架的目的:不想重复的写增删改查,把精力放到功能实现上. 发布改框架的原因:希望给 ...
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- 044——VUE中组件之使用内容分发slot构建bootstrap面板panel
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 轻量级php框架phpk v1.0发布
phpk框架简介 PHPK是一个简单易用,易于扩展的轻量级PHP框架.phpk不仅仅是一个php框架,也是一个js框架,内置一套全新的js内库,完全摒弃了庞大的jquery,所有的前端都是一个全新的微 ...
随机推荐
- Windows Server 2003 SP2企业版ISO下载, windows2003系统下载,2003系统下载,2003系统
Windows Server 2003 SP2 企业版ISO下载(真正企业免激活版) 此版本适合作为一个新系统来安装,也适合在虚拟机中安装 点评:Windows Server 2003 SP2 企业版 ...
- tomcat server.xml 配置示例
规划: 网站网页目录:/web/www 域名:www.test1.com 论坛网页目录:/web/bbs URL:bbs.test1.com/bbs 网站管理 ...
- PHP手册应注意
1.抽象类翻译.错误.在语言参考→类与对象→抽象类一节的开头,有这样的描述"抽象类中 至少要包含一个抽象方法."(http://www.php.net/manual/zh/lang ...
- 开心菜鸟学习系列笔记-----Javascript(1)
js 一些常见的使用方法 // target : 不管是否出现冒泡,他都是代表最开始引发事件的对象 // this : 是指当前函数. //ie 事件对象 : window ...
- 管理Activity 用户在主界面按两次回退退出系统
1:定义一个用于管理Activity的类. /* * 用于管理Activity */ public class SysApp extends Application{ private List< ...
- XJOI网上同步训练DAY3 T2
考试的时候已经想出来怎么做了,但是没有时间打了T_T 思路:我们考虑将询问以lim排序,然后树链剖分,把边作为线段树的节点,然后随着询问lim的增大,改变线段树中节点的信息,然后每次询问我们用树链剖分 ...
- Unity 代码检测单击,双击,拖放
今天小伙伴问我如何自己写一段代码检测 单击 双击 和 拖放.于是就写了这段代码O(∩_∩)O~ 代码如下: using UnityEngine; using System.Collections; p ...
- python list 去重
print u'列表去重'a=[1,2,3,3,2,1,4,4,5,6,'a','a','b','c']print list(set(a))
- 从手工测试逆袭为NB自动化测试的学习路线
在开始之前先学习两个工具商业web自动化测试工具请学习QTP:QTP的学习可以跳过,我是跳过了的.开源web自动化测试工具请学习Selenium:我当年是先学watir,再学selenium 这里主要 ...
- MapReduce源代码浅析
Thanks @读程序的手艺人 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHVvemhhbmZlbmc=/font/5a6L5L2T/fontsize ...