js:

<script type="text/javascript">
$('#p2').panel({
title: 'panel1',
closable: false,
collapsible: true,
border: false,
collapsed: true,
//href: "url",
onOpen: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
},
onBeforeCollapse: function () {
$($(this).panel('header')).removeClass('openPanelClass');
},
onBeforeExpand: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
} });
$($('#p2')).panel('header').click(function () {
$('#p2').panel('expand', true);
$('#p2').panel('collapse', true);
});
$('#p3').panel({
title: 'panel2',
closable: false,
collapsible: true,
border: false,
collapsed: true,
//href: "url",
onOpen: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
},
onBeforeCollapse: function () {
$($(this).panel('header')).removeClass('openPanelClass');
},
onBeforeExpand: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
}
});
$($('#p3')).panel('header').click(function () {
$('#p3').panel('expand', true);
$('#p3').panel('collapse', true);
});
$('#p4').panel({
title: 'panel3',
closable: false,
collapsible: true,
border: false,
collapsed: true,
//href: "url",
onOpen: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
},
onBeforeCollapse: function () {
$($(this).panel('header')).removeClass('openPanelClass');
},
onBeforeExpand: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
}
});
$($('#p4')).panel('header').click(function () {
$('#p4').panel('expand', true);
$('#p4').panel('collapse', true);
});
$('#p5').panel({
title: 'panel4',
closable: false,
collapsible: true,
border: false,
collapsed: true,
//href: "url",
onOpen: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
},
onBeforeCollapse: function () {
$($(this).panel('header')).removeClass('openPanelClass');
},
onBeforeExpand: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
}
});
$($('#p5')).panel('header').click(function () {
$('#p5').panel('expand', true);
$('#p5').panel('collapse', true);
});
</script>

html:

  

    <div style="margin: 5px">
<div id="p2" style="width: 985px;"> </div>
</div>
<div style="margin: 5px">
<div id="p3" style="width: 985px;"> </div>
</div>
<div style="margin: 5px">
<div id="p4" style="width: 985px;"> </div>
</div>
<div style="margin: 5px">
<div id="p5" style="width: 985px;"> </div>
</div>

panel的展开,关闭的一种应用。的更多相关文章

  1. jquery 展开关闭效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 简洁的支持展开关闭的tab标签代码

    简洁的支持展开关闭的tab标签代码,由huiyi8素材网提供. TAB标签代码下载:http://www.huiyi8.com/tab/

  3. SELinux 宽容模式(permissive) 强制模式(enforcing) 关闭(disabled) 几种模式之间的转换

    http://blog.sina.com.cn/s/blog_5aee9eaf0100y44q.html 在CentOS6.2 中安装intel 的c++和fortran 的编译器时,遇到来一个关于S ...

  4. 解决DWZ(JUI)的panel 点击关闭或者打开按钮 自己写的标签消失

    问题描述:DWZ的panel面板比较常用,我们常常需要在其标题栏上再增加一个些按钮,如下图问题出来了,增加按钮后,点面板收缩按钮,增加的按钮就消失了而且面板收缩的click事件,也跟新增的按钮绑定了, ...

  5. 关于win8.1“连接被远程计算机关闭”的一种解决方案

    我就是连接的时候出现"连接被远程计算机关闭",然后想着可能是win8更新之后网络协议 出问题了,后来无意中发现e信在第一次启动的时候会在网络适配器中会多出很多网卡,其中三个是带感叹 ...

  6. IOS 实现QQ好友分组展开关闭功能

    贴出核心代码  主要讲一下思路. - (void)nameBtnClick:(myButton *)sender { //获取当前点击的分组对应的section self.clickIndex = s ...

  7. HTML页面中点击按钮关闭页面几种方式与取消

    1.不带任何提示关闭窗口的js代码 <input type="button" name="close" value="关闭" oncl ...

  8. Oracle开启和关闭的四种模式

    >1 启动数据库 在cmd命令窗口,直接输入"sqlplus",直接进入oracle管理界面,输入用户名和密码后,开始启动数据库,启动数据库三个步骤:启动实例.加载数据库.打 ...

  9. C#启动外部程序以及等待外部程序关闭的几种方法

    1. 启动外部程序,不等待其退出. 2. 启动外部程序,等待其退出. 3. 启动外部程序,无限等待其退出. 4. 启动外部程序,通过事件监视其退出. // using System.Diagnosti ...

随机推荐

  1. 理解 virbr0 - 每天5分钟玩转 OpenStack(11)

    virbr0 是 KVM 默认创建的一个 Bridge,其作用是为连接其上的虚机网卡提供 NAT 访问外网的功能. virbr0 默认分配了一个IP 192.168.122.1,并为连接其上的其他虚拟 ...

  2. ELK+redis搭建nginx日志分析平台

    ELK+redis搭建nginx日志分析平台发表于 2015-08-19   |   分类于 Linux/Unix   |  ELK简介ELKStack即Elasticsearch + Logstas ...

  3. 开源一个windows下的定时任务框架,简单粗暴好用。

    这里是你想要的功能: 支持插件,将你要执行的任务编译成程序集放到框架的根目录下,再进行简单的配置就行了. 支持Corn表达式.想让任务在什么时候执行就在什么时候执行. 支持安装成windows ser ...

  4. Hibernate里save(),saveOrUpdate(),merge(),update()的区别

    save()方法用于将一个临时对象转变为持久化对象,也就是将一个新的业务实体保存到数据库中:update()方法用于将一个游离对象重新转变为持久化对象,也就是更新一个已经存在的业务实体到数据库中:sa ...

  5. python generator: next , sent(msg)区别

    对于普通的生成器,第一个next调用,相当于启动生成器,会从生成器函数的第一行代码开始执行,直到第一次执行完yield语句(第4行)后,跳出生成器函数. 然后第二个next调用,进入生成器函数后,从y ...

  6. 初识CDQ分治

    [BZOJ 1176:单点修改,查询子矩阵和]: 1176: [Balkan2007]Mokia Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: 200 ...

  7. Mysql更换MyISAM存储引擎为Innodb的操作记录

    一般情况下,mysql会默认提供多种存储引擎,可以通过下面的查看: 1)查看mysql是否安装了innodb插件.通过下面的命令结果可知,已经安装了innodb插件. mysql> show p ...

  8. MVP之V和P的交互

    三者之间的关系 在MVP初探里简单的描述了V和P之间是如何交互的. 无论是PV还是SC,M\V\P这三者之间的关系并没有发生改变,V只是前端的客户代理承现展显数据,P是如何处理客户交互行为的决策者. ...

  9. asp.net mvc ajax 异步刷新例子

    这几天在asp.net中使用ajax来做异步刷新,这里整理一下 1.首先看前台页面点击的时候调用函数 function shuxin() { $.ajax( { url: "GetValue ...

  10. 51Nod--1015 水仙花数

    51Nod:  http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1015   1015 水仙花数 基准时间限制:1 秒 空间 ...