轻量级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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)