jQuery插件：toggleElements.js,隐藏/显示层的折叠效果插件

转自：http://www.sharejs.com/js/color/929

演示地址：http://www.sharejs.com/software/jquery/plug/toggleElements/index.html

本jQuery插件可以用来隐藏指定的内容，当需要显示时再打开显示，并带有很多显示切换的效果脚本代码简洁，设置方便万通通过CSS自定义显示样式只需要在你的HTML标签上添加一个title-attribute 和Class属性可以在代码中内嵌toggleElements

查看演示页面 View Demo

如何使用jquery.toggleElements.js插件
1.
下载 jQuery

下载 jquery.toggleElements.js

2.
在HTML代码的Head区添加对 jQuery 和 toggleElements 的引用

 
<head>
 
...
 
<script type="text/javascript" src="jquery-latest.pack.js"></script>
 
<script type="text/javascript" src="jquery.toggleElements.js"></script>
 
...
 
</head>

3.
定义 toggleElements.css 样式，并添加到HTML的head区

 
<head>
 
...
 
<link rel="stylesheet" type="text/css" href="toggleElements.css" />
 
...
 
</head>

4.
选择一段你需要生成折叠效果的html代码，添加样式 class="toggler-c" title-Attribute 是用来建立展开和折叠div的属性
你也可以添加 class="toggler-c" 和 title-Attribute 到任何已经存在的element.

 
...
 
<div class="toggler-c" title="Example 1">
 
  Your HTML here ...
 
</div>
 
...
 
<ul class="toggler-c" title="Example 2">
 
  <li>Google</li>
 
  <li>Altavista</li>
 
  <li>Fireball</li>
 
</ul>
 
...

5.
在 document.ready 定义中激活toggleElements插件

 
<script type="text/javascript">
 
$(document).ready(function(){
 
    $('div.toggler-c').toggleElements(
 
        { fxAnimation:'slide', fxSpeed:'slow', className:'toggler' } );
 
    $('ul.toggler-c').toggleElements();
 
});
 
</script>

设置参数列表：jquery.toggleElements.js

Option	Value
fxAnimation	"slide", "show", or "fade" (default "slide")
fxSpeed	"slow", "normal", "fast" or the number of milliseconds (e.g. 1000 for 1 second, default "normal")
className	use this classname as prefix for the CSS-Classes (default toggler, see CSS-File toggleElements.css)
removeTitle	remove the Title-Attribute of the HTML-Element, true or false (default true)
showTitle	add title-Attribute to the Toggle-Link (default false)
onClick	Callback Function This function is called immediatly after click on the Toggle-Link. You can return false to cancel the click.
onHide	Callback Function This function is called immediatly after the content is hidden.
onShow	Callback Function This function is called immediatly after the content is shown.