溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
簡單介紹:
說明: ($fn.tabs)選項卡,依賴panel和linkbutton組件,常作為面板集合顯示,但一次只能顯示一個,每個Tab面板都擁有頭部標題和一些工具按鈕,包括關閉按鈕和自定義按鈕.
基礎用法:
<div id="tt" class="easyui-tabs" > <div data-options="title:'Tab_1標題',closable:true">Tab_1主題</div> <div data-options="title:'Tab_2標題',closable:true">Tab_2主題</div> <div 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
<div id="tt" class="easyui-tabs" data-options="tools:'#tools',toolPosition:'right',tabPosition:'left'"> <div data-options="title:'Tab_1標題',closable:true">Tab_1主題</div> <div data-options="title:'Tab_2標題',closable:true">Tab_2主題</div> <div 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就取消關閉動作
<div id="t" class="easyui-tabs" data-options="">
<div data-options="title:'Tab_1標題',closable:true,href:'/easyui/data.json'"></div>
<div data-options="title:'Tab_2標題',closable:true">Tab_2主題</div>
<div 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被右鍵點擊時觸發
<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" data-options="">
<div data-options="title:'Tab_1標題',closable:true,href:'/easyui/data.json'"></div>
<div data-options="title:'Tab_2標題',closable:true">Tab_2主題</div>
<div 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
說明: 通過指定像素數滾動標簽頁頭部,負數表示到右邊,正值表示向左邊
<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" data-options="tabWidth:300">
<div data-options="title:'Tab_1標題',closable:true,href:'/easyui/data.json'"></div>
<div data-options="title:'Tab_2標題',closable:true">Tab_2主題</div>
<div data-options="title:'Tab_3標題',closable:true">Tab_3主題</div>
</div>面板屬性(附加):
closable -> boolean
說明: 當顯示為true時,標簽頁面板將顯示一個關閉按鈕,點擊就能關閉這個面板
selected -> boolean
說明: 當設置為true時,標簽頁面板被選中.
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
