【EasyUI篇】Tabs选项卡组件

微信公众号:程序yuan
关注可了解更多的教程。问题或建议,请公众号留言;

查看--> 全套EasyUI示例目录

8.Tabs选项卡组件

【EasyUI篇】Tabs选项卡组件_第1张图片

【EasyUI篇】Tabs选项卡组件_第2张图片

【EasyUI篇】Tabs选项卡组件_第3张图片

【EasyUI篇】Tabs选项卡组件_第4张图片

【EasyUI篇】Tabs选项卡组件_第5张图片

【EasyUI篇】Tabs选项卡组件_第6张图片

 

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    Panel
    
    
    
    
    
    
    
    
    



<%--使用class加载方式--%>
   <%-- 
        
            TAB1
        
                     TAB2         
                     TAB3         
    
--%>                           TAB1         
                     TAB2         
                     TAB3         
    
    添加选项卡     关闭第二个选项卡     获取第三个选项卡     获取title为Tab1的选项卡的索引     获取选择的选项卡面板     选择第二个面板     取消选择第二个面板     显示选项卡的标签头     隐藏选项卡的标签头

    判断Tab2选项卡是否存在     更新第一个选项卡     禁用第三个选项卡     启用第三个选项卡     滚动选项卡

JS文件

$(function () {

    $("#box").tabs({
//---------- 属性列表 --------------
        width:600,
        height:400,
        //设置是否显示控制面板背景
        plain:false,
        //选项卡的大小将铺满它所在的容器,默认为false
        fit:false,
        //设置是否显示选项卡的边框,默认为true,
        border:true,
        // tabWidth:300,
        //选项卡滚动条每次滚动的像素值
        // scrollIncrement:100,
        //每次滚动持续的动画事件
        // scrollDuration:100,
        //tab选项卡的宽和高
        tabWidth:100,
        tabHeight:30,
        //设置选项卡的位置 left right top bottom
        tabPosition:'top',
        //header tab选项卡所在的位置的宽度,只要在tabPosition为left或right时有效
        // headerWidth:50,
        //初始化时选中那个tab,默认为0,【0,1,2...】
        selected:0,
        //设置是否显示选项卡头部,默认为true,
        showHeader:true,
        //通过数组,也可以通过选择器
        tools:[
            {
                iconCls:'icon-add',
                handler:function () {
                    alert("add");
                }
            },{
                iconCls:'icon-remove',
                handler:function () {
                    alert("删除");
                }
            }
        ],
        //工具栏的位置:left,right
        toolPosition:'right',

//--------------- 事件列表 ------------------
        //选中某一个选项卡时触发。
        onSelect:function (title,index) {
            // alert("title:"+title+", index:"+index);
        },
        //释放某一个选中卡时触发
        onUnselect:function (title,index) {
            // alert("title:"+title+", index:"+index);
        },
        //关闭选项卡之前触发
        onBeforeClose:function (title,index) {
            // alert("title:"+title+",index:"+index);
        },
        //关闭选项卡之后触发
        onClose:function (title,index) {
            alert("title:"+title+",index:"+index);
        },
        //鼠标右击某个选项卡时触发
        onContextMenu:function (e,title,index) {
            console.log(e);
            console.log(title);
            console.log(index);
        },
        onLoad:function (panel) {
            console.log("在加载时触发");
            console.log(panel);
        },
        onAdd:function (title,index) {
            alert("添加选项卡时触发,title:"+title+", index:"+index);
        },
        onUpdate:function (title,index) {
            alert("选项卡更新时触发");
        }


    });

// ------------ 方法列表 ---------------
    //返回属性对象
    console.log($('#box').tabs('options'));
    //返回所有选项卡面板
    console.log($("#box").tabs('tabs'));
    //重置容器和选项卡的大小
    $("#box").tabs('resize');

    //添加一个选项卡
    $("#btn1").click(function () {
        $("#box").tabs('add',{
            title:"new tab",
            //设置选项卡是否可以折叠
            collapsible:true,
            //设置为选中状态
            selected:true,
            //设置是否可以关闭
            closable:true,
            href:'http://localhost:8081/easyui/getUsers.action',
            iconCls:'icon-add',
        });
    });

    //关闭选项卡
    $("#btn2").click(function () {
        //关闭选项卡,参数可以是index,也可以是title
        $("#box").tabs('close',1);
        // $("#box").tabs('close','Tab2');
    });

    //获取指定选项卡
    $("#btn3").click(function () {
        //获取选选项卡,参数可以是index,也可以是title
        console.log($("#box").tabs('getTab',2));
    });

    //获取选项卡的索引
    $("#btn4").click(function () {
        //获取选选项卡,参数可以是index,也可以是title
        alert($('#box').tabs('getTabIndex',$('#box').tabs('getTab','Tab1')));
    });

    //获取选择的选项卡面板
    $("#btn5").click(function () {
        console.log($('#box').tabs('getSelected'));
    });

    //选择面板
    $("#btn6").click(function () {
        $('#box').tabs('select','Tab2');
    });

    //取消选择面板
    $("#btn7").click(function () {
        $('#box').tabs('unselect','Tab2');
    });

    //显示选项卡的标签头
    $("#btn8").click(function () {
        $('#box').tabs('showHeader');
    });

    //隐藏选项卡的标签头
    $("#btn9").click(function () {
        $('#box').tabs('hideHeader');
    });

    //判断指定选项卡是否存在(参数可以是title或index)
    $("#btn10").click(function () {
        alert($('#box').tabs('exists','Tab2'));
    });

    //更新面板
    $("#btn11").click(function () {
        $('#box').tabs('update',{
            tab:$('#box').tabs('getTab',0),
            options:{
                title:"更新标题",
            }
        });
    });

    //禁用指定选项卡(参数可以是title或index)
    $("#btn12").click(function () {
        $('#box').tabs('disableTab','Tab3');
    });

    //启用指定选项卡(参数可以是title或index)
    $("#btn13").click(function () {
        $('#box').tabs('enableTab','Tab3');
    });


    $("#btn14").click(function () {
        $('#box').tabs('scrollBy',100);
    });

});

效果图

【EasyUI篇】Tabs选项卡组件_第7张图片

 

------------------------------------------------

关注小编微信公众号获取更多资源

 

你可能感兴趣的:(前端框架EasyUI)