请选择 进入手机版 | 继续访问电脑版

UBAINS

 找回密码
 立即注册
搜索
热搜: UBAINS
查看: 2798|回复: 0

[编程技巧] 按钮点击和按钮的取反等操作

[复制链接]

10

主题

11

帖子

447

积分

版主

Rank: 7Rank: 7Rank: 7

积分
447
QQ
发表于 2021-10-26 11:19:08 | 显示全部楼层 |阅读模式
常见写法

通过规律的按钮命名和传入参数不同来区分按钮,改变按钮图片


  1. // 定义一个长度为 10 的数组用来存取 10 个按钮的状态
  2. var btnStatus = new Array(10);

  3. // 每个按钮点击时执行 这个方法, 通过传入参数 0~9 来标识是哪个按钮
  4. // 这写按钮的名字也命名成有规律,前缀相同只有最后一位不相同为  0~9 数字
  5. function btnClick(id) {
  6.     if (btnStatus[id] == 1) {
  7.         btnStatus[id] = 0;
  8.         setButtonImage("按钮名称前缀"+id,"OFF状态图片.png");
  9.         // OFF 状态时 发送代码或者其他操作
  10.         // 可以通过 id 来区分按钮
  11.         // sendCodeString("COM1",id);  // 发送代码

  12.     } else {
  13.         btnStatus[id] = 1;
  14.         setButtonImage("按钮名称前缀"+id,"ON状态图片.png");
  15.         // ON 状态时候


  16.     }
  17. }
复制代码




构造函数方法

通过构造函数的方式,只需要传入按钮名称,实例化过程中根据按钮名称获取按钮的on、off图片

改变状态时同时改变图片

update方法用于更新按钮图片,如APP退出时,可在进入页面时刷新按钮状态

也可以再封装一层,实现多个按钮的状态管理



  1. function clickToggle(name, status) {
  2.     this.name = name;
  3.     this.imageOn = getImageOn(name);
  4.     this.imageOff = getImageOff(name);
  5.     this.status = status || 0;
  6.     this.onArr = [];
  7.     this.offArr = [];
  8.     this.click = function () {
  9.         if (this.status) {
  10.             setButtonImage(this.name, this.imageOff);
  11.             this.status = 0;
  12.             this.emit("off");
  13.         } else {
  14.             setButtonImage(this.name, this.imageOn);
  15.             this.status = 1;
  16.             this.emit("on");
  17.         }
  18.     }
  19.     this.on = function () {
  20.         setButtonImage(this.name, this.imageOn);
  21.         this.status = 1;
  22.         this.emit("on");
  23.     }
  24.     this.off = function () {
  25.         setButtonImage(this.name, this.imageOff);
  26.         this.status = 0;
  27.         this.emit("off");
  28.     }
  29.     this.update = function () {
  30.         if (this.status) {
  31.             setButtonImage(this.name, this.imageOn);
  32.         } else {
  33.             setButtonImage(this.name, this.imageOff);
  34.         }
  35.     }
  36.     this.subscribe = function (action, cb) {
  37.         if (typeof cb != 'function') {
  38.             throw "clickToggle " + this.name + " subscribe 参数2错误,应该传入回调函数";
  39.         }
  40.         if (action.toLowerCase() == "on") {
  41.             this.onArr.push(cb);
  42.         }
  43.         if (action.toLowerCase() == "off") {
  44.             this.offArr.push(cb);
  45.         }
  46.     }
  47.     this.emit = function (action) {
  48.         var array = [];
  49.         if (action.toLowerCase() == "on") {
  50.             array = this.onArr;
  51.         }
  52.         if (action.toLowerCase() == "off") {
  53.             array = this.offArr;
  54.         }
  55.         for (var i = 0; i < array.length; i++) {
  56.             var element = array[i];
  57.             try {
  58.                 element();
  59.             } catch (error) {
  60.                 sendLog("clickToggle " + this.name, error)
  61.             }
  62.         }
  63.     }
  64. }

  65. // clickToggle 实例化可以传入两个参数,也可以只传按钮名称
  66. // 参数1 按钮名称
  67. // 参数2 按钮的初始状态 0 为 off 1 为on
  68. var bt1 = new clickToggle("test", 1);
  69. // var bt1 = new clickToggle("test");

  70. // 更新按钮状态 实例化以后可以在任何时候更新状态
  71. // 会根据按钮状态重新改变按钮图片
  72. bt1.update();

  73. // 订阅 按钮的 on off 点击事件
  74. bt1.subscribe("on", function () {
  75.     // 按钮被点击且状态为 on 时执行
  76.     sendLog("按钮被点击了", "状态为 ON");

  77. })
  78. // 订阅 按钮的 on off 点击事件
  79. // 参数1 为订阅事件 只能为 on 或者 off
  80. // 参数2 为回调函数
  81. bt1.subscribe("off", function () {
  82.     // 按钮被点击且状态为 off 时执行
  83.     sendLog("按钮被点击了", "状态为 OFF");
  84. })



  85. function buttonOffStatus() {
  86.     // 按钮被点击且状态为 off 时执行
  87.     sendLog("按钮被点击了", "状态为 OFF");
  88. }

  89. // 另一种写法
  90. // on off 状态上可以多次订阅
  91. // 状态变化时依次执行
  92. bt1.subscribe("off",buttonOffStatus);


  93. // 按钮的点击
  94. // 当前状态为 on 时 点击后 按钮将变成 off 状态
  95. // 当前状态为 off 时 点击后 按钮将变成 on 状态
  96. bt1.click();

  97. // 设置按钮状态 不管按钮处于什么状态使之处于 on 状态
  98. bt1.on();

  99. // 设置按钮状态 不管按钮处于什么状态使之处于 off 状态
  100. bt1.off();
复制代码


高级模式
B Color Image Link Quote Code Smilies |上传

本版积分规则

Archiver|手机版|小黑屋|BBS.UBAINSYUN.COM

GMT+8, 2024-3-28 17:37 , Processed in 0.036962 second(s), 19 queries .

Powered by UBAINS! X3.4

© 2001-2017 UBAINS Inc.

快速回复 返回顶部 返回列表