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关闭这个标签,这个关闭可能就是删除的功能。

  • 相关阅读:
    16日彻底去除安卓应用的内置广告
    配台600元的主机套装 自己组装 全新
    带记录功能的计算器
    华为8812 进入工程模式 和打电话黑屏问题
    买平板 四核 500~600左右对比
    querySelector()方法
    Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。
    Android实用代码七段(二)
    Android实用代码七段(三)
    Firebug入门指南
  • 原文地址:https://www.cnblogs.com/tylerdonet/p/3533612.html
Copyright © 2011-2022 走看看