• 轻量级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

      

  • 相关阅读:
    android 11中报new Handler()已过时
    My WelcomeApplet
    设计模式(五):抽象工厂方法(多个工厂方法的组合)
    [Redis知识体系] 一文全面总结Redis知识体系
    RocketMq的事务消息发送方法,消息零丢失的实现方式,代码流程讲解,干货分享
    充血枚举的用法
    Rocketmq的启动jvm配置解析-runbroker.sh
    springboot+mybatis整合,基本框架
    rabbitmq单机入门安装教程(ubuntu环境 亲测有效)
    常用表单验证插件
  • 原文地址:https://www.cnblogs.com/hjwen/p/4471634.html
Copyright © 2020-2023  润新知