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 相关文章推荐
Dom操作之兼容技巧分享
Sep 20 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 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
php intval的测试代码发现问题
2008/07/27 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python实现定时任务
2017/02/08 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
python安装scipy的方法步骤
2019/06/26 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
华为慧通面试题
2012/09/11 面试题
教育专业个人求职信
2013/12/02 职场文书
市三好学生主要事迹
2014/01/28 职场文书
初中学习计划书范文
2014/09/15 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
python之基数排序的实现
2021/07/26 Python
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python