开发者社区> ndblog> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

easyui学习笔记9—手风琴格子的增,删和选择

简介: 这一篇中我们将看看如何给手风琴动态的增加,删除格子,怎样选择某一个格子的。 1.先看看引用的资源  2.
+关注继续查看

这一篇中我们将看看如何给手风琴动态的增加,删除格子,怎样选择某一个格子的。

1.先看看引用的资源

        <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" />
        <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" />
        <link rel="stylesheet" href="jquery-easyui-1.3.5/demo/demo.css" />
        <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

 2.下面是html

    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click the buttons below to add or remove accordion items.</div>
    </div>
    <div style="margin:10px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectPanel()">Select</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a>
    </div>
    <div id="aa" class="easyui-accordion" style="width:500px;height:300px">
        <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px">
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>
            <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
        </div>
    </div>

这个就一个定义class="easyui-accordion"

3.注意这里有三个按钮实现选择,新增,删除手风琴的格子的功能,下面看看这些js方法是什么样子的

    <script type="text/javascript">
    function selectPanel(){
        $.messager.prompt("Prompt",'Please enter the panel title:',function(s){
            if(s){
                $("#aa").accordion('select',s);
            }
        });
    }
    var idx=1;
    function addPanel(){
        $("#aa").accordion("add",{
            title:"Title"+idx,
            content:'<div style="padding:10px">Content'+idx+'</div>'
        });
        idx++;
    }
    function removePanel(){
        var pp = $("#aa").accordion('getSelected');
        if(pp){
            var index = $("#aa").accordion('getPanelIndex',pp);
            $("#aa").accordion('remove',index);
        }
    }
    </script>

 选中某一格的方法是

    function selectPanel(){
        $.messager.prompt("Prompt",'Please enter the panel title:',function(s){
            if(s){
                $("#aa").accordion('select',s);
            }
        });
    }

这里先弹出对话框填入关键字,然后根据关键字搜索,搜索的内容是Title,注意这里是全字匹配,成功后就选中这一格,效果如下:

添加一格的方法是

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

这里添加方法关键字“add”,然后一个json对象{ title:"Title"+idx,content:'<div style="padding:10px">Content'+idx+'</div>' },对象里面就两个属性,一个title,一个content。

删除一个格子的方法是

var pp = $("#aa").accordion('getSelected');
        if(pp){
            var index = $("#aa").accordion('getPanelIndex',pp);
            $("#aa").accordion('remove',index);
        }

这个方法首先获取选择当前手风琴被选中的格子的index,然后调用remove方法删除这个格子。

 

 

 

 

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
MySQL学习笔记之一
MySQL学习笔记之一
26 0
MySQL 学习笔记(三):完整性和触发器设计
(一)完整性设计 方法一、在设计表时定义约束 删除数据库school,建立新数据库school1 drop database school; create database school; use school;   1.
1311 0
Mysql 字符集(学习笔记十)
show charcater set; show variables like '%character%'; 1.查看mysql所支持的字符集 指令:SHOW CHARACTER SET; 很多很多,这里就不全部放上来了,这里的charset代表字符集,就是编码对应字符的集合,后面的collation代表了字符序,字符序就是每种不同的字符集在比较时采用的不同的方法。
793 0
内核通知链 学习笔记 【转】
转自:http://www.cnblogs.com/armlinux/archive/2011/11/11/2396782.html 最近在看《深入理解Linux网络内幕》一书,学习了一下书中讲到的内核通知链方面的知识,写了一个读书笔记和一点代码来加深理解,希望能够对大家有一点帮助。
686 0
thinkphp学习笔记9—自动加载
原文:thinkphp学习笔记9—自动加载 1.命名空间自动加载 在3.2版本中不需要手动加载类库文件,可以很方便的完成自动加载。 系统可以根据类的命名空间自动定位到类库文件,例如定义了一个类Org\Util\Auth类: namespace Org\Util; class Auth { } 保存到ThinkPHP/Library/Org/Util/Auth.
1142 0
thinkphp学习笔记9—自动加载
1.命名空间自动加载 在3.2版本中不需要手动加载类库文件,可以很方便的完成自动加载。 系统可以根据类的命名空间自动定位到类库文件,例如定义了一个类Org\Util\Auth类: namespace Org\Util; class Auth { } 保存到ThinkPHP/Library/Org/Util/Auth.
898 0
+关注
ndblog
不冒任何险,什么都不做,什么也不会有,什么也不是。
327
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载