easyui学习笔记12—tab标签页的添加和删除

简介: 这一篇我们来看看标签页的添加和删除动作。我在想看这些例子还不如看文档,文档的内容更加全面,但是文档全部是理论没有实际的操作,看起来很枯燥,文档只能是遇到问题的时候查。easyui的文档写的还是很详细的,这点对开发者很重要。

这一篇我们来看看标签页的添加和删除动作。我在想看这些例子还不如看文档,文档的内容更加全面,但是文档全部是理论没有实际的操作,看起来很枯燥,文档只能是遇到问题的时候查。easyui的文档写的还是很详细的,这点对开发者很重要。

1.html代码

    <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:auto;">
        <div title="About" style="padding:10px;">
            <p style="font-size:14px;">jQuery EasyUI framework helps you build your web pages easily.</p>
                <ul>
                    <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                    <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                    <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                    <li>complete framework for HTML5 web page.</li>
                    <li>easyui save your time and scales while developing your products.</li>
                    <li>easyui is very easy but powerful.</li>
                </ul>
        </div>
        <div title="My Documnets" style="padding:10px;">
            <ul class="easyui-tree" data-options="url:'jquery-easyui-1.3.5/demo/tabs/tree_data1.json',method:'get',animate:true"></ul>
        </div>
        <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px;">
            This is the help content.
        </div>
    </div>
    <div id="tab-tools">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick='addPanel()'></a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick='removePanel()'></a>
    </div>

这里给标签页添加了一个工具栏,data-options="tools:'#tab-tools'"注意这里是#所以下面定义工具栏的是时候id="tab-tools"而不是class=“tab-tools”,其他没有什么关于工具栏前面已经介绍了。

2.js代码

        var index = 0;
        function addPanel(){
            index++;
            $('#tt').tabs('add',{
                title:'Tab'+index,
                content:'<div style="padding:10px;">Content'+index+'</div>',
                closeable:true
            });
        }
        
        function removePanel(){
            var tab = $('#tt').tabs('getSelected');
            if(tab){
                var index = $('#tt').tabs('getTabIndex',tab);
                $('#tt').tabs('close',index);
            }
        }

貌似和手风琴的格子的添加和删除的方法是类似的。

            $('#tt').tabs('add',{
                title:'Tab'+index,
                content:'<div style="padding:10px;">Content'+index+'</div>',
                closeable:true
            });

这段是添加一个标签,标签的title是'Tab'+index,内容是'<div style="padding:10px;">Content'+index+'</div>'这样一个标签页

        $("#aa").accordion("add",{
            title:"Title"+idx,
            content:'<div style="padding:10px">Content'+idx+'</div>'
        });
        idx++;

这段是手风琴中添加一个格子的方法,是很类似的,只不过关键字accordion不一样。

        function removePanel(){
            var tab = $('#tt').tabs('getSelected');
            if(tab){
                var index = $('#tt').tabs('getTabIndex',tab);
                $('#tt').tabs('close',index);
            }
        }

这段是删除一个标签的方法,首先找到当前选中的标签的对象,然后如果有选中的标签,找到这个标签的index,最后根据这个index关闭这个标签,这个关闭可能就是删除的功能。

作者:Tyler Ning
出处:http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址williamningdong@gmail.com  联系我,非常感谢。

目录
相关文章
18EasyUI 布局- 添加自动播放标签页(Tabs)
18EasyUI 布局- 添加自动播放标签页(Tabs)
40 0
17EasyUI 布局- 动态添加标签页(Tabs)
17EasyUI 布局- 动态添加标签页(Tabs)
56 0
|
容器
16EasyUI - 创建标签页(Tabs)
16EasyUI - 创建标签页(Tabs)
46 0
|
测试技术
Easyui 去除jquery-easui tab页div自带滚动条
Easyui 去除jquery-easui tab页div自带滚动条
107 0
|
JavaScript 测试技术 索引
Easyui 关闭jquery-easui tab标签页前触发事件
Easyui 关闭jquery-easui tab标签页前触发事件
116 0
|
JavaScript 测试技术
Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计
Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计
117 0
EasyUI–布局和标签页详解
EasyUI的布局非常简单,但是也能充分满足网页日常的布局,先来一个最基本的例子:
366 0
EasyUI–布局和标签页详解
|
JavaScript 前端开发
easyui学习笔记6—基本的Accordion(手风琴)
手风琴也是web页面中常见的一个控件,常常用在网站后台管理中,这里我们看看easyui中基本的手风琴设置。  1.先看看引用的资源 注意到这里并没有引用到其他的js只是两个基本的,一个是jquery.min.js,一个是jquery.easyui.min.js。
890 0
|
JavaScript 前端开发
easyui学习笔记4—panel的实现
这篇看看easyui是怎么实现panel的,就是类似一个容器,里面可以装具体内容或者其他的easyui控件。 1.这里先看看引用的资源文件 看到这里并没有引用一个类似panel.
896 0
|
Web App开发 JavaScript 前端开发
easyui学习笔记5—panel加载其他的页面
上一篇中我们看到了panel的基本实现,没有什么难度,最重要的是data-options和class两个标签属性的定义。这里我们将看一下在panel中如何加载其他的页面。 1.先看看引用的资源文件和html DOCTYPE html> L...
922 0