Tab选项卡组件

Tab组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成选项卡控件的开发。

依赖

• appcan.js
• appcan.control.js
• appcan.tab.js
• appcan.control.css

JS对象

函数

appcan.tab({参数})

1. selector:   /*选择器*/,
2. hasIcon : true or false  /*是否有图标*/,
3. hasAnim : true or false   /*切换时是否有动画*/
4. hasLabel : true or false   /*是否有文字*/,
5. hasBadge : true or false  /*是否有badge*/
6. data :[{ /*选项卡数据*/ label : "全部", /*显示文字*/ icon: "fa-home" /*显示Font Awesome 图标*/ }, { label : "待办", icon: "icon-edit ub-img",/*显示图片图标*/ }, { label : "已办", icon: "fa-home", badge: 1 /*显示badge数字*/ }]

方法

set(data)

1. data:JSON   对象数组，用于存储列表条目显示的文字图片等信息。

add(data,dir)

1. data: JSON 对象数组，用于存储列表条目显示的文字图片等信息。
2. dir: 0 or 1   用于设定数据是在列表前部添加还是后不。0为前部添加。默认为1

click：

TAB条目被点击时调用此事件

参数:

1. Obj TAB条目DOM对象
2. Index TAB条目索引
3. 数据源对象中switch.value代表switch状态

moveTo(index)// TAB条目切换调用此方法

参数:

1. index :TAB条目索引

例如

HTML5代码

1. <div id="tabview" class="uf sc-bg ubb bc-border">
2. </div>

JS代码

配合AppCan window 多浮动窗口，完成类网易新闻多内容区切换效果

1. var tabview = appcan.tab({
2. selector : "#tabview",
3. hasIcon : false,
4. hasAnim : true,
5. hasLabel : true,
6. hasBadge : false,
7. data : [{
8. label : "全部",
9. }, {
10. label : "待办",
11. }, {
12. label : "已办",
13. }]
14. });
15. tabview.on("click",function(obj, index){ /*TAB变更时切换多浮动窗口*/
16. appcan.window.selectMultiPopover("content",index);
17. })
18. appcan.ready(function() {
19. var top = $('#header').offset().height + $('#tabview').offset().height;
20. appcan.frame.open({/*创建多浮动窗口*/
21. id : "content",
22. url : [{
23. "inPageName" : "switch",
24. "inUrl" : "switch_content.html",
25. }, {
26. "inPageName" : "radio",
27. "inUrl" : "radio_content.html",
28. }, {
29. "inPageName" : "checkbox",
30. "inUrl" : "checkbox_content.html",
31. }],
32. top : top,
33. left : 0,
34. index : 0,
35. change:function(index,res){ /*浮动窗口推拽变更时回调，可控制tab进行同步变更*/
36. tabview.moveTo(res. multiPopSelectedIndex);
37. }
38. });
39. window.onorientationchange = window.onresize = function() {
40. appcan.frame.resize("content", 0, top);
41. }
42. });