页面新开Tab页实现方式

最新推荐文章于 2022-11-24 08:51:32 发布

HoldOnBoy

最新推荐文章于 2022-11-24 08:51:32 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/dongpoji/article/details/18183059

版权

从毕业到现在接触的东西越来越多，慢慢的发现很多东西都可以进行归纳和整理的。今日，偶尔看项目中的Tab页展现方式，就随手去网上找了下资料，发现这个还是很不错的，方便以后使用，就进行一下记录。

页面基础代码

$(document).ready(function(){
        tabpanel= new TabPanel({
            renderTo:'tab', //把tabpanel放在一个div中，div的id为tab
            width:600, //tabpanel宽度
            height:300, //tabpanel高度
            border:'5', //tabpanel的边框，不为'none'即可，若为'none'则没有边框
            active : 1,//默认激活的tab索引数，此处为第二个，索引从0开始
            tabWidth:114,//顶上tab标签页的宽度
            maxLength:10,//可添加的tab元素的最大个数
            items : [
                {
                  id:'toolbarPlugin0',//标签的id，此id必须在该html中唯一
                  title:'Closable0',//顶上标签的标题
                  html:"toolbarPlugin0"//标签的内容
                },
                {id:'toolbarPlugin1',title:'Closable1',html:"toolbarPlugin1"},
                {id:'toolbarPlugin2',title:'Closable2',html:"toolbarPlugin2"},
                {id:'toolbarPlugin3',title:'Closable3',html:"toolbarPlugin3"},
                {id:'toolbarPlugin4',title:'Closable4',html:"toolbarPlugin4"}
            ]
          });
});

具体新开Tab也的方法：

添加tab，如果该tab已经被添加，则将其设置为激活状态，addTab按钮点击后执行的方法：
     function addTab(i){
        //item元素
        var item={
            loadnow:true,//立即显示并激活
            id:'toolbarPlugin',//标签的id，此id必须在该html中唯一
            title:'Closable',//顶上标签的标题
            html:"toolbarPlugin"//标签的内容
        };
        //设置id，title，html等
        item.id=item.id+i;
        item.title=item.title+i;
        item.html=item.html+i;
        //调用组件中的tabpanel的addTab方法添加tab
        tabpanel.addTab(item);
     }