简单介绍:
说明: ($fn.tabs)选项卡,依赖panel和linkbutton组件,常作为面板集合显示,但一次只能显示一个,每个Tab面板都拥有头部标题和一些工具按钮,包括关闭按钮和自定义按钮.
基础用法:
1 2 3 4 5 | < div id = "tt" class = "easyui-tabs" style = "width:500px;height:250px;" > < div style = "padding: 10px;" data-options = "title:'Tab_1标题',closable:true" >Tab_1主题</ div > < div style = "padding: 10px;" data-options = "title:'Tab_2标题',closable:true" >Tab_2主题</ div > < div style = "padding: 10px;" data-options = "title:'Tab_3标题',closable:true" >Tab_3主题</ div > </ div > |
容器属性:
width -> number
说明: 标签页Tab容器的宽度
height -> number
说明: 标签页Tab容器的高度
plain -> boolean
说明: 是否不显示标签页Tab背景
fit -> boolean
说明: 标签页Tab容器尺寸是否适应它的父容器.
border -> boolean
说明: 是否显示标签页Tab容器边框
scrollIncrement -> number
说明: 当标签页Tab所有宽度超出容器宽度时,两端会出现滚动按钮,可设置每按一次Tab滚动按钮,滚动的像素数,默认100
scrollDuration -> number
说明: 当标签页Tab所有宽度超出容器宽度时,两端会出现滚动按钮,可设置每一个滚动动画应该持续的毫秒数,默认100
tools -> array/selector
说明: 放置在头部的左侧或右侧工具栏,当为数组时,数组元素需要包含iconCls和handler属性,当为选择器时可通过已有的DOM容器定义工具
toolPosition -> string
说明: 工具栏位置,支持left和right,默认为right
tabPosition -> string
说明: 标签页Tab位置,支持left和right和top和bottom,默认为top
1 2 3 4 5 6 7 8 9 10 11 | < div id = "tt" class = "easyui-tabs" style = "width:500px;height:250px;" data-options = "tools:'#tools',toolPosition:'right',tabPosition:'left'" > < div style = "padding: 10px;" data-options = "title:'Tab_1标题',closable:true" >Tab_1主题</ div > < div style = "padding: 10px;" data-options = "title:'Tab_2标题',closable:true" >Tab_2主题</ div > < div style = "padding: 10px;" data-options = "title:'Tab_3标题',closable:true" >Tab_3主题</ div > </ div > < div id = "tools" > < a href = "#" class = "easyui-linkbutton" data-options = "iconCls:'icon-add'" ></ a > < a href = "#" class = "easyui-linkbutton" data-options = "iconCls:'icon-edit'" ></ a > < a href = "#" class = "easyui-linkbutton" data-options = "iconCls:'icon-reload'" ></ a > < a href = "#" class = "easyui-linkbutton" data-options = "iconCls:'icon-help'" ></ a > </ div > |
headerWidth -> number
说明: 标签页Tab头部宽度,只有tabPosition设置为left或right时才有效
tabWidth -> number
说明: 标签页Tab头部宽度,只有tabPosition设置为top或bottom时才有效,超出容器宽度,两端会出现滚动按钮
tabHeight -> number
说明: 标签页Tab头部高度,只有tabPosition设置为top或bottom时才有效
selected -> number
说明: 默认选中指定标签页Tab,索引从0开始
showHeader -> boolean
说明: 是否显示标签页Tab头部
容器事件:
onLoad -> function(panel)
说明: 当一个Ajax标签页面板Panel完成加载远程数据时触发
onSelect -> function(title,index)
说明: 当用户选择一个标签页面板Panel时触发
onUnselect -> function(title,index)
说明: 当用户未选择一个标签页面板Panel时触发
onBeforeClose -> function(title,index)
说明: 当一个标签页面板Panel被关闭时触发,返回false就取消关闭动作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | < div id = "t" class = "easyui-tabs" style = "width:500px;height:250px;" data-options = "" > < div style = "padding: 10px;" data-options = "title:'Tab_1标题',closable:true,href:'/easyui/data.json'" ></ div > < div style = "padding: 10px;" data-options = "title:'Tab_2标题',closable:true" >Tab_2主题</ div > < div style = "padding: 10px;" data-options = "title:'Tab_3标题',closable:true" >Tab_3主题</ div > </ div > <!-- 说明: 加载jquery-easyui脚本文件 --> < script src = "js/jquery-easyui/jquery.min.js" ></ script > < script src = "js/jquery-easyui/jquery.easyui.min.js" ></ script > < script src = "js/jquery-easyui/locale/easyui-lang-zh_CN.js" ></ script > < script type = "text/javascript" > var options = { onLoad:function(panel){ console.log(panel.html()); }, onSelect:function(title,index){ console.log('notice: 标题['+title+'],索引为['+index+']的面板被选中!'); }, onUnselect:function(title,index){ console.log('notice: 标题['+title+'],索引为['+index+']的面板被取消选中!'); }, onBeforeClose:function(title,index){ var target = this; $.messager.confirm('警告', '确认要关闭'+title+'?', function(res){ if(res){ // 当确认要关闭时先保存原来配置对象的onBeforeClose然后替换然后调用其关闭方法,然后再还原 var options = $(target).tabs('options'); var oldOnBeforeClose = options.onBeforeClose; options.onBeforeClose=function(){return true}; $(target).tabs('close', title); options.onBeforeClose = oldOnBeforeClose; }; }); // 默认不允许所有的选项卡Tab被关闭 return false; } }; $('#t').tabs(options); </ script > |
onClose -> function(title,index)
说明: 当用户关闭一个标签面板Panel后触发
onAdd -> function(title,index)
说明: 当一个新的标签页面板Panel被添加时触发
onUpdate -> function(title,index)
说明: 当一个标签页面板Panel被更新时触发
onContextMenu(e,title,index)
说明: 当一个标签页面板Panel被右键点击时触发
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | < div > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:$('#t').tabs('add', {title:'Tab_4标题',selected:false,content:'新增标签页'})" >添加标签页</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:$('#t').tabs('update', {tab:$('#t').tabs('getSelected'),options:{content:'数据被更新'}})" >更新选中标签页</ a > </ div > < hr > < div id = "t" class = "easyui-tabs" style = "width:500px;height:250px;" data-options = "" > < div style = "padding: 10px;" data-options = "title:'Tab_1标题',closable:true,href:'/easyui/data.json'" ></ div > < div style = "padding: 10px;" data-options = "title:'Tab_2标题',closable:true" >Tab_2主题</ div > < div style = "padding: 10px;" data-options = "title:'Tab_3标题',closable:true" >Tab_3主题</ div > </ div > <!-- 说明: 加载jquery-easyui脚本文件 --> < script src = "js/jquery-easyui/jquery.min.js" ></ script > < script src = "js/jquery-easyui/jquery.easyui.min.js" ></ script > < script src = "js/jquery-easyui/locale/easyui-lang-zh_CN.js" ></ script > < script type = "text/javascript" > var options = { onClose:function(title,index){ console.log('notice: 标题为'+title+'编号为'+index+'的选项卡被关闭'); }, onAdd:function(title,index){ console.log('notice: 标题为'+title+'编号为'+index+'的选项卡被创建'); }, onUpdate:function(title,index){ console.log('notice: 标题为'+title+'编号为'+index+'的选项卡被更新'); }, onContextMenu:function(e,title,index){ console.log('notice: 标题为'+title+'编号为'+index+'的选项卡被右键'); } }; $('#t').tabs(options); </ script > |
容器接口:
options -> object
说明: 返回标签页容器选项
tabs -> array
说明: 返回全部的标签页面板
resize -> object
说明: 调整标签页容器的尺寸并做布局
add -> object
说明: 添加一个新的标签页面板,需要传递options配置对象参数,具体参考标签页面板属性,当添加一个新的标签页面板时会默认被选中,如果不想被选中可在配置对象中添加selected:false;
close -> object
说明: 关闭一个标签页面板,需要传递的which参数可以是要被关闭的标签页面板的标题title或索引index
getTab -> object
说明: 获取指定的标签页面板,需要传递的which参数可以是标签页面板的标题title或索引index
getTabIndex -> object
说明: 获取指定标签页面板索引
getSelected -> object
说明: 获取选中的标签页面板
select -> object
说明: 选中一个标签页面板,需要传递的参数which可以是标签页面板的标题title或索引index
unselect -> object
说明: 取消选择一个标签页面板,需要传递的参数which可以是标签页面板的标题title或索引index
showHeader -> object
说明: 显示标签页头部
hideHeader -> object
说明: 隐藏标签页头部
exists -> object
说明: 指定面板是否存在,需要传递的参数which可以是标签页面板的标题title或索引index
update -> object
说明: 更新指定标签页面板,需要传递的param需要包含两个参数tab(标签页面板)和options(面板的配置对象)
enableTab -> object
说明: 启用指定的标签页面板,需要传递的参数which可以是标签页面板的标题title或索引index
disableTab -> object
说明: 禁用指定的标签页面板,需要传递的参数which可以是标签页面板的标题title或索引index
scrollBy -> object
说明: 通过指定像素数滚动标签页头部,负数表示到右边,正值表示向左边
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | < div > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:console.log($('#t').tabs('options'));" >获取配置</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:console.log($('#t').tabs('tabs'));" >获取TABS</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:console.log($('#t').tabs('resize'));" >调整尺寸</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:console.log($('#t').tabs('add', {title:'Tab_4标题',closable:true,href:'/easyui/data.json',selected:false,bodyCls:'tabbody'}));" >添加标签页</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:console.log($('#t').tabs('close', $('#t').tabs('tabs').length-1));" >关闭最后一个标签页</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:console.log($('#t').tabs('getTab', $('#t').tabs('tabs').length-1));" >获取最后一个标签页</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:console.log($('#t').tabs('getTabIndex', $('#t').tabs('getSelected')));" >获取选中标签页索引</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:console.log($('#t').tabs('select', $('#t').tabs('tabs').length-1));" >选中最后一个标签页</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:console.log($('#t').tabs('unselect', $('#t').tabs('getSelected')));" >取消选择选中标签页</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick="(function(){ var options = $('#t').tabs('options'); if(options.showHeader){ $('#t').tabs('hideHeader'); }else{ $('#t').tabs('showHeader'); }; })()">切换显示标签页头部</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:$('#t').tabs('getSelected').panel('refresh', '/easyui/data.json')" >刷新选中标签页内容</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:$('#t').tabs('update', {tab:$('#t').tabs('getSelected'),options:{content:'更新数据'}})" >更新选中标签页内容</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:$('#t').tabs('disableTab', $('#t').tabs('getTabIndex', $('#t').tabs('getSelected')))" >禁用被选中标签页</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:$('#t').tabs('enableTab', $('#t').tabs('getTabIndex', $('#t').tabs('getSelected')))" >启用被选中标签页</ a > < a href = "javascript:void(0);" class = "easyui-linkbutton" onclick = "javascript:$('#t').tabs('scrollBy', 100)" >右移所有的选项卡</ a > </ div > < hr > < div id = "t" class = "easyui-tabs" style = "width:500px;height:250px;" data-options = "tabWidth:300" > < div style = "padding: 10px;" data-options = "title:'Tab_1标题',closable:true,href:'/easyui/data.json'" ></ div > < div style = "padding: 10px;" data-options = "title:'Tab_2标题',closable:true" >Tab_2主题</ div > < div style = "padding: 10px;" data-options = "title:'Tab_3标题',closable:true" >Tab_3主题</ div > </ div > |
面板属性(附加):
closable -> boolean
说明: 当显示为true时,标签页面板将显示一个关闭按钮,点击就能关闭这个面板
selected -> boolean
说明: 当设置为true时,标签页面板被选中.
登录乐搏学院官网http://www.learnbo.com/
或关注我们的官方微博微信,还有更多惊喜哦~
本文出自 “满满李 - 运维开发之路” 博客,请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1895080