gridSlide

来自于:开发者立即使用

概述

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

模块效果图

描述

openMenu

打开九宫格菜单

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

params

rect:

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

background:

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

rows:

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

cols:

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

isShowDot:

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

fixedOn:

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

fixed:

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

data:

  • 类型: 数组对象
  • 描述:(必填项)模块九宫格按钮图标和名称
  • 内部字段:
[{
    id: '',   //(可选项)字符串;按钮ID
    name: '',   //(可选项)字符串;按钮名称
    icon: '',   //(可选项)字符串;按钮图标,支持fs:// widget://默认: defaultIcon图标
},
{
    id: '',   //(可选项)字符串;按钮ID
    name: '',   //(可选项)字符串;按钮名称
    icon: '',   //(可选项)字符串;按钮图标,支持fs:// widget://默认: defaultIcon图标
}]

defaultIcon:

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

callback(ret, err)

ret:

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

err:

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

示例代码

var demo = api.require('gridSlide');
demo.openMenu({
    rect : {
        y : 200,
        h : 200
     },
     rows : 2, //行
     cols : 4, //列
     data : [
        {
            name : 'name0',
            icon : 'widget://res/ic_category0.png'
        },{
            name : 'name1',
            icon : 'widget://res/ic_category_1.png'
        },{
            name : 'name2',
            icon : 'widget://res/ic_category_2.png'
        },{
            name : 'name3',
            icon : 'widget://res/ic_category_3.png'
        },{
            name : 'name4',
            icon : 'widget://res/ic_category_4.png'
        },{
            name : 'name5',
            icon : 'widget://res/ic_category_5.png'
        },{
            name : 'name6',
            icon : 'widget://res/ic_category_6.png'
        },{
            name : 'name7',
            icon : 'widget://res/ic_category_7.png'
        },{
            name : 'name8',
            icon : 'widget://res/ic_category_8.png'
        },{
            name : 'name9',
            icon : 'widget://res/ic_category_9.png'
        },{
            name : 'name10',
            icon : 'widget://res/ic_category_10.png'
        },{
            name : 'name11',
            icon : 'widget://res/ic_category_11.png'
        },{
            name : 'name12',
            icon : 'widget://res/ic_category_12.png'
        },{
            name : 'name13',
            icon : 'widget://res/ic_category_13.png'
        },{
            name : 'name14',
            icon : 'widget://res/ic_category_0.png'
        },{
            name : 'name15',
            icon : 'widget://res/ic_category_1.png'
        },{
            name : 'name16',
            icon : 'widget://res/ic_category_2.png'
        },{
            name : 'name17',
            icon : 'widget://res/ic_category_3.png'
        },{
            name : 'name18',
            icon : 'widget://res/ic_category_4.png'
        },{
            name : 'name19',
            icon : 'widget://res/ic_category_5.png'
        },{
            name : 'name20',
            icon : 'widget://res/ic_category_6.png'
        },{
            name : 'name21',
            icon : 'widget://res/ic_category_7.png'
        },{
            name : 'name22',
            icon : 'widget://res/ic_category_8.png'
        },{
            name : 'name23',
            icon : 'widget://res/ic_category_9.png'
        },{
            name : 'name24',
            icon : 'widget://res/ic_category_10.png'
        },{
            name : 'name25',
            icon : 'widget://res/ic_category_11.png'
        },{
            name : 'name26',
            icon : 'widget://res/ic_category_12.png'
        },{
            name : 'name27',
            icon : 'widget://res/ic_category_13.png'
        }
    ],
    fixedOn : api.frameName,
    fixed : true,
    isShowDot : true
},function(ret, err) {
    alert(JSON.stringify(ret));
});

可用性

Android、iOS系统

可提供的1.0.0及更高版本

hideMenu

隐藏菜单

hideMenu(callback(ret, err))

callback(ret, err)

ret:

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

err:

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

示例代码

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

可用性

Android、iOS系统

可提供的1.0.0及更高版本

showMenu

显示菜单

hideMenu(callback(ret, err))

callback(ret, err)

ret:

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

err:

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

示例代码

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

可用性

Android、iOS系统

可提供的1.0.0及更高版本

closeMenu

关闭菜单

closeMenu(callback(ret, err))

callback(ret, err)

ret:

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

err:

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

示例代码

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

可用性

Android、iOS系统

可提供的1.0.0及更高版本