[原创]jQuery小插件-collapsible

短命女 2021-12-20 03:27 225阅读 0赞

在制作网站，特别是小组或者论坛这一类的页面的时候，经常会遇到一件事，就是要将“帖子”折叠起来，这时通常会有这样的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][http_int08h.orgorg.cn_demo.htm]  
打包下载：  
[/Files/GrayZhang/collapsible.zip][Files_GrayZhang_collapsible.zip]  
注：  
觉得做示例比写代码难多了……哪位有空帮我做个好看点的示例么，我想放到jquery官网去

转载于:https://www.cnblogs.com/GrayZhang/archive/2008/05/22/1205227.html

[http_int08h.orgorg.cn_demo.htm]: http://int08h.orgorg.cn/demo.htm
[Files_GrayZhang_collapsible.zip]: http://files.cnblogs.com/GrayZhang/collapsible.zip