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

2009-08-04 08:50:36 作者:Andreas Eberhard 来源:查看 | 【

本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.

下载"jQuery插件:toggleElements.js,隐藏/显示层的折叠效果插件"

  • 本地下载
  • 本地下载2

相关资源