响应选项卡是一个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

当 Ajax 响应来自使用 select2 的 laravel 控制器时,如何检查 JQuery 附加选项中的条件?

tabs 标签样式

仅在特定屏幕中对物理后退按钮按下执行减速器操作以响应本机

一些常用的jQuery插件

如何验证具有多个选项卡的表单?