gridSlide

来自于：开发者立即使用

openMenu hideMenu showMenu closeMenu

论坛示例

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

概述

gridSlide 用原生代码实现了九宫格按钮布局，并可以自定义设置行和列，分页显示等。

模块效果图

描述

固件要求

Android：2.3.1及以上 iOS：7.0及以上

openMenu

打开九宫格菜单

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

params

rect：

  • 类型：JSON 对象
  • 描述：（必填项）模块的位置及尺寸
  • 备注：iOS,Android 必须传此参数。
  • 内部字段：
  1. {
  2.     y: 0,   //（必填项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
  3.     h: 250  //（必填项）数字类型；模块的高度；默认值：所属的 Window 或 Frame 的高度
  4. }

background：

  • 类型：字符串
  • 描述：页面背景色(如：#ff00ff)
  • 默认值：透明色

rows：

  • 类型：数字型
  • 描述：（可选项）九宫格需要展示的行数。
  • 默认值：3

cols：

  • 类型：数字型
  • 描述：（可选项）九宫格需要展示的列数。
  • 默认值：3

isShowDot：

  • 类型：布尔型
  • 描述：（可选项）是否显示底部dot圆点按钮
  • 默认值：true（显示）

fixedOn：

  • 类型：字符串
  • 描述：（可选项）模块所属 Frame 的名字，若不传则模块归属于当前 Window

fixed：

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

data：

  • 类型： 数组对象
  • 描述：（必填项）模块九宫格按钮图标和名称
  • 内部字段：
  1. [{
  2.     id: '',   //（可选项）字符串；按钮ID
  3.     name: '',   //（可选项）字符串；按钮名称
  4.     icon: '',   //（可选项）字符串；按钮图标，支持fs:// widget://默认: defaultIcon图标
  5. },
  6. {
  7.     id: '',   //（可选项）字符串；按钮ID
  8.     name: '',   //（可选项）字符串；按钮名称
  9.     icon: '',   //（可选项）字符串；按钮图标，支持fs:// widget://默认: defaultIcon图标
  10. }]

defaultIcon：

  • 类型：字符串
  • 描述：（可选项）设置icon图标不存在是的默认图片(支持fs:// widget://)。
  • 默认值：App图标

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true,      //布尔型；true||false
  3.     evenType: 'open',   //打开类型；open|click|pageIndex
  4.     id : ''    ,            //按钮ID
  5.     name : '',           //按钮名称
  6.     currentPage : 0    //当前显示页面序号
  7. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg : '' //错误信息内容
  3. }

示例代码

  1. var demo = api.require('gridSlide');
  2. demo.openMenu({
  3.     rect : {
  4.         y : 200,
  5.         h : 200
  6.      },
  7.      rows : 2, //行
  8.      cols : 4, //列
  9.      data : [
  10.         {
  11.             name : 'name0',
  12.             icon : 'widget://res/ic_category0.png'
  13.         },{
  14.             name : 'name1',
  15.             icon : 'widget://res/ic_category_1.png'
  16.         },{
  17.             name : 'name2',
  18.             icon : 'widget://res/ic_category_2.png'
  19.         },{
  20.             name : 'name3',
  21.             icon : 'widget://res/ic_category_3.png'
  22.         },{
  23.             name : 'name4',
  24.             icon : 'widget://res/ic_category_4.png'
  25.         },{
  26.             name : 'name5',
  27.             icon : 'widget://res/ic_category_5.png'
  28.         },{
  29.             name : 'name6',
  30.             icon : 'widget://res/ic_category_6.png'
  31.         },{
  32.             name : 'name7',
  33.             icon : 'widget://res/ic_category_7.png'
  34.         },{
  35.             name : 'name8',
  36.             icon : 'widget://res/ic_category_8.png'
  37.         },{
  38.             name : 'name9',
  39.             icon : 'widget://res/ic_category_9.png'
  40.         },{
  41.             name : 'name10',
  42.             icon : 'widget://res/ic_category_10.png'
  43.         },{
  44.             name : 'name11',
  45.             icon : 'widget://res/ic_category_11.png'
  46.         },{
  47.             name : 'name12',
  48.             icon : 'widget://res/ic_category_12.png'
  49.         },{
  50.             name : 'name13',
  51.             icon : 'widget://res/ic_category_13.png'
  52.         },{
  53.             name : 'name14',
  54.             icon : 'widget://res/ic_category_0.png'
  55.         },{
  56.             name : 'name15',
  57.             icon : 'widget://res/ic_category_1.png'
  58.         },{
  59.             name : 'name16',
  60.             icon : 'widget://res/ic_category_2.png'
  61.         },{
  62.             name : 'name17',
  63.             icon : 'widget://res/ic_category_3.png'
  64.         },{
  65.             name : 'name18',
  66.             icon : 'widget://res/ic_category_4.png'
  67.         },{
  68.             name : 'name19',
  69.             icon : 'widget://res/ic_category_5.png'
  70.         },{
  71.             name : 'name20',
  72.             icon : 'widget://res/ic_category_6.png'
  73.         },{
  74.             name : 'name21',
  75.             icon : 'widget://res/ic_category_7.png'
  76.         },{
  77.             name : 'name22',
  78.             icon : 'widget://res/ic_category_8.png'
  79.         },{
  80.             name : 'name23',
  81.             icon : 'widget://res/ic_category_9.png'
  82.         },{
  83.             name : 'name24',
  84.             icon : 'widget://res/ic_category_10.png'
  85.         },{
  86.             name : 'name25',
  87.             icon : 'widget://res/ic_category_11.png'
  88.         },{
  89.             name : 'name26',
  90.             icon : 'widget://res/ic_category_12.png'
  91.         },{
  92.             name : 'name27',
  93.             icon : 'widget://res/ic_category_13.png'
  94.         }
  95.     ],
  96.     fixedOn : api.frameName,
  97.     fixed : true,
  98.     isShowDot : true
  99. },function(ret, err) {
  100.     alert(JSON.stringify(ret));
  101. });

可用性

Android、iOS系统

可提供的1.0.0及更高版本

hideMenu

隐藏菜单

hideMenu(callback(ret, err))

callback(ret, err)

ret：

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

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg : '' //错误信息内容
  3. }

示例代码

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

可用性

Android、iOS系统

可提供的1.0.0及更高版本

showMenu

显示菜单

hideMenu(callback(ret, err))

callback(ret, err)

ret：

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

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg : '' //错误信息内容
  3. }

示例代码

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

可用性

Android、iOS系统

可提供的1.0.0及更高版本

closeMenu

关闭菜单

closeMenu(callback(ret, err))

callback(ret, err)

ret：

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

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg : '' //错误信息内容
  3. }

示例代码

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

可用性

Android、iOS系统

可提供的1.0.0及更高版本