輕量級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