开发者社区云原生文章正文

layui框架实战案例(13)：colorpicker颜色选择器的使用

2023-07-23 240

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： layui框架实战案例(13)：colorpicker颜色选择器的使用

colorpicker，是layui自带组件，在实际开发过程中，直接调用即可。

                      <div class="layui-form-item">
                            <label for="temp_border" class="layui-form-label">边框颜色</label>
                            <div class="layui-inline"><input type="text" id="temp_border" name="temp_border" lay-verify="required" class="layui-input" value="#ad0101"></div>
                            <div class="layui-inline"><span id="test1"></span></div>
                            <div class="layui-inline"><span class="x-red">*</span> 单击选择边框颜色</div>
                        </div>

   layui.use(['form', 'upload', 'layer','colorpicker'], function () {
        $ = layui.jquery;
        form = layui.form;
        var layer = layui.layer,upload = layui.upload;
        var colorpicker = layui.colorpicker;
        //初始色值
       colorpicker.render({
            elem: '#test1'
            ,color: temp_border
            ,change: function(color){
                $("#temp_border").val(color);
            }
        });
 });

elem: ‘#test1’，对应容器ID
color: temp_border，默认颜色，格式：#e06161
change，回调函数；

@lockdata.cn

文章标签：

容器