wex5 教程 之 图文讲解 拾色器的妙用

       最近做后台字幕设计，突然发现，每次调用拾色器，都要去开发工具里调用，很麻烦。wex5没有提供拾色器组件，能不能把拾色器组装到wex5的编辑页面中呢？这样可以把颜色值写到数据库里，供前后台动态调用与修改颜色的值。经过一番研究，测试，可以的。

      一 、效果演示：

            点击拾色器，弹出拾色器窗口

    点击应用按钮，将颜色应用到字幕上

        

二、设计思路：

        用插入标签的方法，将h5的color元素插入到wex5页面中，用js和wex5组件配合，将颜色值取出，用css方法实现更改字幕颜色。

三、代码逻辑与实现：

      1.创建字幕表，加入color字段

        

      2.在合适位置插入color标签，定义id

         

       

    3、加入button按钮和input组件

        

      注意事项：1.color调用的是浏览器的拾色器，没有触发事件可以调用，所以用button来取值。

                        2.input组件与数据库绑定，同时显示color当前值。

   4 、取值赋值（如此简单，是的）

        Model.prototype.colorBtnClick = function(event){
       var color=document.getElementById("color").value;        //用id选择color对像，并取值
       $(".text").css("color",color);                                              //用class选择器进行样式改变
       this.comp("outputColor").set("value",color);                    //将颜色值赋给input组件
       };

      注意事项：

           1.用input来显示有2个优点，一是绑定数据库中的color值，可以写入写出，二是可以复用鼠标圈中复制input框内的 值，供其它页面使用。 

            2.在wex5的方法中例用js方法是可行的，在js方法中写wex5的方法会出错。

   5.确定保存：

      baasdata.save(),将数据写入数据库。

相关视频制作完成，上传优酷。教学app制作中。我是邯郸戏曲开发，tel：15175073123,qq:1017945251

 

 

 扫描二维码，看高清教学视频。