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