需求：
（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);