初始化配置项

target

attr

tabs

active

beforeChange

change

应用程序接口

tab

show()

remove()

prepend()

append()

Sweet UI选项卡组件是在 dom元素选项卡基础上封装的面向对象的组件,内置了丰富的配置项和交互方法,进一步化操作dom为操作对象,通过应用程序接口可以获取初始化构造对象激活选项卡、以及插入、移除选项卡等组件操作。
初始化配置项

● sweet.tab({})通过多种配置项,可实现选项卡样式与内容的不同定义。

参数 是否必传 类型 默认值 作用
target 非必传 String,必须是css选择器 body 渲染的目标元素
attr 非必传 object 选项卡自定义属性
tabs nav content 必传 String/Function 页签内容,支持html元素
attr 非必传 object 页签自定义属性
event 非必传 Function 页签自定义事件
pane content 必传 String/Function 选项内容,支持html元素
attr 非必传 object 选项自定义属性
event 非必传 Function 选项自定义事件
active 非必传 number 0 默认激活第几项
beforeChange 非必传 Function 切换之前事件
change 非必传 Function 切换之后事件
target-选项卡组件渲染的目标元素

● target属性用于定义选项卡组件渲染的目标元素,必须是css选择器,默认为body

attr-选项卡外围容器的定义属性

● attr属性用于定义选项卡外围容器的属性样式
● 组件预定义了几个class名可以定义选项卡的类型样式。
● 如下,通过定义class名wj_tab_line,将选项卡渲染为简约样式。

● 定义class名wj_portlet,把选项卡渲染为 portlet模块样式。

● 定义class名wj_portlet_bordered,把选项卡渲染为 portlet模块边框样式。

● 定义class名wj_tab_eye,把选项卡渲染为非真实隐藏的物理模型,此时未激活的选项卡也能够获取到宽高

● 定义class名wj_tab_flex,把选项卡渲染 弹性布局。自动继承父元素的宽高100%。。

tabs-选项卡内容配置项

● tabs接收一个Array类型的参数,用于定义选项卡的标题( nav)和内容( pane);

● 同nav,pane是String类型时,将被直接输出;pane是Object类型时,包含三个参数contentattrevent

active-默认激活第几项

● active接收Number类型的选项卡索引,默认为0,索引从0开始。

beforeChange-选项卡切换之前事件

● beforeChange用于在选项卡切换之前做一些操作。

change-选项卡切换之后事件

● change用于在选项卡切换之后做一些操作。

应用程序接口

● 调用初始化方法,将会生成相应的模选项卡实例,可以通过对象内的方法操作该选项卡实例。

接口 类型 参数 作用 调用方法
tab Object 已构造的选项卡jq对象 .tab
show Function Number(选项卡索引) 激活选项卡 .show()
remove Function Number(选项卡索引) 移除选项卡 .remove()
prepend Function tabs配置 前置插入选项卡 .prependTab()
append Function tabs配置 后置插入选项卡 .appendTab()
tab-已渲染的选项卡节点对象

● tab是已经渲染的选项卡节点jquery对象合集,包含tabDom(选项卡外围容器对象)、navDom(选项卡标题栏对象)和contDom(选项卡内容区域容器对象)三个节点属性。

show()-激活某项

● show(Number)方法,接收一个从0开始的选项卡索引,可以在组件外部调用激活某项。

remove()-移除某项

● remove(Array)方法,接收一个从0开始的选项卡索引数组,可以在组件外部调用移除某些项。

prepend()-前置插入选项卡

● prepend(Array)方法,接收一个数组对象,即和选项卡的初始化 tabs配置信息用法一致。

append()-后置插入选项卡

● append(Array)方法,接收一个数组对象,即和选项卡的初始化 tabs配置信息用法一致。