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




