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

简介: 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

相关文章
|
容器
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
221 0
|
1月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
95 0
|
前端开发 JavaScript 数据库
layui框架实战案例(12):layui标签输入框inputTag
layui框架实战案例(12):layui标签输入框inputTag
772 0
layui框架实战案例(12):layui标签输入框inputTag
|
前端开发 容器
layui框架实战案例(22):layui-tab-title的宽度自适应的解决方案
layui框架实战案例(22):layui-tab-title的宽度自适应的解决方案
448 0
|
容器
Echarts实战案例代码(50):tooltip组件提示框被div折叠的解决方案
Echarts实战案例代码(50):tooltip组件提示框被div折叠的解决方案
177 0
Echarts实战案例代码(32):layui模态框弹出框展现echarts不显示的问题
Echarts实战案例代码(32):layui模态框弹出框展现echarts不显示的问题
142 0
|
JavaScript 前端开发
如何使用 layui 的日期选择器组件?底层原理是什么?
如何使用 layui 的日期选择器组件?底层原理是什么?
364 0
|
JavaScript 前端开发 安全
轮播图swiper框架的基本使用
轮播图swiper框架的基本使用
272 2
轮播图swiper框架的基本使用
|
JavaScript 前端开发 数据安全/隐私保护
CSS实现一个『简约高级』的输入框
一个商务简约的登陆界面 前几天在逛codepen的时候,发现了一个很有意思的登陆界面,于是就想着自己实现一下,于是就有了这个demo。 顺便将接下来网站的登陆界面也改成这个样式了。
|
前端开发
CSS实战笔记(六) 无缝轮播图
CSS实战笔记(六) 无缝轮播图
67 0
下一篇
无影云桌面