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 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 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
对javascript和select部件的结合运用
2006/10/09 PHP
PHP之数组学习
2011/05/29 PHP
php变量作用域的深入解析
2013/06/03 PHP
PHP文件操作方法汇总
2015/07/01 PHP
详解PHP中的Traits
2015/07/29 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
js转html实体的方法
2016/09/27 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
Python制作简易注册登录系统
2016/12/15 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
幼儿园家长评语大全
2014/04/16 职场文书
工作感言一句话
2015/08/01 职场文书
关于幸福的感言
2015/08/03 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL