轻量级jquery框架之--工具栏(toolbar)
工具栏需求:
(1)要求工具栏可以通过JSON配置格式生成,这样可以从服务器端控制生成的JSON来控制UI层面的按钮状态
(2)可以自定义按钮的图标样式。
(3)可以定义按钮事件,按钮事件需要支持以字符串形式定义(服务端对应的按钮JSON配置里的事件配置为字符串形式)
(4)支持工具栏全局事件,即点击任意按钮都触发的事件
(5)支持编程方式禁用、启用、添加、删除按钮
(6)支持配置额外的事件参数,考虑参数中附带权限标志
(7)工具栏需要考虑可以简单集成到tree组件、datagrid等可能需要用到工具栏的UI组件中
(8)如果是服务器端生成工具栏方式,为了便于工具栏事件的管理,考虑将工具栏的事件定义到当前页面window对象下的某个事件集合中
工具栏api设计:
一、JOSN配置定义:
全局定义:
var defaultOpts = { params:{},//用于集成到tree datagrid时 行按钮的数据参数 align: ‘left‘,//对齐方式,默认是left 、center、right style:‘normal‘,// normal / min / plain buttons: [], //{} operated: function () { }//任意按钮事件均触发的事件,优先自身注册的时候然后才调用通用事件,this= a标签 };
单个按钮定义:
buttons=[ { id: ‘04‘, //按钮id iconCls: ‘‘,//图标样式 cmd: ‘test‘,//对应的权限标识 params:{pr1:123},//额外的参数 statu: false,//是否可用 text: ‘按钮‘,//文本 click: function (pr) {//点击事件,如果存在click,则字符串形式的handler不可用 }, handler:‘字符串形式的事件‘, //配合methodsObject使用 methodsObject:‘window对象下的事件集合名词‘ }]
二、api定义
三、工具栏预览
代码下载:
https://code.csdn.net/hjwen/open-ui/tree/master
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。