...市场分析内容...
...用户调研内容...
...美图欣赏内容...
https://github.com/athm-fe/tab
https://github.com/athm-fe/tab
jquery-plugin tabs
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/athm-fe/tab
- Owner: athm-fe
- License: mit
- Created: 2018-01-23T09:15:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-31T07:25:48.000Z (over 8 years ago)
- Last Synced: 2025-02-08T10:19:01.463Z (over 1 year ago)
- Topics: jquery-plugin, tabs
- Language: JavaScript
- Homepage: https://athm-fe.github.io/tab/
- Size: 11.7 KB
- Stars: 0
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Tab
## TODO
* 滑块功能
* 自动切换
* 动态添加 Tab ?
## Usage
无需写任何 JavaScript 来激活 Tab , 只需在元素上简单的指定 `data-toggle="tab"` 和 `data-target="#ID"`。
一般来说，在写 Tab 的 DOM 结构式, 需要先手动的指定当前打开的 Tab 标签, 这可以通过指定样式类 `active` 来实现.
```html
```
### 关于 DOM 结构
默认使用 `
- ` 来包含一组标签, 你还可以通过 `data-tab-list` 来指定一组标签的父元素. 至于标签面板, 要求所有面板属于兄弟节点关系.
## Options
参数可以通过 data attributes 或者 JavaScript 两种方式来配置.
Name | Type | Default | Description
---- | ---- | ------- | -----------
trigger | string | `'click'` | 标签触发方式 `click|hover`.
delay | number | `150` | 标签的触发延时时长，当 `trigger` 为 `hover` 时才有效.
activeClass | string | `'active'` | 标签激活状态样式类.
tabList | string | `'[data-tab-list]'` | 标签父容器
## Methods
### `.tab(options)`
初始化 Tab 控件, 可以接受参数进行配置. 注意, 需要将一组 Tab 标签都初始化, 比如下面的代码中的 `$('.video-list a[data-tab]')` 代表了一组 Tab 标签.
```javascript
$('.video-list a[data-tab]').tab({
trigger: 'hover',
delay: 50
});
```
### `.tab('show')`
激活并显示某个 Tab 标签, 同时关闭同一组的其他标签.
```javascript
$('.nav li a:first').tab('show'); // 选择第一个标签
$('.nav li a:last').tab('show'); // 选择最后一个标签
$('.nav li:eq(2) a').tab('show'); // 选择第三个标签
```
## Event
Event Type | Description
---------- | -----------
show.fe.tab | 事件在标签显示时触发. 使用 `event.target` 和 `event.relatedTarget` 分别来定位当前活动标签和上一个选择的标签(如果有的话).
shown.fe.tab | 事件在标签显示完毕时触发. 使用 `event.target` 和 `event.relatedTarget` 分别来定位当前活动标签和上一个选择的标签(如果有的话).
hide.fe.tab | 事件在标签隐藏时触发. 使用 `event.target` 和 `event.relatedTarget` 分别来定位当前标签和将要显示的标签.
hidden.fe.tab | 事件在标签隐藏完毕时触发. 使用 `event.target` 和 `event.relatedTarget` 分别来定位当前标签和将要显示的标签.
```javascript
$('a[data-toggle="tab"]').on('shown.fe.tab', function (e) {
// e.relatedTarget
// e.target
})
```
# End
Thanks to [Bootstrap](http://getbootstrap.com/)