zoukankan      html  css  js  c++  java
  • easyui学习笔记12—tab标签页的添加和删除

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

    1.html代码

        <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="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关闭这个标签,这个关闭可能就是删除的功能。

  • 相关阅读:
    HTML <form> 标签的 method 属性(20161028)
    PHP数据访问增删查(20161028)
    PHP数据访问基础知识(20161028)
    java代理机制
    java 模拟实现消费者和生产者问题
    Single Number II
    从1到1000中随机取出900个不重复的随机数
    取苹果方式总数
    Net-SNMP(V3协议)安装配置笔记(CentOS 5.2)(转)
    单例模式
  • 原文地址:https://www.cnblogs.com/tylerdonet/p/3533612.html
Copyright © 2011-2022 走看看