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位置开始自动充满父页面高度
  7.     marginLeft:0,    //相对父页面左外边距的距离，默认0
  8.     marginTop:0,    //相对父页面上外边距的距离，默认0
  9.     marginBottom:0,    //相对父页面下外边距的距离，默认0
  10.     marginRight:0    //相对父页面右外边距的距离，默认0
  11. }

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及更高版本