## 切换组件
#### 切换组件，用于切换不同面板。
* * * * *
常用方法
~~~
rbkDom.goto(index);
rbkDom.onChange(fn(i,e));
rbkDom.bindItemClick(fn(itemCmp));
~~~
goto(index)跳转到第index项。index从0开始;onChange(fn),切换时绑定事件；bindItemClick(fn)切换项内列表绑定点击事件。
* * * * *
1、静态切换组件
~~~
<div class="rbk-tab">
<div class="rbk-tabitem" text="导航标签">
<div class="rbk-navlist">
<div class="rbk-navlistitem" navurl="">PC方案</a>
</div>
<div class="rbk-navlistitem" navurl="">手机方案</a>
</div>
<div class="rbk-navlistitem" navurl="">TV方案</a>
</div>
</div>
</div>
<div class="rbk-tabitem" text="列表标签">
<div class="rbk-list" rbk-role='circle'>
<div class="rbk-listitem">PC方案1</a>
</div>
<div class="rbk-listitem">手机方案1</a>
</div>
<div class="rbk-listitem">TV方案</a>
</div>
</div>
</div>
<div class="rbk-tabitem" text="自定义标签">
<div class="rbk-table-view" style="padding: 10px;">自定义内容</div>
</div>
</div>
~~~
2、动态绑定切换组件
html
~~~
<div class="rbk-tab"></div>
~~~
数据结构
~~~
var tabTest = [{
text: 'bind测试',
cldCtype: 'list',
data: [{
text: '普通内科二'
}, {
text: '普通外科二'
}]
}, {
text: 'bind测试1',
cldCtype: 'navlist',
data: [{
text: '普通内科sdfsdf',
url: '/index.html'
}, {
text: '普通外科sdfsdf',
url: '/index.html'
}]
}]
}
~~~
js
~~~
var tab = rbk.getCmp('tab');
tab.doLayout(tabTest);
~~~
说明：动态绑定类似于collalist。必须传cldCtype（子类类型）。
3、动态绑定模板切换组件
html
~~~
<div class="rbk-tab">
<div class="rbk-tabitem" tpl="tpl" text="{text}">
<div class="rbk-navlist" tpl="tpl">
<div class="rbk-navlistitem rbk-black" tpl="tpl" navurl="{url}">
{text1}<br/>
{text1}<br/>
{text1}
</div>
</div>
</div>
</div>
~~~
数据结构
~~~
var tabTest = [{
text: 'bind测试',
cldCtype: 'navlist',
data: [{
text1: '普通内科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}]
}, {
text: 'bind测试1',
cldCtype: 'navlist',
data: [{
text1: '普通内科',
url: ''
}, {
text1: '普通外科',
url: ''
}]
}]
~~~
js
~~~
var tab = rbk.getCmp('tab');
tab.doLayout(tabTest);
~~~
说明：模板绑定只支持navlist，可以给navlistitem添加class rbk-black去除箭头。
4.功能扩展1-左右界面tab
添加rbk-role="floortab" logwidth="30"(0-100 代表左侧区域百分比 不加该属性默认左侧百分之25。
html
~~~
<div class="rbk-tab" rbk-role="floortab" logwidth="30">
<div class="rbk-tabitem" tpl="tpl" text="{text}">
<div class="rbk-navlist rbk-black" tpl="tpl">
<div class="rbk-navlistitem" tpl="tpl">
{faculty_name} <span class="sigletips">{type}</span>
</div>
</div>
</div>
</div>
~~~
js
~~~
var UI2floorList2 = [{
"cldCtype": "navlist",
"text": "-2F",
"data": [{
"floor": "-2F",
"faculty_name": "核医学科",
"faculty_region": "B2",
type:"专家"
}, {
"floor": "-2F",
"faculty_name": "车库",
"faculty_region": "B2"
}]
}, {
"cldCtype": "navlist",
"text": "-1F",
"data": [{
"floor": "-1F",
"faculty_name": "家属患者休息区",
"faculty_region": "B1",
type:"专家"
}, {
"floor": "-1F",
"faculty_name": "高低配电室",
"faculty_region": "B1",
type:"专家"
}, {
"floor": "-1F",
"faculty_name": "中心吸引机房",
"faculty_region": "B1",
type:"普通"
}, {
"floor": "-1F",
"faculty_name": "冷冻机房",
"faculty_region": "B1"
}, {
"floor": "-1F",
"faculty_name": "物流传输机房",
"faculty_region": "B1"
}, {
"floor": "-1F",
"faculty_name": "车库",
"faculty_region": "B1"
},{
"floor": "-1F",
"faculty_name": "家属患者休息区",
"faculty_region": "B1"
}, {
"floor": "-1F",
"faculty_name": "高低配电室",
"faculty_region": "B1"
}, {
"floor": "-1F",
"faculty_name": "中心吸引机房",
"faculty_region": "B1"
}, {
"floor": "-1F",
"faculty_name": "冷冻机房",
"faculty_region": "B1"
}, {
"floor": "-1F",
"faculty_name": "物流传输机房",
"faculty_region": "B1"
}, {
"floor": "-1F",
"faculty_name": "车库",
"faculty_region": "B1"
}]
}, {
"cldCtype": "navlist",
"text": "1F",
"data": [{
"floor": "1F",
"faculty_name": "出院处",
"faculty_region": ""
}, {
"floor": "1F",
"faculty_name": "信息中心",
"faculty_region": ""
}, {
"floor": "1F",
"faculty_name": "消控中心",
"faculty_region": ""
}, {
"floor": "1F",
"faculty_name": "保安室",
"faculty_region": ""
}, {
"floor": "1F",
"faculty_name": "监控室",
"faculty_region": ""
}, {
"floor": "1F",
"faculty_name": "星巴克",
"faculty_region": ""
}, {
"floor": "1F",
"faculty_name": "全家超市",
"faculty_region": ""
}, {
"floor": "1F",
"faculty_name": "杏一医疗用品店",
"faculty_region": ""
}, {
"floor": "1F",
"faculty_name": "休闲吧",
"faculty_region": ""
}]
}, {
"cldCtype": "navlist",
"text": "2F",
"data": [{
"floor": "2F",
"faculty_name": "检验中心",
"faculty_region": ""
}, {
"floor": "2F",
"faculty_name": "消毒供应室",
"faculty_region": ""
}]
}, {
"cldCtype": "navlist",
"text": "3F",
"data": [{
"floor": "3F",
"faculty_name": "重症监护室（ICU）",
"faculty_region": ""
}, {
"floor": "3F",
"faculty_name": "病理科",
"faculty_region": ""
}, {
"floor": "3F",
"faculty_name": "检验中心",
"faculty_region": ""
}]
}];
var tab = rbk.getCmp('tab');
tab.doLayout(UI2floorList2);
~~~
5.功能扩展2-日期选择tab
添加rbk-role="datetab"
html
~~~
<div class="rbk-tab" rbk-role="datetab">
<div class="rbk-tabitem" tpl="tpl" text="{text}">
<div class="rbk-navlist rbk-black" tpl="tpl">
<div class="rbk-navlistitem" tpl="tpl" navurl="{url}">
{text1}<br>
{text1}
<input type="hidden" value="ppp">
</div>
</div>
</div>
</div>
~~~
js
~~~
var dateTab = [{
text: '周一01',
cldCtype: 'navlist',
data: [{
text1: '普通内科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}]
}, {
text: '周二02',
cldCtype: 'navlist',
data: [{
text1: '普通内科',
url: ''
}, {
text1: '普通外科',
url: ''
}]
},{
text: '周一01',
cldCtype: 'navlist',
data: [{
text1: '普通内科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}]
},{
text: '周一01',
cldCtype: 'navlist',
data: [{
text1: '普通内科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}]
}, {
text: '周二02',
cldCtype: 'navlist',
data: [{
text1: '普通内科',
url: ''
}, {
text1: '普通外科',
url: ''
}]
},{
text: '周一01',
cldCtype: 'navlist',
data: [{
text1: '普通内科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}]
}, {
text: '周二02',
cldCtype: 'navlist',
data: [{
text1: '普通内科',
url: ''
}, {
text1: '普通外科',
url: ''
}]
},{
text: '周一01',
cldCtype: 'navlist',
data: [{
text1: '普通内科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}, {
text1: '普通外科sdfsdf',
url: ''
}]
}]
var tab = rbk.getCmp('tab');
tab.doLayout(dateTab);
~~~
6.功能扩展3-手势滑动tab
添加rbk-role="dragtab"即可
~~~
<div class="rbk-tab" id="ttab" rbk-role="dragtab">
<div class="rbk-tabitem" text="标签1">
...
</div>
<div class="rbk-tabitem" text="标签2">
...
</div>
<div class="rbk-tabitem" text="标签3">
...
</div>
</div>
~~~
- 发布aar到maven仓库
- svn或gitlab代码上传规范
- maven仓库管理
- 自动构建
- Android自动构建
- Android-jenkins发布
- 规范
- Android
- Android组件模块文档
- 基础业务模块
- 智能导诊
- 科室医生
- 医院导航
- 健康资讯
- 健康百科
- 个人中心
- 外链模块
- 微信资讯
- 动态首页
- 互联网医院
- 外链模块基础版本
- 底层功能模块
- UI样式
- Http请求
- 动态功能
- 版本更新
- 支付（微信、支付宝）
- 二维码扫描
- 安全键盘
- 开发工具类模块
- icepick
- dart
- butterknife
- superRecycler
- jsonBuilder
- android-state
- iOS文档
- iOS组件模块文档
- iOS底层功能模块
- iOS弹出窗
- iOS加载框
- iOS-标准样式库
- iOS网络请求
- iOS二维码扫描
- iOS功能模块组件
- iOS健康资讯
- iOS健康百科
- iOS智能导诊
- iOS科室医生
- iOS医院导航
- iOS外链
- iOS模板（健康资讯类）
- iOS其它
- Cocoapods安装
- iOS-Cocoapods相关
- iOS-创建私有Cocoapods仓库
- 平台相关文档
- 全栈中心概述
- WEEX跨平台解决方法
- 玩转开发者平台
- android打包指南
- iOS自动化打包指南
- rubik-u web组件文档
- 开始
- 全局方法
- 列表组件
- 标题组件
- 按钮组件
- 切换组件
- 下拉框组件
- 开关/单/复选组件
- 功能列表组件
- 评星组件
- 搜索组件
- 图片上传组件
- 表单
- 表单例一
- 表单例二
- 表单例三
- 聊天组件
- 滑动刷新组件
- View窗口操作
- 面板组件
- 简单面板组件
- 信息展示面板
- 提示文字
- 底部悬浮组件
- 长文字展示组件
- 隐藏/显示面板
- 客户端组件
- 判断客户端环境
- 登录
- 等待框
- 提示框
- 时间选择器
- 扫码组件
- 拍照组件
- 访问相册组件
- 用户信息获取组件
- 返回上一页
- 返回首页
- 关闭webview
- 获取客户端类型
- 支付
- rubik-u web模板文档
- 基础组件模板
- 复选框使用案例