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

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,注意这里是全字匹配,成功后就选中这一格,效果如下:

aaarticlea/png;base64,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" alt="" />

添加一格的方法是

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方法删除这个格子。

 

easyui学习笔记9—手风琴格子的增,删和选择的更多相关文章

  1. easyui学习笔记10—手风琴格子始终展开和多个格子展开

    始终打开有时候可能会很管用,其实就是一个设置问题.这里就不再介绍引用的资源了,这里只看看html是怎么写的. 1.html代码 <body> <h2>Basic Accordi ...

  2. easyui学习笔记6—基本的Accordion(手风琴)

    手风琴也是web页面中常见的一个控件,常常用在网站后台管理中,这里我们看看easyui中基本的手风琴设置. 1.先看看引用的资源 <meta charset="UTF-8" ...

  3. easyUI学习笔记二

    1.  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  4. easyUI学习笔记一

    1.引用js文件 <script type="text/javascript" src = jquery-easyui/jquery.min.js> </scri ...

  5. easyui学习笔记2—在行内进行表格的增删改操作

    第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和c ...

  6. easyui学习笔记1—增删改操作

    最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现 ...

  7. easyui学习笔记3—在展开行内的增删改操作

    这一篇介绍在一个展开行内进行的增删操作,如果一行很长有很多的数据,在一个展开行内进行编辑将更加方便. 1.先看引用的资源 <link rel="stylesheet" hre ...

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

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

  9. ASP.NET学习笔记(3)——用户增删改查(三层)

    说明(2017-10-6 11:21:58): 1. 十一放假在家也没写几行代码,本来还想着利用假期把asp.net看完,结果天天喝酒睡觉,回去的票也没买到,惨.. 2. 断断续续的把用户信息的页面写 ...

随机推荐

  1. npm update常用命令使用

    一.更新 npm-check检查更新 npm install -g npm-check npm-check 2. npm-upgrade更新 npm install -g npm-upgrade np ...

  2. php中array_walk() 和 array_map()两个函数区别

    两个函数的共性和区别: 1.传入这两个函数的 $value,就是数组中的单一个元素. 2.array_walk() 仅返回true或者false,array_map() 返回处理后的数组: 3.要得到 ...

  3. PHP学习9——MySQL数据库

    主要内容: MySQL的启动 MySQL数据库操作 数据库表设计 创建和查看表 修改表结构 MySQL语句操作 数据库备份与恢复 PHP操作MySQL数据库 面向对象的数据库操作 MySQL数据库是目 ...

  4. net core 发布到服务器的方式

    ---恢复内容开始(15:05:15)--- using (var scope = ServiceProvider.CreateScope()){ var aSubscriber = Activato ...

  5. 致命id(就是一个神经病精神分裂的故事---但讲述方式真的很不错)

    电影开头是一段审讯的录音(我听着像),一直在问那个精神分裂的人一件谋杀案,镜头然后转向了一个场景(这个场景中设定是一个被大雨围困的汽车旅馆,到后半部分我才明白这是那个精神分裂者的精神世界,这个地方的所 ...

  6. .NET MVC Scripts.Render 上下文不存在问题解决方法

    要想使用 @Scripts.Render(),就要用到 BundleConfig.cs 这个类,在App_Start目录下新建一下这个类, 类的内容如下: 使用这个类需要引入 using System ...

  7. Kettle系列文章二(安装配置Kettle+SqlServer+简单的输入输出作业)

    一.下载 Kettle下载地址:https://community.hitachivantara.com/docs/DOC-1009855 下拉到DownLoad,点击红框中的链接进行下载.. 二.解 ...

  8. [android] 通过比对进行容器联动

    当中间容器变化之后,标题栏也要跟着变化 设计个比对依据: 抽象类BaseView中定义抽象方法,每个继承的View都必须实现,为自己的界面定义一个唯一的int常量,作为比对依据 降低容器之间的耦合度: ...

  9. 决策树之ID3算法

    一.决策树之ID3算法简述 1976年-1986年,J.R.Quinlan给出ID3算法原型并进行了总结,确定了决策树学习的理论.这可以看做是决策树算法的起点.1993,Quinlan将ID3算法改进 ...

  10. 我所理解的js闭包

    举个例子: function f1(){ var n=; function f2(){ alert(n); } } 上面代码中,f2()可以读取f1()中的局部变量n的值,但是f1()不能反过来读取f ...