EasyUI之Tabs基本用法

時間  2019-11-07
標籤 easyui tabs 基本 用法 简体版
原文   原文鏈接

依賴

  • panel
  • linkbutton

建立標籤頁（Tabs）

一、經過標記建立標籤頁（Tabs）javascript

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
</head>

<body>
    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="Tab1" style="padding:10px;">
            tab1
        </div>
        <div title="Tab2" data-options="closable:true" style="padding:10px;">
            tab2
        </div>
        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:10px;">
            tab3
        </div>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#tt").tabs({
			selected:2,
            //  onBeforeClose:function(title){
            //     return confirm("are you sure you want to close" + title)
            // }
            onBeforeClose:function(title,index){
                var target = this;
                $.messager.confirm("Confirm","Are  you sure your want to close" + title,function(r){
                    if(r){
                        var opts = $(target).tabs("options");
                        var bc = opts.onBeforeClose;
                        opts.onBeforeClose = function(){};
                        $(target).tabs("close",index);
                        opts.onBeforeClose = bc;

                    }
                });
                return false;
            }
		})
       
	});
	//設置默認選項卡能夠在div的 data-options="closable:true,selected:true" 或者js設置
	</script>
</body>

</html>

二、編程建立標籤頁（Tabs） php

<!DOCTYPE html> 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>jQuery EasyUI Demo</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../plugins/easyUI/themes/material/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../plugins/easyUI/themes/icon.css">
    <!-- <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css"> -->
</head>
<body style="padding:15px;">
    <div id="tt" style="">
    </div>
    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <script src="../../plugins/easyUI/jquery.easyui.min.js"></script>
    <script>
    var height = $(window).height()-30;
    //如今咱們編程建立標籤頁（Tabs），咱們同時捕捉 'onSelect' 事件。
    $("#tt").tabs({
        border: true,
        //width:"100%",不設置100% 默認也是100%
        height:height,
		selected:1,
        //fit:true,設置後效果很差
        onSelect: function(title) {
            console.log(title + ' is selected');
        }
    })
    //添加新的標籤頁面板（tab panel）
    $('#tt').tabs('add', {
        title: 'New Tab',
        content: 'Tab Body',
        closable: true,
        tools: [{
            iconCls: 'icon-mini-refresh',
            handler: function() {
                alert('refresh');
            }
        }]
    });
    $('#tt').tabs('add', {
        title: 'Next Tab',
        content: 'next Tab Body',
        closable: true,
        
    });
    </script>
</body>

</html>

 標籤頁方法

名稱 參數 描述
options none 返回標籤頁（tabs）選項（options）。
tabs none 返回所有的標籤頁面板（tab panel）。
resize none

調整標籤頁（tabs）容器的尺寸並作佈局。css

setTimeout(function(){$('#tt').tabs('resize', {
                width: '100%'
})},400)html
add options

添加一個新的標籤頁面板（tab panel），options 參數是一個配置對象，更多詳細信息請參見標籤頁面板（tab panel）屬性。
當添加一個新的標籤頁面板（tab panel）時，它將被選中。
如需添加一個未選中的標籤頁面板（tab panel），請記得設置 'selected' 屬性爲 false。java

// add a unselected tab paneljquery

$('#tt').tabs('add',{web

title: 'new tab',ajax

selected: false編程

//...bootstrap

});
close which 關閉一個標籤頁面板（tab panel），'which' 參數能夠是要被關閉的標籤頁面板（tab panel）的標題（title）或索引（index）。
getTab which 獲取指定的標籤頁面板（tab panel），'which' 參數能夠是標籤頁面板（tab panel）的標題（title）或索引（index）。
getTabIndex tab 獲取指定的標籤頁面板（tab panel）索引。
getSelected none 獲取選中的標籤頁面板（tab panel）。下面的實例演示如何獲取選中的標籤頁面板（tab panel）的索引。

var tab = $('#tt').tabs('getSelected');

var index = $('#tt').tabs('getTabIndex',tab);

alert(index);
select which 選擇一個標籤頁面板（tab panel），'which' 參數能夠是標籤頁面板（tab panel）的標題（title）或索引（index）。
unselect which 選擇一個標籤頁面板（tab panel），'which' 參數能夠是標籤頁面板（tab panel）的標題（title）或索引（index）。該方法自版本 1.3.5 起可用。
showHeader none 顯示標籤頁（tabs）頭部。該方法自版本 1.3.5 起可用。
hideHeader none 隱藏標籤頁（tabs）頭部。該方法自版本 1.3.5 起可用。
exists which 指示指定的面板是否已存在，'which' 參數能夠是標籤頁面板（tab panel）的標題（title）或索引（index）。
update param 更新指定的標籤頁面板（tab panel），param 參數包含兩個屬性：
tab：被更新的標籤頁面板（tab panel）。
options：面板（panel）的選項（options）。

代碼實例：

// update the selected panel with new title and content

var tab = $('#tt').tabs('getSelected'); // get selected panel

$('#tt').tabs('update', {

tab: tab,

options: {

title: 'New Title',

href: 'get_content.php' // the new content URL

}});

// call 'refresh' method for tab panel to update its content

var tab = $('#tt').tabs('getSelected'); // get selected panel

tab.panel('refresh', 'get_content.php');
enableTab which 啓用指定的標籤頁面板（tab panel），'which' 參數能夠是標籤頁面板（tab panel）的標題（title）或索引（index）。該方法自版本 1.3 起可用。

代碼實例：

$('#tt').tabs('enableTab', 1); // enable the second tab panel

$('#tt').tabs('enableTab', 'Tab2'); enable the tab panel that has 'Tab2' title
disableTab which 禁用指定的標籤頁面板（tab panel），'which' 參數能夠是標籤頁面板（tab panel）的標題（title）或索引（index）。該方法自版本 1.3 起可用。
代碼實例：

$('#tt').tabs('disableTab', 1); // disable the second tab panel.

 標籤頁屬性

width number 標籤頁（Tabs）容器的寬度。 auto
height number 標籤頁（Tabs）容器的高度。 auto
plain boolean 當設置爲 true 時，就不用背景容器圖片來呈現 tab 條。 false
fit boolean 當設置爲 true 時，就設置標籤頁（Tabs）容器的尺寸以適應它的父容器。 false
border boolean 當設置爲 true 時，就顯示標籤頁（Tabs）容器邊框。 true
scrollIncrement number 每按一次 tab 滾動按鈕，滾動的像素數。 100
scrollDuration number 每個滾動動畫應該持續的毫秒數。 400
tools array,selector 放置在頭部的左側或右側的工具欄，可能的值：
一、數組，指示工具組，每一個工具選項都和連接按鈕（Linkbutton）同樣。
二、選擇器，指示包含工具的 <div>。

代碼實例：
經過數組定義工具。

$('#tt').tabs({

tools:[{

iconCls:'icon-add',

handler:function(){

alert('add')

}

},{

iconCls:'icon-save',

handler:function(){

alert('save')

}

}]

});

經過已有的 DOM 容器定義工具。

$('#tt').tabs({

tools:'#tab-tools'

});

<div id="tab-tools">

<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>

<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>

</div>

 null
toolPosition string 工具欄位置。可能的值：'left'、'right'。該屬性自版本 1.3.2 起可用。 right
tabPosition string 標籤頁（tab）位置。可能的值：'top'、'bottom'、'left'、'right'。該屬性自版本 1.3.2 起可用。 top
headerWidth number 標籤頁（tab）頭部寬度，只有當 tabPosition 設置爲 'left' 或 'right' 時纔有效。該屬性自版本 1.3.2 起可用。 150
tabWidth number tab 條的寬度。該屬性自版本 1.3.4 起可用。 auto
tabHeight number tab 條的高度。該屬性自版本 1.3.4 起可用。 27
selected number 初始化選定的標籤頁索引。該屬性自版本 1.3.5 起可用。 0
showHeader boolean 當設置爲 true 時，顯示標籤頁（tab）頭部。該屬性自版本 1.3.5 起可用。 true

標籤頁事件

名稱 參數 描述
onLoad panel 當一個 ajax 標籤頁面板（tab panel）完成加載遠程數據時觸發。
onSelect title,index 當用戶選擇一個標籤頁面板（tab panel）時觸發。
onUnselect title,index 當用戶未選擇一個標籤頁面板（tab panel）時觸發。該事件自版本 1.3.5 起可用。
onBeforeClose title,index 當一個標籤頁面板（tab panel）被關閉前觸發，返回 false 就取消關閉動做。下面的實例演示如何在關閉標籤頁面板（tab panel）前顯示確認對話框。

$('#tt').tabs({

onBeforeClose: function(title){

return confirm('Are you sure you want to close ' + title);

}

});

// using the async confirm dialog

$('#tt').tabs({

onBeforeClose: function(title,index){

var target = this;

$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){

if (r){

var opts = $(target).tabs('options');

var bc = opts.onBeforeClose;

opts.onBeforeClose = function(){}; // allowed to close now

$(target).tabs('close',index);

opts.onBeforeClose = bc; // restore the event function

}

});

return false; // prevent from closing

}

});
onClose title,index 當用戶關閉一個標籤頁面板（tab panel）時觸發。
onAdd title,index 當一個新的標籤頁面板（tab panel）被添加時觸發。
onUpdate title,index 當一個標籤頁面板（tab panel）被更新時觸發。
onContextMenu e, title,index 當一個標籤頁面板（tab panel）被右鍵點擊時觸發。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程