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实现新消息在网页标题闪烁提示
Jun 23 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
vue增删改查的简单操作
Jul 15 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 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 和 HTML
2006/10/09 PHP
实用函数9
2007/11/08 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
OpenLayers实现图层切换控件
2020/09/25 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
原生js实现无缝轮播图效果
2021/01/28 Javascript
Python基于有道实现英汉字典功能
2015/07/25 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
python的slice notation的特殊用法详解
2019/12/27 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
院药学专业个人求职信
2013/09/21 职场文书
酒店营销策划方案
2014/02/07 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书