【连载】研究EasyUI系统— Tabs组件

作者: 我想我是人 | 来源:发表于2017-02-24 18:20 被阅读298次

tabs组件是一系列面板的集合，不论在web亦或是其他客户端系统，tabs都是常用的组件。我们结合由accordion组件做成的导航菜单，来看一下tabs的用法。accordion组件请参阅：
http://www.jianshu.com/p/6a06bf5aedcd

tabs组件效果图

右侧就是通过导航菜单打开的tabs标签页。示例代码主要包含三个页面，分别为tabsDemo.php、cby.php和xx.php，前者包含导航菜单和tabs显示页框架，后者是具体的内容页面。
　　
tabsDemo.php

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
        <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" />
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <title>accordionDemo</title>
        <style>
            a {
                text-decoration:none;
                font-size: 13px;
                color:black
            }
            .nav-left {
                float:left;
                width:200px;
                height:400px;
                margin-right: 20px;
            }
            .nav-item {
                padding: 10px;
                height: 328px;
                border: none;
            }
            .contianer {
                width:100%;
}
        </style>
        
        <script>
            function addTab(url,title) {
                if ($("#content_tab").tabs('exists', title)) {
                    $("#content_tab").tabs('select', title);
                }
                else {
                    $("#content_tab").tabs('add', {
                        title: title,
                        href: url,
                        closable: true,
                        cache:false
                    });
                }
            }
        </script>
    </head>
    <body>
        <div class="container">
            <!-- 左侧导航由accordion构建的导航菜单 -->
            <div id="nav_menu" class="easyui-accordion nav-left">
                <div title="灵长类" class="nav-item">
                    <table>
                        <tr><td>< img src="image/nav_monkey.png" alt="" /></td><td><a href="javascript:void(0);" onclick="addTab ('cby.php', '长臂猿')">长臂猿</a></td></tr>
                        <tr><td>< img src="image/nav_monkey.png" alt="" /></td><td><a href=" javascript:void(0)" onclick="addTab ('xx.php', '猩猩')">猩猩</a></td></tr>
                        <tr><td>< img src="image/nav_monkey.png" alt="" /></td><td><a href="#">卷尾猴</a></td></tr>
                    </table> 
                </div>
                <div title="龟类" class="nav-item">
                    <table>
                        <tr><td>< img src="image/nav_turtle.png" alt="" /></td><td><a href="#">草龟</a></td></tr>
                        <tr><td>< img src="image/nav_turtle.png" alt="" /></td><td><a href="#">巴西龟</a></td></tr>
                        <tr><td>< img src="image/nav_turtle.png" alt="" /></td><td><a href="#">金钱龟</a></td></tr>
                    </table> 
                </div>
            </div>
            
            <!-- 右侧由tabs构建的内容显示页面 -->
            <div id="content_tab" class="easyui-tab" data-options="width:500,height:400"></div>
        </div>
    </body>
</html>

cby.php

<html>
    <head>
        <meta charset="UTF-8">
        <title>长臂猿</title>
        <style>
            .logo {
                margin: 10px;
                width:80px;
                height:120px;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="contianer">
            < img id="logo" src="image/cby.jpg" />
            <p style="margin:20px">
                长臂猿（学名：Hylobatidae）：是灵长目一科动物的通称，有4属16种。因臂特别长而得名。
                …………
            </p>
        </div>
    </body>
</html>

xx.php页面与cby.php类似，故不再写出。
　　上例代码通过addTab方法，每点击菜单链接，便打开一个新的tabs标签页，如果该页已经打开，则切换到该页。
　　
tabs组件属性：

属性名称	属性值类型	属性默认值	描述
width	数值	auto	tabs组件宽度。
height	数值	auto	tabs组件高度。
plain	布尔值	false	如为true，标签页横条将不会有背景图，反之则有背景图。
fit	布尔值	false	是否填充父组件。
border	布尔值	true	是否显示tabs组件容器边框。
scrollIncrement	数值	100	滚动条上（下）按钮点击一次后，滚动条移动的像素。
scrollDuration	数值	400	滚动条滚动时动画效果的持续时间，以毫秒计。
tools	json或选择器	null	工具栏按钮。
toolPosition	字符串	“right”	工具看位置，可以是"left""right"。<br />1.3.2及以上版本支持。
tabPosition	属字符串	“top”	标签页的位置，可以是<br />"left""right""top""bottom"。<br /> 1.3.2及以上版本支持。
headerWidth	数值	150	标签页头部宽度。仅在tabPosition属性为"left"或"right"情况下才适用。<br />1.3.2及以上版本支持。
tabWidth	数值	auto	标签页宽度。1.3.4及以上版本支持。
tabHeight	数值	27	标签页高度。1.3.4及以上版本支持。
selected	数值	0	初始时被选中的标签页的索引。1.3.5及以上版本支持。
showHeader	布尔值	true	是否显示组件头部。1.3.5及以上版本支持。

过于简单的属性不再细说，看表格中的描述即可。
　　plain属性设置与否的效果如下：

plain属性效果图

tools是工具栏按钮，用法和示例图请看下面。
tools工具栏用法示例1

<script>
    var myTools = [{
        iconCls:'icon-add',
        text:'新增物种',
        handler:function() {……}
    },"-",{
        iconCls:'icon-cancel',
        text:'删除物种',
        handler:function() {……}
    },"-",{
        iconCls:'icon-edit',
        text:'修改物种',
        handler:function() {……}
    }];
            
    $("#content_tab").tabs({
        tools:myTools
    });
</script>

tools工具栏用法示例2

<div id="myTools">
    <a href="javascript:void(0)" class="easyui-linkbutton"
        data-options="plain:true,iconCls:'icon-add'"
        onclick="addSpecies()">新增物种</a>
        
    <a href="javascript:void(0)" class="easyui-linkbutton"
        data-options="plain:true,iconCls:'icon-cancel'"
        onclick="delSpecies()">删除物种</a>
        
    <a href="javascript:void(0)" class="easyui-linkbutton"
        data-options="plain:true,iconCls:'icon-edit'"
        onclick="editSpecies()">修改物种</a>
</div>

<script>
    function addSpecies() {……}
    function delSpecies () {……}
    function editSpecies () {……}

    $("#content_tab").tabs({
        tools: "#myTools"
    });
</script>

tools工具栏效果图

图中tabs组件右上角显示了“新增物种”、“删除物种”、“修改物种”三个按钮，开发者可根据实际业务书写代码。工具栏按钮可以有两种写法，已通过代码举例。第一种写法通过json，以js脚本方法构建；第二种则以linkbutton组件为基础构建。在第一种写法中，每个按钮通过“-”（英文减号）作为分隔符。
　　toolPosition属性指定上述工具栏按钮的位置，默认为“right”，即我们在图中看到的右侧。当然我们也可以将他定义到左侧，值设为“left”即可。
　　tabPosition属性指定tab页面的位置，分别有"top"、"bottom"、"left"、"right"四个位置。

tabPosition属性为left时的效果图

上面介绍的属性是tabs组件的属性，接下去介绍一下标签页的属性。我们每点击一个左侧的导航菜单，打开的都是一个标签页，标签页依赖于panel组件，可以认为标签页就是专属于tabs组件的panel。标签页和panel组件有共同的属性，分别为“id”、“title”、“content” 、“href” 、“cache” 、“iconCls” 、“width” 、“height”、“collapsible”，这些属性请详见panel组件一文。
　　另外，标签页还有“closable” 、“selected”是其独有的。两个属性均为布尔值。closable属性指明是否显示关闭按钮；selected决定该标签页是否被选中。
　　
tabs组件方法：

方法名称	参数	描述
options	无	返回所有属性。
tabs	无	返回所有标签页。
resize	无	重置组件大小。
add	options	新增标签页，options包含标签页各属性的json。
close	which	关闭标签页，参数which可以是标签页标题，也可以是索引。
getTab	which	返回指定的标签页。参数同上。
getTabIndex	tab	返回指定标签页的索引，参数tab是标签页对象。
getSelected	无	获取选中的标签页，返回标签页对象。
select	which	选中指定的标签页，参数同close方法。
unselect	which	取消选中的标签页，参数同close方法。<br />1.3.5及以上版本支持。
showHeader	无	显示tabs组件头部。
hideHeader	无	隐藏tabs组件头部。
exists	which	确认指定的标签页是否存在，参数同close方法，返回布尔值。
update	param	更新指定的标签页，参数为json对象。
enableTab	which	启用指定的标签页。1.3及以上版本支持。
disableTab	which	禁用指定的标签页。1.3及以上版本支持。
scrollBy	deltaX	根据参数给定的像素值滚动组件头部。<br />正值滚动条向左滚动，负值则向右滚动。<br />1.3.2及以上版本支持。

tabs方法用于获取所有标签页。下例代码获取所有标签页，并依次清空标签页内容。

<script>
    var t_panel = $("#content_tab").tabs("tabs");
    for(var i=0;i< t_panel.length;i++) {
    /* 标签页依赖于panel，因此语法使用“$(…).panel”形式 */
        $(t_panel[i]).panel("clear");
    }
</script>

add方法用于新增一个标签页，我们通过下面代码来说明。

<script>
    var tabPanel = {
        title:"新的标签页",
        href:"newTab.php",
        iconCls:"icon-add",
        selected:false,
    };
    $("#content_tab").tabs("add",tabPanel);
</script>

上例演示了add方法的用法，tabPanel是一组json形式的属性集合，它是标签页的相关属性，内容请参见panel组件属性。iconCls显示了标签页头部的图标，selected属性决定新标签页是否默认为选中状态。由于新标签页加载的页面“newTab.php”非常简单，此处不列出代码。效果如下：

add方法的效果图

图中标签页标题左侧还有“+”图标，这可以通过指定iconCls属性实现。
　　showHeader和hideHeader决定显示和隐藏头部，即标题部分，区别如下图：

显示和隐藏头部后的效果图

exists方法确定给定的标签页是否存在，返回true或者false。
　　update方法更新指定标签页，此方法有三个参数，其一是tab，即待更新的标签页（此例为选中的标签页）；其二为type,有“all”、“header”、“body”之分，分别为更新全部、仅更新头部、仅更新内容部分；其三为options，也就是panel属性集合，与add方法中的tabPanel一致。

<script>
    /* 定义待更新的标签页属性 */
    var new_tab_options = {
        title:"更新后的标签页",
        href:'updated.php'
    };

    /*获取选中的标签页 */
    var updated_tab = $("#content_tab").tabs("getSelected"); 

    /* 更新选中的标签页 */
    $("#content_tab").tabs("update",{
        tab:updated_tab,
        type:"all",
        options:new_tab_options
    });
</script>

tab组件中，很多方法的参数是“which”，它既可以是标签页的标题（title属性，如“长臂猿”），也可以是该标签页的索引（索引从0开始）。
　　
tabs组件事件：

事件名称	参数	描述
onLoad	panel	标签页加载完毕后触发，参数为当前标签页。
onSelect	title,index	标签页选中时触发。<br />参数title和index分别为标题与索引。
onUnselect	title,index	标签页取消选中时触发。参数同上。<br />1.3.5及以上版本支持。
onBeforeClose	title,index	关闭标签页之前触发。<br />如果事件代码返回false则不关闭。参数同上。
onClose	wtitle,index	关闭标签页后触发。参数同上。
onAdd	title,index	新增标签页完成后触发。参数同上。
onUpdate	title,index	更新标签页完成后触发。参数同上。
onContextMenu	e,title,index	右击标签页是触发。参数title和index同上。<br />e为html dom中的Event对象。

事件不复杂，不多说。onContextMenu事件在菜单组件中予以说明。

【连载】研究EasyUI系统— Tabs组件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

程序员