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

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事件在菜单组件中予以说明。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,053评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,527评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,779评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,685评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,699评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,609评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,989评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,654评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,890评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,394评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,976评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2赞 342

推荐阅读更多精彩内容

  • Bootstrap（基础二）
    第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根...
    凛0_0阅读 4,929评论 0赞 66
  • 源码众享最新教程 - 草稿
    ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程，因...
    小菜c阅读 6,351评论 0赞 17
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,418评论 25赞 707
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4赞 62
  • 基础语法总结
    1.c++ .c/.mm 2013 OC第三 2.c语言字符串，使用字符数组构成，或者指针，清空指针NULL, 0...
    石玉龙阅读 199评论 0赞 0