HBuild Hybrid App开发(六)事件绑定
2016-06-14 09:04
183 查看
在做公司项目的时候,有一个页面有个个数不定的勾选框checkbox视图区,每个勾选框对应一个ID和NAME的值,我们需要把选中的chexkbox的ID获取到,然后以拼接成字符串,字符中间用“,”分割。在这个需求里面有三个点,1:不定选项的checkbox; 2:获取选中的checkbox的ID; 3:字符串中间使用“,”拼接。
关于上面的三个知识点来说,个人任我最难的是第2个,难点在在使用H5做的时候我还不知道js的时间绑定中的这种方法,我们虽说是要获取选中的checkbox的ID,实际这些需要在checkbox的点击时间里面去处理。以前做原生的时候是在button的点击事件里面处理的,每个button的tag值我们可以设置为0~n,然后根据tag值从数据源数组里面去取数据。但是在H5里面去不能这样处理,使用下面的事件绑定方法:
这个事件绑定的方式有个特点就是需要知道每个checkbox的id,然后一个id有一个事件绑定方法。显然这么做是难以接受的,因为checkbox的个数不定。
还有一点就是,保存选中checkbox的ID,再加上每个checkbox都存在多次点击的时候,这个时候就需要在存储ID的容器里面处理选中的时候存储的是ID,非选中的时候存储的不是ID。想到每个ID的唯一性和字典里面key的唯一性,下面的就好做了。每一个checkbox对应字典里面的一个键值对,key是ID,选中时的value是ID,非选中的时候value不是ID(这里我们假定为是“X”);然后在checkbox点击事件里面,当checkbox被选中时,设置其对应的键值对的value为对应的ID,否则设置为“X”。
这里还是没有说到这篇博客的重点,事件绑定。其实这也是这么一个功能点,我认为对我来说我需要学习的一个知识点,所以我叫他事件绑定。
《Javascript事件绑定的几种方式》
关于Javascript的事件绑定,可以看看上面两篇文章。但在实际使用中我们需要多看看mui提供的方式,因为平台和环境不一样。
代码下载地址:请点击我!
关于上面的三个知识点来说,个人任我最难的是第2个,难点在在使用H5做的时候我还不知道js的时间绑定中的这种方法,我们虽说是要获取选中的checkbox的ID,实际这些需要在checkbox的点击时间里面去处理。以前做原生的时候是在button的点击事件里面处理的,每个button的tag值我们可以设置为0~n,然后根据tag值从数据源数组里面去取数据。但是在H5里面去不能这样处理,使用下面的事件绑定方法:
document.getElementById('imageView').addEventListener('tap',function(){})
这个事件绑定的方式有个特点就是需要知道每个checkbox的id,然后一个id有一个事件绑定方法。显然这么做是难以接受的,因为checkbox的个数不定。
还有一点就是,保存选中checkbox的ID,再加上每个checkbox都存在多次点击的时候,这个时候就需要在存储ID的容器里面处理选中的时候存储的是ID,非选中的时候存储的不是ID。想到每个ID的唯一性和字典里面key的唯一性,下面的就好做了。每一个checkbox对应字典里面的一个键值对,key是ID,选中时的value是ID,非选中的时候value不是ID(这里我们假定为是“X”);然后在checkbox点击事件里面,当checkbox被选中时,设置其对应的键值对的value为对应的ID,否则设置为“X”。
这里还是没有说到这篇博客的重点,事件绑定。其实这也是这么一个功能点,我认为对我来说我需要学习的一个知识点,所以我叫他事件绑定。
效果图
这里初始设置的每个按钮是未选中状态。js事件绑定
《JavaScript事件绑定》《Javascript事件绑定的几种方式》
关于Javascript的事件绑定,可以看看上面两篇文章。但在实际使用中我们需要多看看mui提供的方式,因为平台和环境不一样。
代码
<html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css--> <link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.css" /> <!--App自定义的css--> <style type="text/css"> .mui-checkbox{ height: 44px; background: white; border-bottom-style: solid; border-bottom-color: #F3F3F3; border-bottom-width: 1px; } .span { float: right; margin-right: 150px; height: 44px; line-height: 44px; } .checkbox { margin-top: 5px; margin-right: 200px; height: 44px; line-height: 44px; } .checkbox :before { 0px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">事件绑定</h1> </header> <div class="mui-content"> <div class="mui-checkbox"> <span class="span">我的id:1</span> <input type="checkbox" class="checkbox" id="" value="" /> </div> <div class="mui-checkbox"> <span class="span">我的id:2</span> <input type="checkbox" class="checkbox" id="" value="" /> </div> <div class="mui-checkbox"> <span class="span">我的id:3</span> <input type="checkbox" class="checkbox" id="" value="" /> </div> </div> </body> <script src="../js/mui.min.js"></script> <script src="../js/mui.zoom.js"> </script> <script src="../js/mui.previewimage.js"></script> <script src="../js/tools.js" ></script> <script> var checkDice = new Array(); mui.init({ swipeBack:true //启用右滑关闭功能 }); mui.plusReady(function() { getData(); }) // 数据处理 function getData() { var content = document.body.querySelector('.mui-content'); content.innerHTML = ''; var count = Math.random()*10 | 0; // 获取0~10之间的整数 count = count + 5; // 6~16之间 console.log(count); for (var index = 0; index < count; index ++ ) { var div = document.createElement('mui-checkbox'); div.innerHTML = '<div class="mui-checkbox">' + '<span class="span">我的ID:' + index + '</span>' + '<input type="checkbox" class="checkbox" id="' + index +'" value="" /></div>'; content.appendChild(div,content.firstChild); checkDice[String(index)] = 'X'; } } // 事件绑定 mui('.mui-content').on('change','input',function(){ console.log("id = " + this.id + " status = " + this.checked); if (this.checked) { checkDice[this.id] = this.id; } else{ checkDice[this.id] = 'X'; } console.log("checkDice = " + checkDice); console.log('被选中的checkbox的ID是:',makeData(checkDice)); }) // 数据处理 function makeData(dice){ var result = ''; for (var key in dice) { if (dice[key] != 'X') { result = result + dice[key] + ','; } } // 去除字符串最后的','后返回 return result.substring(0,result.length - 1); } </script> </html>
总结
写代码前,理清思路,学会多看文档,多思考。代码下载地址:请点击我!
相关文章推荐
- cordova的camera插件,IOS下图片旋转问题
- Unity3D游戏开发之“unity3D命令行参数”
- Android 检测是否有ROOT权限
- IOS Dev Intro - Message Category and Protocol
- Android组件(Broadcast Receiver)
- android如何制作出一个简单的聊天app
- 关于APP的新手指南
- iOS 实现转盘的效果
- Androidstudio shrinkResources
- Android开发注意点
- 【福利将至】iPhone用户可用Siri发微信了
- 15 个 Android 通用流行框架
- 快速开发之Android Orm总结
- cocoapods安装使用
- Android Vibrator的使用
- 我是如何微信日涨四千粉的?
- iOS程序灵魂之性能优化
- 全新的手势,侧滑返回、全局右滑返回都OUT啦!
- App启动加载广告页面思路
- UNITY3D圆形算法