例子

这里包含一些基本的示例以及一些常用场景的示例

全特性演示

入门实例

只需要提供一个空的div(可以是任意元素)和一个id即可快速得到一个选项卡插件

通过data属性初始化

Quicktab所有选项都支持data属性绑定，如果选项是数组使用json字符串表示,如果是函数则绑定全局函数字符串,如果是对象则使用-连接 ,示例中只提供了部分参数,具体需要选项可以查阅选项.

设置默认页面

默认页面可以一次性初始化多个，但是只会激活最后一项,其它的Tab则是惰性的,这样可以避免页面一次性多个IFrame加载导致浏览器卡顿, 很多时候后台是需要加载一个默认首页的，这很有用。

尺寸设置

可以方便的设置尺寸，让高度占满父容器

同一个页面可存在多个实例

同一个页面中多个Quicktab实例之间不会产生任何冲突

启用工具栏的刷新和全屏按钮

启用工具栏的下拉菜单

工具栏的位置和显隐设置

工具栏按钮自定义排序

响应式配置

Tab可以缓存

启用Tab的右键菜单功能

本土化设置

自定义右键菜单

添加Tab

可以通过实例方法addTab()以及data属性方式添加

其中data属性方式必须要同时存在以下属性才会生效

data-qt-target:值为#开头加实例化时提供的id
data-qt-tab-url:tab的url是必填的

下面的选项是可选的

data-qt-tab-closable:true
data-qt-tab-title:"添加用户"

控制Tab的最大数量

启用Tab拖动排序

Tab可通过鼠标滚轮切换

Tab点击自动居中

Tab双击刷新

Tab的loading层

自定义loading层

Tab超时

在子页面内打开一个新的Tab

自定义图标

超长标题支持

实现单Tab(IFrame)实现

在bootstrap栅格系统上工作良好