jquery插件制作 手风琴Panel效果实现


Posted in Javascript onAugust 17, 2012

首先我们还是创建一个html文件,里面包含如下的html结构。

<div id="pane-container"> 
<div class="pane"> 


<h1>first pane</h1> 


<p>this script should allow only one pane to be visible at a time.</p> 

</div> 

<div class="pane"> 


<h1>second pane</h1> 


<p>this script should allow only one pane to be visible at a time.</p> 

</div> 

<div class="pane"> 


<h1>third pane</h1> 


<p>this script should allow only one pane to be visible at a time.</p> 

</div> 
</div>

然后为页面定义如下css:
<style type="text/css"> 
#pane-container 
{ 
margin: 0; 
padding: 0; 
width: 200px; 
} 
.pane h1 
{ 
padding: 5px; 
cursor: pointer; 
position: relative; 
background-color: #4c4c4c; 
color: #fff; 
font-weight: normal; 
font-size: 20px; 
margin: 0px; 
} 
.pane p 
{ 
padding: 10px; 
margin: 0; 
background-color: #e4e4e4; 
} 
</style>

下面我们来介绍jquery.accordtion.js插件的实现。首先我们需要考虑的是如何隐藏pane里面的内容部分,也就是p标签。h1作为标题是不需要隐藏的。
(function ($) { 
$.fn.accordtion = function () { 
return this.each(function () { 
$(this).find('p').hide(); 
}); 
} 
})(jQuery);

页面调用的代码:
$(document).ready(function () { 
$('#pane-container').accordtion(); 
});

插件代码很简单,就是找到class为pane的div下面的p,对其隐藏。接下来我们要实现的是,当用户点到h1的时候,对应的p标签的内容显示出来,同时其他h1对应的p标签的内容隐藏。代码如下:

//对h1标签设置click事件 
self.delegate('h1', 'click', function () { 
//为对应的p标签设置slideToggle效果 

$(this).next('p').slideToggle(600) 



//获取其他pane对象,找到他们下面的p标签,收起 



.parent().siblings().children('p').slideUp(600); 
});

现在我们的插件已经很有型了,最后要做的就是添加用户自定义属性options,这次我们只添加一个‘默认显示第几个pane'的属性。
//设置第几个元素显示 
self.children(':eq(' + options.visibleByDefault + ')')//找到和options.visibleByDefault一致的pane对象 
.children('p') 

.show();

完整的代码大家还是下demo自己看吧。jQuery.plugin.accordtion

谢谢大家的支持,希望本篇文章对你有帮助。如果对代码哪里有不清楚的地方,可以联系我。

Javascript 相关文章推荐
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
什么是SOLID
Mar 24 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 #Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 #jQuery
jquery插件制作 表单验证实现代码
Aug 17 #Javascript
jquery插件制作 图片走廊 gallery
Aug 17 #Javascript
jquery插件制作教程 txtHover
Aug 17 #Javascript
IFrame跨域高度自适应实现代码
Aug 16 #Javascript
JSONP 跨域共享信息
Aug 16 #Javascript
You might like
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
ThinkPHP路由详解
2015/07/27 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
python爬虫---requests库的用法详解
2020/09/28 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
冰淇淋开店创业计划书
2014/02/01 职场文书
秋天的图画教学反思
2014/05/01 职场文书
服装设计专业自荐信
2014/06/17 职场文书
安全演讲稿开场白
2014/08/25 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server
PYTHON InceptionV3模型的复现详解
2022/05/06 Python
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers