[原创]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官网去
Tag标签: .NET随想
posted @ 2008-05-22 22:22 Gray Zhang 阅读(2272) 评论(7)  编辑 收藏 网摘

  回复  引用    
#1楼 2008-05-22 22:31 | dddddddddddd大大的 [未注册用户]
过度的效果太生硬了
  回复  引用  查看    
#2楼 [楼主]2008-05-22 22:36 | Gray Zhang      
@dddddddddddd大大的
过渡是直接使用了jquery的show, slide和fade方法,确实在示例中看起来效果比较生硬,特别是slide,我想当内容比较大块的时候会好一些,因为看了toogleElement这个插件,效果还是很理想的
  回复  引用  查看    
#3楼 2008-05-22 23:42 | 香蕉皮      
适合讲原理,对简单的东西搞个性化封装的话,就搞复杂了
  回复  引用    
#4楼 2008-05-23 00:11 | 化石 [未注册用户]
楼主看我做的这个,可以动态加载内容。不过就是没有您的过度效果。
http://www.juekit.com/Samples/AccordionSet.aspx
  回复  引用  查看    
#5楼 [楼主]2008-05-23 07:48 | Gray Zhang      
@化石
动画是jquery库提供的,如果使用jquery的话我想应该是很简单的
  回复  引用  查看    
#6楼 2008-05-23 09:37 | 巫云      
呵呵,有点意思的。
  回复  引用  查看    
#7楼 2008-05-23 10:55 | 李华顺      
这种功能很早就有了,而且不只一个jQuery插件,请去jQuery Plugin 里面找找
另外,如果真做这种功能的话,请用 ul li 来实现html,这样的结构才是好的

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-05-22 22:28 编辑过
Google站内搜索

China-pub 计算机图书网上专卖店!6.5万品种 2-8折!
近千种 9-95 新二手计算图书火热销售中!
开发者征途系统新作:《设计模式——基于C#的工程化实现及扩展》



相关文章:


相关搜索:
.NET随想

相关链接: