下载文档

Tab选项卡组件
更新时间:2016-09-27

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" id="">
  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. });