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教程