columnBar

来自于:开发者立即使用

open setCurrentItem hide show onItemClick onDataChange outNumberMax close

论坛示例

为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码供您参考。

概述

columnBar 模块概述

本模块封装了多栏目类型导航菜单,可以动态的控制栏目标题内容,用户可以拖拽进行菜排序,方便实现app用户栏目的个性化设置。可以用本模块实现今日头条栏目频道管理功能。

描述

描述

固件要求

Android:2.3.1及以上 iOS:7.0及以上

模块接口

open

打开栏目导航

open({params}, callback(ret, err))

params

rect:

  • 类型:JSON 对象
  • 默认值:见内部字段
  • 描述:(可选项)浏览器窗口的位置和大小,设置margin后,在不同手机上面会保持与父页面的各方向边距一致,而中间区域会自动扩充。建议使用margin布局,可以完美适配带smartBar的手机。
  • 内部字段:
  1. {
  2. x:0, //左上角x坐标,默认0
  3. y:0, //左上角y坐标,默认0
  4. w:320, //宽度,默认'auto',页面从x位置开始自动充满父页面宽度
  5. h:480 //高度,默认'auto',页面从y位置开始自动充满父页面高度
  6. marginLeft:0, //相对父页面左外边距的距离,默认0
  7. marginTop:0, //相对父页面上外边距的距离,默认0
  8. marginBottom:0, //相对父页面下外边距的距离,默认0
  9. marginRight:0 //相对父页面右外边距的距离,默认0
  10. }

fixedOn:

  • 类型:字符串
  • 描述:(可选项)模块所属 Frame 的名字,若不传则模块归属于当前 Window

fixed:

  • 类型:布尔
  • 描述:((可选项)模块是否随所属 Window 或 Frame 滚动
  • 默认值:true(不随之滚动)

allData:

  • 类型: 数组对象
  • 描述:(必填项)导航条上所有选择项的集合;(数组内菜单名建议2-4个字)

showData:

  • 类型: 数组对象
  • 描述:(必填项)导航条上显示的选择项的集合(数组内菜单名建议2-4个字)

maxShow:

  • 类型:数值型
  • 描述:(可选项)导航条上最多显示的选择项的个数.
  • 默认值: 1

isExpand:

  • 类型:数值型
  • 描述:(可选项)是否支持可扩展的功能,(0:不开启扩展,1:开启扩展).
  • 默认值: 1(开启扩展)

showedLable:

  • 类型:布尔
  • 描述:(可选项)扩展栏目的已展示栏目标题
  • 默认值:我的频道

addLable:

  • 类型:布尔
  • 描述:(可选项)扩展栏目的可添加栏目标题
  • 默认值:频道推荐

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: true, //布尔型;true||false
  3. shows : [] //当前导航条上显示的栏目
  4. }

err:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. errorCode: , //数字类型;
  3. errorMessage : //字符串类型
  4. }

示例代码

  1. var param1 = {
  2. rect : {
  3. x : 0,
  4. y : 0,
  5. w : api.frameWidth,
  6. h : api.frameHeight
  7. },
  8. fixedOn : api.frameName,
  9. fixed : true,
  10. allData:["推荐", "热点", "成都", "视频", "社会","图片", "娱乐", "问答", "科技", "财经","军事", "段子", "美女", "国际", "趣图", "健康","特卖", "房产", "小说", "时尚", "历史", "育儿", "直播", "搞笑", "数码", "美食", "养生", "电影", "手机", "旅游", "宠物", "情感", "家居", "教育", "三农", "孕产", "文化"],
  11. showData:["推荐", "热点", "成都", "视频", "社会","图片", "娱乐", "问答", "科技", "财经", "军事", "段子", "美女", "国际", "趣图", "健康","特卖", "房产"],
  12. maxShow:25,
  13. isExpand:1,
  14. showedLable:'我的频道',
  15. addLable:'频道推荐'
  16. };
  17. var demo = api.require('columnBar');
  18. demo.open(param1, function(ret, err){
  19. alert(JSON.stringify(ret));
  20. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setCurrentItem

设置当前选中项

setCurrentItem({params}, callback(ret, err))

params

index:

  • 类型:数值型
  • 描述:(可选项)当前选中项的序号值。(备注:改值需要通过open接口返回的shows数组位置索引进行控制)。
  • 默认值: 0

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: true //布尔型;true||false
  3. }

err:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. errorCode: , //数字类型;
  3. errorMessage : //字符串类型
  4. }

示例代码

  1. var demo = api.require('columnBar');
  2. demo.setCurrentItem({
  3. index: 3
  4. }, function(ret, err) {
  5. alert(JSON.stringify(ret));
  6. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏导航菜单

hide(callback(ret, err))

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: true //布尔型;true||false
  3. }

err:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. errorCode: , //数字类型;
  3. errorMessage : //字符串类型
  4. }

示例代码

  1. var demo = api.require('columnBar');
  2. demo.hide(function(ret, err) {
  3. alert(JSON.stringify(ret));
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示导航菜单

show(callback(ret, err))

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: true //布尔型;true||false
  3. }

err:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. errorCode: , //数字类型;
  3. errorMessage : //字符串类型
  4. }

示例代码

  1. var demo = api.require('columnBar');
  2. demo.show(function(ret, err) {
  3. alert(JSON.stringify(ret));
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

onItemClick

监听栏目item被点击

onItemClick(callback(ret))

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. index: , //被点击的元素的索引
  3. name : //被点击的元素的名称
  4. }

示例代码

  1. var demo = api.require('columnBar');
  2. demo.onItemClick(function(ret) {
  3. alert(JSON.stringify(ret));
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

onDataChange

监听栏目显示数据发生变化

onDataChange(callback(ret))

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. shows: [] //当前显示在导航条上的选择项集合
  3. }

示例代码

  1. var demo = api.require('columnBar');
  2. demo.onDataChange(function(ret, err) {
  3. alert(JSON.stringify(ret));
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

outNumberMax

在扩展界面添加item时超过open设置的最大值数时回调

onDataChange(callback(ret))

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: true
  3. }

示例代码

  1. var demo = api.require('columnBar');
  2. demo.outNumberMax(function(ret, err) {
  3. alert(JSON.stringify(ret));
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭导航菜单

close(callback(ret, err))

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: true //布尔型;true||false
  3. }

err:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. errorCode: , //数字类型;
  3. errorMessage : //字符串类型
  4. }

示例代码

  1. var demo = api.require('columnBar');
  2. demo.close(function(ret, err) {
  3. alert(JSON.stringify(ret));
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本