[原创]基于JQUERY的可绑定菜单列的工具栏控件

花生米AJAX-UI系列之:基于JQUERY的GooToolbar工具栏类UI控件0.1版 特点： 可定义四个边框有没有显示 可定义多个工具栏组,每个工具栏组可以有WIN7和经典两种样式 内置的按钮有标准按钮、可选中按钮、纯下拉菜单、按钮菜单四种，还可选择图标-文字-箭头的排列方式是从上至下1还是从左至右2 可以enable或者disable一个按钮（这时按钮无法点击了） 工具栏中按钮的图标、文字、点击时触发的事件方法都是可自定义的，按钮也有移动至另一个位置的方法 可定义出分隔符和空的DIV，空的DIV要怎么渲染全由用户自行决定，例如可渲染成COMBO、SLIDER、progressBar等UI 当使用菜单按钮时，需要结合GooContextMenu控件0.2版来使用. 可以定义让UI是的高度是否固定高度，还是自动适应内容框的高度（仅当标签头在顶部或底部时有效） 可以用AJAX从服务端获取要初始化渲染的工具栏组，操作单元组，菜单等JSON参数，然后实时渲染出控件界面 经测试，兼容IE6--IE8，Firefox,chrome浏览器。 ------------------------------------------------------- /*工具栏--GooToolbar类*/ //toolDiv:JQUERY对象，要渲染的DOM; //property：各种初始化参数集 //列表标题栏的高/宽一律定为23PX+3px的边框 function GooToolbar(toolDiv,property) 类内成员变量： this.$div： 被绑定构造为GooToolbar控件的JQUERY对象，原型一般为一个DIV this.$width： 控件的宽度 this.$height： 控件的高度 this.$toolList=[]： 工具栏容器框数组(单元为一个复合JSON)，一个组框里可有多个按钮等操作对象，单元格式介绍见下文 this.$items=[]： 操作对象数组(单元为一个复合JSON)，可以是按钮，菜单，分隔符等，单元格式介绍见下文 this.$showMenuId： 正在被显示下拉菜单的菜单按钮的ID，该控件一次只允许显示一组下拉菜单 构造函数传参property的介绍： var property={ borderWidth:"1px", //边框宽度的CSS样式，0px为没边 width:1000,height:96, //控件的宽度和高度（不包括边框） toolList:[ {id:"line2",width:400,height:90,type:2,label:"我们的工具栏"}, {id:"line1",width:400,height:26,type:1} ] //toolList为一个复合JSON数组,其结构与下文中的appendToolList方法的传参toolList一样(可不填)； //当property中自带了toolList时，结构函数将执行appendToolList方法，直接把工具栏容器框初始化出来. }; ----------------------------------------------------------------------------------- 方法: appendToolList(toolList)：//定义初始化工具栏容器框组的方法 //传参toolList为一个复合JSON数组， //其中的type属性有1和2两个取值，2为新式的WIN7型工具栏容器样式，1为经典的样式 //label属性为工具栏容器框的LABEL，只有type=2时这项才有用 //toolList=[ // {id:"line2",width:400,height:90,type:2,label:"我们的工具栏"}, // {id:"line1",width:400,height:26,type:1} //] appendItemList(listId,itemList)： //ID为listId的组框载入一组操作对象单元 //传参listId为组框ID，itemList为要装载的一个复合JSON数组： /*itemList数组单元的介绍 var items=[ {id:"bar2", //唯一的序列号 type:"btn1", //操作单元的类型：共10种 //"btn"按钮12、"btn_state"选中/不选状态按钮12、"menu"纯下拉菜单按钮12、"btn_menu"12按钮+下拉菜单、"split"分隔符、"div"空的DIV 1结尾表示图标-文字-[箭头]的排列方式为从上至下，2结尾表示图标-文字-[箭头]的排列方式为从左至右 iconCls:"url(codebase/img/Smiley_Sad.png) no-repeat 6px",图标的style的background样式 text:"My 笑脸", //按钮的文字，可不填 width:50, //按钮宽度 height:70, //按钮高度 iconHeight:32, //图标部分的高度，当type以1结尾时才有效 iconWidth:32, //图标部分的宽度，当type以2结尾时才有效 title:"My 笑脸", //鼠标在按钮上面后显示的TIP信息，可不填 disable: false, //该按钮初始时是否为disabled，默认为false,可不填 checked: false, //该按钮是否被选中，默认为false，该项只有在type="btn_state"+(1或2)时才有用（可不填） fun:function(id){alert(id+","+demo.$items[id].JQ.data("type")+",被点击了")}} //点击时触发的方法（可不填），传参id为被点击的按钮ID ]; */ attachMenu(id,menu)： //给一个未定义菜单的菜单按钮附加上菜单项 //传参ID为菜单按钮的ID，menu的JSON结构如下： var menuInfo={ Width:137, //菜单浮动层的宽度 Content: //菜单内容定义数组，结构与GooContextMenu控件的构造函数中的menuContent传参的一样 Fun: //菜单点击后触发事件方法集，JSON数据，结构与GooContextMenu控件的构造函数中的bindingFun传参的一样 }; attachFun(id,fun)： //未一个未定义点击事件方法的按钮加上方法；参数fun为自定义的事件方法本身，传参为ID即被点击按钮的ID setListLabel:function(id,label)：//设置一个工具栏组框的标题： getListLabel(id)： //获取一个工具栏组框的标题： displayListLabel(id,show)： //显示/隐藏工具栏级框的标题 传参show为BOOL变量，TRUE为显示，FALSE为隐藏 loadToolListAjax(para)： //用AJAX从服务端获取要渲染的工具栏组定义数据（返回的数据为JSON，格式与appendToolList方法的传参toolList一样） //传参para为一JSON，参数属性与JQUERY的$.ajax()方法的传参一样！ loadItemListAjax(listId,para)： //用AJAX从服务端获取载入的操作单元组定义数据（返回的数据为JSON，格式与appendItemList方法的传参itemList一样） //传参para为一JSON，参数属性与JQUERY的$.ajax()方法的传参一样！ listId为载入这一堆操作单元的工具栏容器单元ID loadMenuAjax(itemId,para)： //用AJAX从服务端获取载入菜单列表定义数据（返回的数据为JSON，格式与attachMenu方法的传参menu一样） //传参para为一JSON，参数属性与JQUERY的$.ajax()方法的传参一样！itemId为载入这一下拉菜单的操作按钮ID getItem(id)： //获取一个ITEM的JSON对象，实际上就是this.$items类内数组成员的一个单元 delItem(itemId)： //删除某个操作对象单元，传参itemId为操作对象单元的ID setBtnText(id,text)： //设置一个按钮（各种类型的）的文字 getBtnText(id)： //获取一个按钮（各种类型）的文字 setBtnTitle(id,title)： //设置一个按钮（各种类型的）的title注释 getBtnTitle(id)： //获取一个按钮（各种类型）的title注释字 setBtnIcon(id,iconCls)： //设置一个按钮（各种类型的）的背景图标CSS样式(只接受background) getBtnIcon(id)：//获取一个按钮（各种类型）的背景图标CSS样式 checkBtnState(id,check)：//设置一个“两种状态”按钮是否被选中,true为选中,false为不选 enableBtn(id,able)：//设置一个按钮（各种类型的）是否可用，true为可用，false为不可用 clearListContent(listid)： //清空某个工具栏组框的内容 removeToolList(listId)： //彻底删除某个工具栏组框 transItemLocate(id,index,listid)： //调整操作对象的位置 //参数INDEX为要移动到的位置，最前为0，第N个后面为N //参数listid为要移至哪个工具栏框组 -------------------------------------------------------------------------------------------------------- 类内复合成员介绍： this.$toolList：工具栏容器框数组(单元为一个复合JSON)，以ID为索引,其内部属性有： { width: 宽度 height： 高度（选填） type： 容器框类型，1和2两个值，1为经典样式，2为WIN7样式，默认为1（选填） label： 容器框显示的标题，只有当type=2时填才会有效果（选填） JQ： 整个容器框的JQUERY对象 tank： 存放操作单元组的最直接JQUERY对象。 } this.$items：操作对象数组(单元为一个复合JSON)，可以是按钮\菜单\分隔符等，以ID为索引,其内部属性有： { iconCls：图标的background样式（CSS） text： 按钮中显示的TEXT文本 JQ： 整个操作对象本身的JQUERY对象,自身缓存了一个变量：type（data("type")），即此操作对象的类型,共10种 //"btn"按钮12、"btn_state"选中/不选状态按钮12、"menu"纯下拉菜单按钮12、"btn_menu"12按钮+下拉菜单、"split"分隔符、"div"空的DIV checked：是否按钮被选中，true为选中，false为没选中(只有当按钮类型为btn_state1/2时，该项才有意义)， //用户可直接访问此属性以便知该btn_state按钮是否被选中 enable： 按钮是否可用，true为可用，false为不可用(只有属于工具栏控件所有内置的按钮类型里，此项才有意义), //用户可直接访问此属性以便知该按钮是否可用 fun： 按钮被点击时，执行自定义的方法，即使是btn_state或者菜单神马的只要绑定都可以执行哦 GooMenu：与菜单按钮绑定的浮动菜单列(只有当按钮类型为btn_menu或者menu时，该项才有意义),实际上GooMenu为一个GooContextMenu控件类对象 该对象的结构请参考GooContextMenu控件类的API说明书。 }