Jquery 易ui标签组件标签使用详解(10)

本文分享Jquery Easyui标签组件的实现代码，供大家参考。具体内容如下

装载方法

类别加载

div class=' easui-tab ' style=' width : 400 px；height : 250 px ' Div title=' Tab1 '数据-选项=' closable : true ' Tab 1/Div title=' Tab2 '数据-选项=' closable : true ' Tab2/Div title=' Tab3 '数据-选项=' iconcls: '图标-重新加载'，closable : true ' Tab3/Div/Div js调用加载

div id=' box ' style=' width : 400 px；height : 250 px ' div title=' Tab1 '数据-选项=' closable : true ' Tab 1/div title=' Tab2 '数据-选项=' closable : true ' Tab2/div title=' Tab3 '数据-选项=' iconCls: '图标-重新加载'，closable : true ' Tab3/div/div script $(function(){ $(' # box ')。制表符({//制表符容器的宽度为： 500，//项目卡容器的高度为： 400，//是否显示控制面板的背景。Plain : false，//标签是否会被其容器fit :覆盖false，//是否显示标签容器边框的边框： true，//每次滚动的标签滚动条的像素值为scrollIncrement : 200。//每个滚动动画的时长为scrollduration : 400。//工具栏被添加到选项卡面板标题的左侧或右侧。工具：[{ icon cls 3360 ' icon-add '，处理程序3360 function () {alert ('add！');}，}]，//工具栏位置toolPosition : 'left '，//选项卡位置tabPosition : 'left '，//选项卡标题宽度，Headerwid: 300仅在tab position属性设置为' left '或' right '时有效。//选项卡条的宽度tabwidth3360 250，//选项卡条的高度tabHeight : 25，//初始化并选择一个选项卡页。从0中选择： 2。//showheader : true })；});/script属性列表

事件列表

$ (function () {$ ('# box '))。当ajax选项卡面板加载完远程数据时，就会触发tab({//了。onLoad :函数(pannel) { alert(面板)；}，//用户在选择选项卡面板时触发select :函数(标题、索引){alert(标题“|”索引)；}，//当用户取消选择选项卡面板时触发。//(选择另一个时，先触发前一个的这个方法，再触发下一个的onSelect方法)在unselect 3360函数(title，index){ alert(title ' | ' index)；}，//在选项卡面板关闭时触发，返回false取消关闭操作onbeforecolose :函数(title，index){ alert(title ' | ' index)；返回false}、//关闭选项卡面板时触发onclose :函数(标题、索引){alert(标题“|”索引)；}、//在添加新的选项卡面板时触发onadd:函数(标题、索引){alert(标题“|”索引)；}、//更新时触发：函数(标题、索引){更新选项卡面板时出现警报(标题“|”索引)；}，//当右键单击选项卡面板时，触发oncontext menu:函数(e，title，index){ alert(e ' | ' title ' | ' index)；} }) ;});方法列表

//返回属性对象console.log ($ ('# box ')。制表符('选项')；//返回所有选项卡面板console.log ($ ('# box ')。制表符('制表符')；//添加一个制表符$(“# box”)。制表符(' add '，{title :' new panel '，selected : false，})；//选择tab $('#box ')。带有指定下标的制表符(' select '，1)；//取消选择标签$(“# box”)。带有指定下标的制表符(' select '，0)；//关闭标签$('#box ')。带有指定下标的制表符(' close '，1)；//重新调整面板布局和大小$('#box ')。制表符('调整大小')；//指定下标选项卡是否存在console.log ($ ('# box ')。制表符('存在'，4))；//获取选项卡console.log ($ ('# box ')。带有指定下标的制表符(' gettab '，1))；//获取指定面板的index console . log($(' # box ')。制表符(' gettabindex '，' # tab 2 ')；//获取选定的选项卡console . log($(“# box”))。制表符(' get selected ')；//显示选项卡标题$('#box ')。制表符(' ShowHeader ')；//隐藏标签标题$('#box ')。制表符(' HideHeader ')；//更新选项卡$ ('# box ')。制表符(' update '，{tab: $ ('# tab2 ')，选项3360 {title :' new title '，} })；//禁用标签$('#box ')。指定下标或标题的制表符(' disableTab '，1)；$('#box ')。制表符(' disableTab '，' Tab 2 ')；//启用tab $('#box ')。带有指定下标或标题的制表符(' enableTab '，1)；$('#box ')。制表符(' enableTab '，' Tab 2 ')；//滚动选项卡标题，正值向左，负值向右$(“# box”)。制表符(' scrollBy '，100)；//您可以使用$ . fn . tab . defaults来覆盖默认值对象。$ . fn . tab . defaults . border=false；以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。