Foundation - 选项卡 JavaScript 参考
Foundation 为下面列出的选项卡提供 JavaScript 组件 −
初始化
您可以使用 foundation.tabs.js 和 foundation.core.js 插件在 JavaScript 中初始化窗格。foundation.core.js 插件需要以下库 −
foundation.util.keyboard.js
foundation.util.timerAndImageLoader.js
Foundation.Tabs
它指定下面定义的选项卡实例 −
var my_element = new Foundation.Tabs(element);
标签包含以下值 −
| Sr.No. | 名称 &描述 | 类型 |
|---|---|---|
| 1 |
Element 它使用 jQuery 对象作为选项卡。 |
数字 |
| 2 |
Options 它将覆盖选项卡的默认插件设置。 |
对象 |
插件选项
您可以使用以下插件选项自定义选项卡实例。
| Sr.No. | 姓名 &描述 | 示例 |
|---|---|---|
| 1 |
autoFocus 如果将此插件设置为 true，则窗口将在加载时滚动到活动窗格的内容。 |
false |
| 2 |
wrapOnKeys 它使用键盘输入将内容包裹在选项卡链接周围。 |
true |
| 3 |
matchHeight 它通过将其设置为来匹配选项卡内容窗格的高度true。 |
false |
| 4 |
linkClass 它应用于选项卡链接列表中的"li"。 |
'tabs-title' |
| 5 |
panelClass 它应用于内容容器。 |
'tabs-panel' |
事件
Tabs 提供以下事件，如表 − 所示。
| 序号 | 活动 &描述 |
|---|---|
| 1 |
change.zf.tabs 当插件成功更改选项卡时触发。 |
函数
选项卡提供以下函数，定义如下 −
._handleTabChange
处理由 $target 函数指定的 $targetContent 选项卡，如下表所示 −
| Sr.No. | 名称 &描述 | 类型 |
|---|---|---|
| 1 |
$target 它将打开选项卡。 |
jQuery |
.selectTab
用于选择显示内容的内容窗格，可以按照下表所示指定 −
| Sr.No. | 名称 &描述 | 类型 |
|---|---|---|
| 1 |
elem 它使用 jQuery 对象或窗格的 id 来显示内容窗格。 |
jQuery |
.destroy
它用于销毁选项卡实例。
foundation_containers.html
