我的开源框架之工具栏控件

时间:2023-01-20 08:57:41

需求:

  (1)添加、删除按钮

  (2)启用、禁用按钮

  (3)按钮权限:按钮通过服务器json生成,生成的按钮附带权限控制的参数  

  (4)内置两种按钮样式:圆角样式、平面样式

实现图例:

我的开源框架之工具栏控件

客户端代码:

  <script type="text/javascript">
        function addBtn() {
            toolbar.toolbar('addButtons', [
                {
                    id:'btn_5',
                    text: '按钮5',
                    iconCls: 'icon-edit',
                    handler: function () {
                        alert("我的处理5");
                    }
                }, {
                    id: 'btn_6',
                    text: '按钮6',
                    iconCls: 'icon-add',
                    handler: function () {
                        alert("我的处理6");
                    }
                }
            ]);
        }
        function delBtn(flag) {
            var arr = ['btn_1', 'btn_2'];
            if (flag == 1)
                arr = [];
            toolbar.toolbar('delButtons', arr);
        }
        function disableBtn(flag) {
            var arr = ['btn_3'];
            if (flag == 1)
                arr = [];        
            toolbar.toolbar('disableButtons', arr);
        }
        function enableBtn(flag) {
            var arr = ['btn_4'];
            if (flag == 1)
                arr = [];
            toolbar.toolbar('enableButtons', arr);
        }
        var toolbar;
        var toolbar2;
        var btnArr=[
                {
                    id:'btn_1',
                    text: '按钮1',
                    iconCls: 'icon-edit',
                    handler: function () {
                        alert("我的处理1");
                    }
                }, {
                    id: 'btn_2',
                    text: '按钮2',
                    iconCls: 'icon-add',
                    handler: function () {
                        alert("我的处理2");
                    }
                },
                {
                    id: 'btn_3',
                    text: '按钮3',                  
                    handler: function () {
                        alert("我的处理3");
                    }
                },
                {
                    id: 'btn_4',
                    text: '按钮4',
                    statu: false,
                    iconCls: 'icon-print',
                    handler: function () {
                        alert("我的处理4");
                    }
                }
        ];
        $(function () {
            toolbar = $("#toolbarContainer").toolbar({
                btnList: btnArr
            });
            toolbar2 = $("#toolbarContainer_2").toolbar({
                btnStyle: 'plain',
                btnList: btnArr
            });
        });
    </script>


 

组件代码:

  1 /******************************************
  2 *作者:hjwen
  3 *电邮:hjwen88@126.com
  4 *版本:1.0
  5 *版权许可:中国通用开源许可协议V1.0
  6 *说明:工具栏定义 
  7 ******************************************/
  8 (function ($) {
  9     /******渲染目标*******/
 10     function renderHtml(target) {
 11         var toolWrap = $("<div class='toolbar-wrap'></div>").prependTo(target);
 12         var opts = target.data('settings');        
 13         addBtns(toolWrap, opts,opts.btnStyle);
 14     };
 15     /************私有方法*********************/
 16     /****
 17     *增加按钮
 18     ****/
 19     function addBtns(toolWrap,opts,btnStyle) {
 20         var btnList = opts.btnList;
 21         var btnClass = 'a-btn';
 22         var spanLeftClass = 'a-btn-left-bg';
 23         if (btnStyle != 'roundness') {
 24             btnClass = btnClass + ' a-btn-plain';
 25             spanLeftClass = 'a-btn-left-plain-bg';
 26         } else {
 27             btnClass = btnClass + ' a-btn-roundness';
 28         }
 29         for (var i = 0, len = btnList.length; i < len; ++i) {
 30             var btnOpt = btnList[i];
 31             var iconCls = typeof btnOpt.iconCls === 'undefined' ? '' : (" " + btnOpt.iconCls);
 32             var txtPaddingLeft = "";
 33             if (iconCls != "") {
 34                 txtPaddingLeft = "style=\"padding-left:20px\"";
 35             }
 36             var statu = typeof btnOpt.statu === 'undefined' ? '1' : (btnOpt.statu==true?1:0);
 37             var btnWrap = $("<a statu=\"" + statu + "\" id=\"" + btnOpt.id + "\" class=\"" + btnClass + "\" href=\"javascript:void(0);\"><span class=\"a-btn-left " + spanLeftClass + "\"><span " + txtPaddingLeft + " class=\"a-btn-text" + iconCls + "\">" + btnOpt.text + "</span></span></a>").appendTo(toolWrap);
 38             if (statu != '1') {
 39                 btnWrap.addClass("a-btn-disabled");
 40             } else {
 41                 if (typeof btnOpt.handler === 'function')
 42                     btnWrap.bind('click', btnOpt.handler);
 43                 btnWrap.bind('click', opts.handler);
 44             }
 45         }
 46     };
 47     /**********私有方法结束*******************/
 48     var methods = {
 49         /***
 50         *options={
 51             btnStyle: 'roundness', //roundness(圆角)/plain(无样式)          
 52             handler: function () {}//通用处理事件,点击工具栏的任何按钮都会触发该事件
 53         }
 54         ****/
 55         init: function (options) {
 56             return this.each(function () {
 57                 var $this = $(this);
 58                 var settings = $this.data('settings');
 59                 if (typeof (settings) == 'undefined') {
 60                     settings = $.extend({}, $.fn.toolbar.defaults, options);
 61                     $this.data('settings', settings);
 62                 } else {
 63                     settings = $.extend({}, settings, options);
 64                 }
 65                 //创建ui布局
 66                 renderHtml($this);
 67                 if ($.myui.isDebug) {
 68                     $.myui.log("jQuery.toolbar init finish......");
 69                 }
 70             });
 71         },
 72         destroy: function (options) {
 73             return $(this).each(function () {
 74                 var $this = $(this);
 75                 $this.removeData('settings');
 76             });
 77         },
 78         /****添加按钮
 79         * options=[{
 80                     id: 'btn_4',
 81                     text: '按钮4',
 82                     statu: true/false,
 83                     iconCls: 'icon-print',
 84                     handler: function () { }
 85                 }]
 86         *******/
 87         addButtons: function (options) {
 88             return this.each(function () {
 89                 var $this = $(this);
 90                 var toolWrap = $this.find(".toolbar-wrap");
 91                 var settings = $this.data('settings');
 92                 for (var i = 0; i < options.length; i++) {
 93                     settings.btnList.push(options[i]);
 94                 }
 95                 var opt = { handler: settings.handler, btnList: options };
 96                 addBtns(toolWrap, opt, settings.btnStyle);
 97             });
 98         },
 99         /****
100         * 删除按钮,如果为空数组则删除所有
101             options=[btnid1,btnid2......]
102         ****/
103         delButtons: function (options) {
104            return this.each(function () {
105                 var $this = $(this);
106                 var btns = $this.find(".toolbar-wrap").children(".a-btn");               
107                 if (typeof options === 'undefined' || options.length == 0) {
108                     for (var j = 0, len1 = btns.length; j < len1; ++j) {                        
109                         $(btns[j]).remove();
110                     }
111                     $this.data('settings').btnList = [];
112                 } else {
113                     var btnListArr = $this.data('settings').btnList;                    
114                     var delIdxArr = [];
115                     for (var i = 0, len = options.length; i < len; ++i) {
116                         for (var j = 0, len1 = btns.length; j < len1; ++j) {
117                             var btn = $(btns[j]);
118                             if (btn.attr("id") === options[i]) {
119                                 btn.remove();
120                             }                               
121                         }
122                         for (var k = 0, len2 = btnListArr.length; k < len2;++k){
123                             var btnJson = btnListArr[k];
124                             if (options[i] === btnJson.id) {
125                                 delIdxArr.push(k);
126                             }
127                         }
128                     }
129                     $this.data('settings').btnList = $.myui.removeArrayEle(btnListArr, delIdxArr);                   
130                 }
131             });
132         },
133        /****
134        * 禁用按钮,如果为空数组/不传值则禁用所有
135            options=[btnid1,btnid2......]
136        ****/
137         disableButtons: function (options) {
138             return this.each(function () {
139                 var $this = $(this);
140                 var btns = $this.find(".toolbar-wrap").children(".a-btn");
141                 if (typeof options === 'undefined' || options.length == 0) {
142                     for (var j = 0, len1 = btns.length; j < len1; ++j) {
143                         var btn = $(btns[j]);                        
144                         btn.attr('statu', '0');
145                         if (!btn.hasClass('a-btn-disabled'))
146                             btn.addClass("a-btn-disabled");
147                         btn.unbind('click');                        
148                     }
149                 } else {
150                     for (var i = 0, len = options.length; i < len; ++i) {
151                         for (var j = 0, len1 = btns.length; j < len1; ++j) {
152                             var btn = $(btns[j]);
153                             if (btn.attr("id") === options[i]) {
154                                 btn.attr('statu', '0');
155                                 if (!btn.hasClass('a-btn-disabled'))
156                                     btn.addClass("a-btn-disabled");
157                                 btn.unbind('click');
158                             }
159                         }
160                     }
161                 }
162             });
163         },
164         /****
165         * 启用按钮,如果为空数组则启用所有
166          options=[btnid1,btnid2......]
167         ****/
168         enableButtons: function (options) {
169             return this.each(function () {
170                 var $this = $(this);
171                 var settings =$this.data('settings');
172                 var btnListOpts = settings.btnList;
173                 var btns = $this.find(".toolbar-wrap").find(".a-btn-disabled");
174                 if (typeof options === 'undefined' || options.length == 0) {
175                     for (var j = 0, len1 = btns.length; j < len1; ++j) {
176                         var btn = $(btns[j]);
177                         btn.attr('statu', '1');
178                         btn.removeClass("a-btn-disabled");
179                         for (var k = 0, len = btnListOpts.length; k < len;++k){
180                             if (btnListOpts[k].id === btn.attr("id")) {
181                                 if(typeof btnListOpts[k].handler==='function')
182                                     btn.bind('click', btnListOpts[k].handler);
183                                 btn.bind('click', settings.handler);
184                                 break;
185                             }
186                         }
187                     }
188                 } else {
189                     for (var i = 0, len = options.length; i < len; ++i) {
190                         for (var j = 0, len1 = btns.length; j < len1; ++j) {
191                             var btn = $(btns[j]);
192                             if (btn.attr("id") === options[i]) {
193                                 btn.attr('statu', '1');
194                                 btn.removeClass("a-btn-disabled");
195                                 for (var k = 0, len2 = btnListOpts.length; k < len2; ++k) {
196                                     if (btnListOpts[k].id === btn.attr("id")) {
197                                         if (typeof btnListOpts[k].handler === 'function')
198                                             btn.bind('click', btnListOpts[k].handler);
199                                         btn.bind('click', settings.handler);
200                                         break;
201                                     }
202                                 }
203                             }
204                         }
205                     }
206                 }
207             });
208         }
209     };
210     $.fn.toolbar = function () {
211         var method = arguments[0];
212         if (methods[method]) {
213             method = methods[method];
214             arguments = Array.prototype.slice.call(arguments, 1);
215         } else if (typeof (method) == 'object' || !method) {
216             if ($.myui.isDebug) {
217                 $.myui.log("jQuery.toolbar init.....");
218             }
219             method = methods.init;
220         } else {
221             $.error('Method ' + method + ' does not exist on jQuery.toolbar');
222             return this;
223         }
224         return method.apply(this, arguments);
225     };
226     //默认值 btnStyle=roundness(圆角)/plain(无样式)
227     $.fn.toolbar.defaults = {
228         btnStyle: 'roundness',
229         btnList:[],
230         handler: function () {}//通用处理事件,点击工具栏的任何按钮都会触发该事件
231     };
232 })(jQuery);