UISwitchButton

[open](#a1)
[hide](#a2)
[show](#a3)
[turnOn](#a4)
[turnOff](#a5)
[getState](#a6)
[close](#a7)

论坛示例

为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

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,  // （可选项）数字类型；按钮宽度，支持auto；默认：100
    h: 40   // （可选项）数字类型；按钮的高度，支持auto；默认：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) {
        api.alert({
            msg: 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及更高版本

论坛示例

为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18