[原创]jQuery小插件-collapsible

在制作网站,特别是小组或者论坛这一类的页面的时候,经常会遇到一件事,就是要将“帖子”折叠起来,这时通常会有这样的html

1 <div id="post1">
2     <div id="title1">标题</div>
3     <div id="content1">内容</div>
4 </div>

要求点击“标题”的时候,“内容”可以收缩或展开
标准的做法中,通常会给title1这个div加上click事件,控制content1的收缩和展开

所以有了一个想法,将这样的内容简单地封装一下,形成一个可重用的方法,我称之为collapsible
有了jquery,做这个实在是太简单了,缩放的动画效果等都有了相应的方法完成

事实上,有个叫toggleElement的插件可以完成相应的功能,但是看了一下那个插件,还是少了一些东西,比如说通过方法指定标题,比如说他是使用title属性来自动生成标题的……

基本思路:
对content1(选择content1作为方法的作用对象是因为collapsible的是内容而不是标题)使用,指定title1,随后给title1加上click事件
不使用jquery的toggle方法,因为那样无法自定义动画
所以通过display=="none"判断内容是否为收起状态,并进行相应的操作

主要功能:
自定义动画方式,animationType: 'fade'/'slide'/'show'
自定义速度,speed: 'normal'/'fast'/'slow'/null,其中null就没有动画了
通过自定义方法选择title,这是为了可以对多个content同时进行操作,titleEl: function() { return $(this).attr('id') + '_title'; }
如果content和title之间有别的元素的话,要移动content,当然也可以选择不移动,move: true即为移动
事件:点击,收缩和展开,分别为onClick,onHide,onShow
css:当内容收缩和展开时,标题可以有不同的css,比如前面加上"+"或"-",分别为hideClass,showClass
初始显示状态:start: 'hide'/'show'/null,其中null就不改变当前状态了

示例在此:
http://int08h.orgorg.cn/demo.htm
打包下载:
/Files/GrayZhang/collapsible.zip
注:
觉得做示例比写代码难多了……哪位有空帮我做个好看点的示例么,我想放到jquery官网去
posted @ 2008-05-22 22:22  Gray Zhang  阅读(3572)  评论(7编辑  收藏  举报