UISwitchButton

来自于:APICloud立即使用

概述

UISwitchButton一个 是一种带有状态的按钮,适合用作开关按钮,本模块结合主流切换按钮的UI风格,旨在为开发者提供统一,简单以及高效的UI组件,效果见下图:

open

打开按钮

open({params}, callback(ret))

params

id:

  • 类型:字符串类型
  • 描述:按钮的id

state:

  • 类型:布尔类型
  • 描述:开关状态
  • 默认:false

rect:

  • 类型:JSON对象
  • 描述:按钮的宽高及位置设置
{
    x: 100, // (可选项)数字类型;按钮左上角的x坐标(相对于所属的 Window 或 Frame);默认:100
    y: 100, // (可选项)数字类型;按钮左上角的y坐标(相对于所属的 Window 或 Frame);默认:100
    w: 60,  // (可选项)数字类型;按钮宽度;默认:100
    h: 40   // (可选项)数字类型;按钮的高度;默认:40
}

styles:

  • 类型:JSON对象
  • 描述:按钮样式的设计
{ 
    active :  #0F0 ,         // (可选项)字符串类型;按钮选中时背景;支持 rgb、rgba;默认: #0F0   
    inActive: #FFF ,         // (可选项)字符串类型;按钮未选中时背景设置;支持 rgb,rgba;默认: #0F0 
    bgCorner: 5    ,         // (可选项)数字类型;背景的圆角大小(只有设置颜色时此值有效);默认:5
    animationDuring: 300,    //(可选项)数字类型;切换动画的时长(单位:ms);默认:300
    thumb:{                  // JSON对象;按钮thumb的设置
        active :  #FFF , // (可选项)字符串类型;按钮选中时背景;支持 rgb,rgba,#;默认: #FFF   
        inActive: #FFF , // (可选项)字符串类型;按钮未选中时背景设置;支持 rgb,rgba;默认: #FFF 
        size:15 ,        // (可选项)数字类型;thumb的大小;默认:15
        corner: 3        // (可选项)数字类型;thumb的圆角;默认:3
    }
}

fixed:

  • 类型:布尔
  • 描述:是否将按钮固定到窗口或frame上,是否跟随窗口上下滚动,可为空
  • 默认值:true

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)按钮固定到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:按钮依附于当前 window

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    state:true, // 布尔类型;按钮的开启状态(点击按钮时会返回)
    id : ''        // 字符串类型;按钮标识符
}

示例代码

var switchBtn = api.require('UISwitchButton');
switchBtn.open({
    id:'123',
    state:true,
    rect: {
      x: 100,
      y: 100,
      w: 80,
      h: 30
    },
    styles:{
       bgCorner:15,
       active:'#EEE' ,
       inActive:'#0F0',
       thumb:{                  
          active:'#F00' , 
          inActive:'#F0F' , 
          size:30,        
          corner:15
       }
    },
    fixedOn: '',
    fixed: true
}, function(ret) {
    JSON.stringify(ret);
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏按钮

hide({params})

params

id:

  • 类型:字符串类型
  • 描述:按钮的id

示例代码

var switchBtn = api.require('UISwitchButton');
switchBtn.hide({
    id: ''
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示按钮

show({params})

params

id:

  • 类型:字符串类型
  • 描述:按钮的id

示例代码

var switchBtn = api.require('UISwitchButton');
switchBtn.show({
    id: ''
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

turnOn

打开

turnOn({params})

params

id:

  • 类型:字符串类型
  • 描述:按钮的id

示例代码

var switchBtn = api.require('UISwitchButton');
switchBtn.turnOn({
    id: ''
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

turnOff

关闭

turnOn({params})

params

id:

  • 类型:字符串类型
  • 描述:按钮的id

示例代码

var switchBtn = api.require('UISwitchButton');
switchBtn.turnOff({
    id: ''
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getState

获取按钮的开关状态

getState({params}, callback(ret))

params

id:

  • 类型:字符串类型
  • 描述:按钮的id

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    state:true,  // 布尔类型;按钮的当前的开启状态
}

示例代码

var switchBtn = api.require('UISwitchButton');
switchBtn.getState({
    id: ''
}, function(ret) {
    if (ret) {
        alert(JSON.stringify(ret));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭按钮

close({params})

params

id:

  • 类型:字符串类型
  • 描述:按钮的id

示例代码

var switchBtn = api.require('UISwitchButton');
switchBtn.close({
    id: ''
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本