响应选项卡是一个jQuery插件,提供响应选项卡功能。当它到达CSS断点时,选项卡会转换为手风琴。您可以使用此插件作为在桌面、平板电脑和手机上优雅显示选项卡的解决方案。
Posted
tags:
中文标题:响应选项卡是一个jQuery插件,提供响应选项卡功能。当它到达CSS断点时,选项卡会转换为手风琴。您可以使用此插件作为在桌面、平板电脑和手机上优雅显示选项卡的解决方案。 原文标题:Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile. 项目评级:Star:539 Fork:234 下载地址:https://github.com/jellekralt/Responsive-Tabs 详情介绍jQuery响应选项卡
这个jQuery插件提供了响应选项卡功能。当它到达CSS断点时,选项卡会转换为手风琴。
在上查看演示http://jellekralt.github.io/Responsive-Tabs/
特征
如何使用
收到
鲍尔
bower install responsive-tabs
净现值
npm install responsive-tabs
CDN公司
jsDelivr上提供响应式选项卡
http://www.jsdelivr.com/#!jquery.responsive-tabs
API
以下选项可用:
可折叠的
如果设置为“true”,则面板是可折叠的。值“制表符”和“手风琴”可用于使面板在特定视图/状态下可折叠。如果某个选项卡处于活动状态,并且您再次选择该选项卡,则面板将折叠。
开始折叠
此选项定义加载时的第一个面板是否开始折叠。使用值“tabs”和“accordon”,您可以指定选项卡应该在哪个视图中开始折叠。
禁用的选项卡
具有从零开始的整数的数组,用于定义应禁用的选项卡
活动选项卡
一个基于0的整数,用于定义加载时初始打开的选项卡。
Accordion选项卡HTML元素
一个单独的HTML元素模板,其中将包装手风琴选项卡。
设置哈希
一个布尔值,可用于启用和禁用URL哈希中所选选项卡的引用设置。如果设置为“true”,则选择新选项卡将在URL哈希中设置对该选项卡的引用。
旋转
此选项可用于自动旋转选项卡。选择选项卡后,选项卡将停止旋转。
事件
此选项可用于指定激活选项卡的事件。例如:“mouseover”。默认为“点击”
动画
此选项可启用面板的动画。默认情况下,面板将只显示和隐藏,此选项可用于使面板上下滑动和淡入淡出。
您可以通过设置animationQueue
选项来启用/禁用动画的排队。
您可以通过设置duration
选项来设置动画的速度。
滚动至手风琴面板
此选项可用于启用自动滚动到已打开的手风琴面板
加载时滚动至Accordion面板
此选项可用于禁用加载时滚动到手风琴面板
您可以通过设置scrollToAccordionOffset
选项来定义滚动到手风琴面板的像素偏移。
导航容器
此选项可用于为<ul>
的导航选择不同的容器元素。
回调
点击
无论选项卡是否被禁用,都会在单击选项卡后调用此回调
论据
激活
选择选项卡后调用此回调
论据
使停止工作
停用选项卡后调用此回调
论据
负载
加载插件后调用此回调
论据
激活状态
这个回调是在插件从状态切换后调用的(Tab视图/Accodion视图)
方法
以下方法可用:
激活
此方法通过使用基于零的选项卡引用来激活/打开选项卡
使停止工作
此方法通过使用基于零的选项卡引用来停用/关闭选项卡
使可能
此方法通过使用基于零的选项卡引用来启用选项卡
使残废
此方法通过使用基于零的选项卡引用来停用/关闭选项卡
启动旋转
此方法启动选项卡的旋转。您可以使用第一个参数来定义速度。
事件
选项卡初始化的元素(容器)上会发出以下事件:
选项卡加载
选项卡插件加载完成后会触发此事件
传递的变量
选项卡激活
激活选项卡时会触发此事件
传递的变量
选项卡停用
停用选项卡时会触发此事件
传递的变量
选项卡激活状态
当插件的状态发生变化时,会触发此事件
传递的变量
信用
这个插件的想法是基于samsono(github.com/samsono)的“Easy Responsive Tabs to Accordion”
https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion
支持
如果您有任何问题、问题或建议,请随时提交门票!
此外,带有改进、新功能或其他很棒的东西的拉取请求总是非常受欢迎的。
许可证
麻省理工学院:http://jellekralt.mit-license.org/
如何从标签 api 响应(javascript)中检索 png