html tab选项卡 控件,Tab选项卡组件
Tab选项卡组件
Tab组件是根据AppCan 布局框架对数据列表进行封装的JS对象,通过配合的样式,使开发者在界面中可以快速完成选项卡控件的开发。
依赖
appcan.js
appcan.control.js
appcan.tab.js
appcan.control.css
JS对象
函数
appcan.tab({参数})
selector: /*选择器*/,
hasIcon : true or false /*是否有图标*/,
hasAnim : true or false /*切换时是否有动画*/
hasLabel : true or false /*是否有文字*/,
hasBadge : true or false /*是否有badge*/
data :[{ /*选项卡数据*/ label : "全部", /*显示文字*/ icon: "fa-home" /*显示Font Awesome 图标*/ }, { label : "待办", icon: "icon-edit ub-img",/*显示图片图标*/ }, { label : "已办", icon: "fa-home", badge: 1 /*显示badge数字*/ }]
方法
set(data)
data:JSON 对象数组,用于存储列表条目显示的文字图片等信息。
add(data,dir)
data: JSON 对象数组,用于存储列表条目显示的文字图片等信息。
dir: 0 or 1 用于设定数据是在列表前部添加还是后不。0为前部添加。默认为1
click:
TAB条目被点击时调用此事件
参数:
Obj TAB条目DOM对象
Index TAB条目索引
数据源对象中switch.value代表switch状态
moveTo(index)
// TAB条目切换调用此方法
参数:
index :TAB条目索引
例如
HTML5代码
JS代码
配合AppCan window 多浮动窗口,完成类网易新闻多内容区切换效果
var tabview = appcan.tab({
selector : "#tabview",
hasIcon : false,
hasAnim : true,
hasLabel : true,
hasBadge : false,
data : [{
label : "全部",
}, {
label : "待办",
}, {
label : "已办",
}]
});
tabview.on("click",function(obj, index){ /*TAB变更时切换多浮动窗口*/
appcan.window.selectMultiPopover("content",index);
})
appcan.ready(function() {
var top = $('#header').offset().height + $('#tabview').offset().height;
appcan.frame.open({/*创建多浮动窗口*/
id : "content",
url : [{
"inPageName" : "switch",
"inUrl" : "switch_content.html",
}, {
"inPageName" : "radio",
"inUrl" : "radio_content.html",
}, {
"inPageName" : "checkbox",
"inUrl" : "checkbox_content.html",
}],
top : top,
left : 0,
index : 0,
change:function(index,res){ /*浮动窗口推拽变更时回调,可控制tab进行同步变更*/
tabview.moveTo(res. multiPopSelectedIndex);
}
});
window.onorientationchange = window.onresize = function() {
appcan.frame.resize("content", 0, top);
}
});
还需要帮助吗? 联系我们
最新更新 12th Oct 2019
html tab选项卡 控件,Tab选项卡组件相关推荐
- html tab选项卡 控件,tab选项卡插件
这是一款使用十分方便的.为移动设备定制的.可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件.在你要显示很多不同的内容时,tab选项卡导航方式是十分有用的.常见的方式是在同一个 ...
- TabControl 选项卡控件
TabControl 控件是由System.Windows.Forms.TabControl类提供的,作用就是讲相关的组件组合到一系列选项卡页面上. MulitiLine 属性用来设置是否显示多行 ...
- KRBTabControl(中文)Windows选项卡控件
本文阐述了如何在C#使自定义Windows选项卡控件. Download demo project - 82.4 KB Download source - 252 KB 介绍 本文讨论如何使用.NET ...
- 用回车键实现MFC对话框中TAB键控件输入焦点在控件中跳转的效果(转)
用回车键实现MFC对话框中TAB键控件输入焦点在控件中跳转的效果(转) 版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://hcq11.blogbus.com/logs/5 ...
- python选项卡控件_python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与...
PyQt5选项卡控件QTabWidget简介 QTabWidget控件提供了一个选项卡和一个页面区域,默认显示第一个选项卡的页面,通过单击各选项卡可以查看对应的界面,如果在一个窗口中显示的输入字段很多 ...
- Asp.Net Web控件 (八)(TabControl 选项卡控件)
在项目开发中经常会用到选项卡控件,网上也有很多,其实只是简单的功能,很多却实现的很复杂,功能很强大,并不是我需要的. 下面来实现一个简单的TabControl . 先看演示: 位置:TabContor ...
- 在VC++中使用Tab Control控件
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 系统环境 ...
- Tab Control控件的详细使用
1. 新建一个MFC工程, 取名MyTab, 选择Dialog based, 然后Finish. 2. 删除对话框上默认添加的三个控件. 添加Tab Control控件并在Property属性中设置I ...
- MFC中使用TAB Control控件
2019独角兽企业重金招聘Python工程师标准>>> MFC中使用TAB Control控件 MFC中使用TAB Control控件(转) 假如我现在有个SDI程序,View是Fo ...
最新文章
- 使用cnpm代替npm
- Windows 10企业批量部署实战之WDS安装
- 优化group by 语句
- BZOJ 4898 Luogu P3778 [APIO2017]商旅 (分数规划、最短路)
- 在动态网络下实现分布式共享存储
- html5 心跳效果,css3实现心脏跳动
- deepfakes怎么用_[mcj]deepfakesApp使用说明(2)
- [luogu3244 SHOI2016] 黑暗前的幻想乡(容斥原理+矩阵树定理)
- 解决SpringBoot jar包太大的问题
- ABP理论学习之NHibernate集成
- php 什么时候使用单例,php什么时候使用单例模式
- Java中Double保留六位小数_Java中Double保留后小数位的几种方法
- JavaScript的一些名词(持续更新中-取自javaScript高级程序设计)
- Ansys Speos | 助力汽车按键开关设计与优化
- watch和computer的区别
- 白帽子讲Web安全(一)浏览器安全
- Mac M1 上 丝滑跑 Docker
- “progtam received signal SIGABRT,Aborted.“错误
- PHP独立ip统计,通过nginx日志统计独立ip的个数 新乡独立ip 独立ipvps 独立公网i
- iPhone播放声音文件的例子