Dom元素

Dom元素示例解析

样式拓展示例解析

非真实隐藏的选项卡

选项卡与弹性布局

应用程序接口

应用方法

事件

Sweet Ui选项卡通过规范好的DOM结构及CSS类,结合 portlet区域元素十二栅格布局以及 横纵弹性布局,能够实现更复杂的页面展现,同时它提供了一些应用程序接口,能够满足更复杂的交互需求。
Dom元素
基本Dom元素示例与解析

●选项卡是一个独立的组件,可以独立使用。
● 选项卡切换按钮的wj_pane属性是可选属性,其值为选项卡内容元素对应的id,不能重复。如果配置了该属性,则点击切换按钮会直接激活对应id的选项卡。如果不配置,则组件将按照元素索引激活。

选项卡1 选项卡2 选项卡3
我是原生选项卡1
我是原生选项卡2
我是原生选项卡3

● 选项卡可以单独使用也可以结合portlet区域元素使用,但两者的DOM结构略有不同。

样式拓展示例与解析

●选项卡可以结合portle区域元素使用,实现多样性的布局控制。

选项卡1 选项卡2 选项卡3
portlet区域选项卡:我是选项卡1
portlet区域选项卡:我是选项卡2
portlet区域选项卡:我是选项卡3
选项卡1 选项卡2 选项卡3
portlet边框区域选项卡:我是选项卡1
portlet边框区域选项卡:我是选项卡2
portlet边框区域选项卡:我是选项卡3

●选项卡可以配置为单个的iframe切换效果,每次点击刷新同一个。

选项卡1 选项卡2 选项卡3
非真实隐藏的选项卡

● 我们还提供了一个class名wj_tab_eye,用于保留选项卡物理模型,在初始化渲染未激活的选项卡内部的组件(表格)时,能够取到选项卡的宽高。
● 一般情况下,我们不建议在页面初始化时就渲染未激活选项卡内部的组件,change事件或给按钮绑初次单击事件,渲染内部组件。

选项卡1 选项卡2 选项卡3
portlet边框区域选项卡:我是选项卡1
portlet边框区域选项卡:我是选项卡2
portlet边框区域选项卡:我是选项卡3
选项卡与弹性布局

● 选项卡可通过class名wj_tab_flex拓展为弹性容器。
此时,所有的切换内容将成为弹性子元素,自动继承父元素所有的剩余空间。

选项卡1 选项卡2 选项卡3
选项卡1:我完全继承了父元素的宽高哦
选项卡2:我完全继承了父元素的宽高哦
选项卡3:我完全继承了父元素的宽高哦
应用程序接口
应用方法

● 我们提供了一些交互方法,更多的方法详见 选项卡组件哦;

事件

● 我们提供了选项卡的change事件,更多的事件详见 选项卡组件哦;