一聚教程网:一个值得你收藏的教程网站

热门教程

jQuery Collapse轻量级的手风琴菜单插件

时间:2022-06-25 17:28:11 编辑:袖梨 来源:一聚教程网

jQuery Collapse 是一个轻量级的 jQuery 插件用以对元素进行展开和收起的功能,支持 Cookie 进行状态保存,也就是我们经常说到的手风琴菜单效果。该插件采用方便和轻便的解决方案收缩菜单。

特点

持久性

jQuery Collapse 在页面加载使用HTML5 localStorage或Cookie保存数据,所以下次打开页面任然可以看到上次保存的结果。而不许额外的代码部署。

手风琴

jQuery的崩溃是挤满了经典的“手风琴”的行为,可以很容易地打开和关闭。

WAI-ARIA规范

插件被设计在心灵WAI-ARIA定义了一种方法,使Web内容和Web应用程序更方便残疾人士使用。

轻量级

jQuery崩溃的设计是轻量级的最小的膨胀。这只是~ 1KB时,编译和gzip压缩!

跨浏览器兼容

在IE6+、Firefox3 +、chrome5 +、safari4 +全面测试,Opera 10 +。在不受支持的浏览器中优雅地降级。

使用方法

在网页中加载jQuery文件和 jQuery Collapse 插件文件



编写类似如下结构的HTML代码


 

Fruits


 

       
  • Apple

  •    
  • Pear

  •    
  • Orange

  •  

 

Info


 

   

You can use any container you like (in this case a div element)


 


使用jQuery Collapse就是这么简单,其中 data-collapse 属性用于脚本控制菜单的缩放。

默认的打开/收缩菜单

标准的行为是在页面上加载所有的部分。如果你想向用户显示页面加载的部分,你可以通过添加一个“open”的Class类来实现这个效果,例如下面的代码。


 

I'm open by default


 

Yay



展开所有的元素

你可以通过脚本事件展开和关闭所有的元素,例如我们有以下的HTML代码。


 

Section 1


 

I'm first


 

Section 2


 

I'm second/p>


现在你可以使用trigger方法来实现你自己想要的效果,例如下面的JavaScript代码

$("#test").trigger("open") // Open all sections
$("#test").trigger("close") // Close all sections
$("#test h2 a").first().trigger("open") // Open first section
更多函数方法的使用,请参见下面的方法函数部分。

JavaScript 使用方法

如果你不喜欢在HTML中使用data-collapse属性来定制,那么你也可以通过脚本的方式来实现。

$("#demo").collapse({
  // options...
});
如果你不喜欢使用 jQuery ($) 方法,那么你也可以使用下面的方法来实例化

new jQueryCollapse($("#demo"), {
  // options...
});
使用自定义HTML结构

默认情况下,该插件将寻找一组元素。在实际的生产环境中HTML标记可能会有所不同,你就需要自定义插件的解释。例如:


 

   

Summary


   
details...

 

 

   

Summary


   
details...

 


为了了解上面的标记,我们可以通过一个“查询”选项来指定一个部分的头/概要元素:

new jQueryCollapse($("#demo"), {
  query: 'div h2'
});
外部标记示例

您还可以使用任意一个链接在一个页面上折叠扩大一个部分:

Toggle section


 

   

Summary


   
details...

 


然后将事件处理程序附加到您的链接和使用jQuery崩溃的事件来切换部分:

$("#toggle").click(function() {
  $(this.hash).trigger("toggle");
});
自定义点击事件

有时候你想自定义崩溃的总结里面的元素,应该触发打开/关闭的动作。考虑下面的标记:


 

    Google.com info
 

 

   

Find stuff on google


 

 

    Twitter.com info
 

 

   

Tweet stuff on twitter


 

现在使用的clickquery选项触发动作只有当跨度点击

$("#custom-click-query").collapse({
  clickQuery: "span.toggle"
});

手风琴

将上面实例中的data-collapse值设置为accordion 即可实现手风琴效果


  ...

持久性

默认情况下,如果用户重新加载页面的所有内容将被关闭。如果你想让以前折叠的部分保持开放,你可以添加“persist”到data-collapse属性:


  ...

并且在其他脚本之后包括您的文档中的存储模块。


在上面的例子里,目标元素(#demo)将需要持久的工作,一个ID,你可以把手风琴和persistence选项结合起来,增加两个值的data-collapse属性:


  ...

jQuery Collapse 使用HTML5 LocalStorage保存数据如果可用,否则它将尝试使用Cookies(读关于IE支持下)。如果这也失败了,它会降低工作,但没有任何持久性。

对小于IE7浏览器的支持

IE 6-7你需要包括Cookie存储的支持才能正常工作,JSON2 和 Cookie存储库:

热门栏目