WeX5教程之图文讲解拾色器的妙用.docxVIP

　　最近做后台字幕设计，突然发现，每次调用拾色器，都要去开发工具里调用，很麻烦。wex5没有提供拾色器组件，能不能把拾色器组装到wex5的编辑页面中呢?这样可以把颜色值写到数据库里，供前后台动态调用与修改颜色的值。经过一番研究，测试，可以的。 　　一 、效果演示： 点击拾色器，弹出拾色器窗口 点击应用按钮，将颜色应用到字幕上　 　　二、设计思路： 　　用插入标签的方法，将h5的color元素插入到wex5页面中，用js和wex5组件配合，将颜色值取出，用css方法实现更改字幕颜色。 　　三、代码逻辑与实现： 　　1.创建字幕表，加入color字段　 　　2.在合适位置插入color标签，定义id 　　 　　3、加入button按钮和input组件　　 　　注意事项：1.color调用的是浏览器的拾色器，没有触发事件可以调用，所以用button来取值。 　　2.input组件与数据库绑定，同时显示color??前值。 　　4 、取值赋值(如此简单，是的) 　　Mtotype.colorBtnClick = function(event){ 　　var color=document.getElementById(color).value; //用id选择color对像，并取值 　　$(.text).css(color,color); //用class选择器进行样式改变 　　p(outputColor).set(value,color); //将颜色值赋给input组件 　　}; 　　注意事项： 　　1.用input来显示有2个优点，一是绑定数据库中的color值，可以写入写出，二是可以复用鼠标圈中复制input框内的 值，供其它页面使用。 　　2.在wex5的方法中例用js方法是可行的，在js方法中写wex5的方法会出错。 　　5.确定保存： 　　baasdata.save(),将数据写入数据库。