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拉伸变形无法正常显示的解决方案
255 0
|
4月前
|
前端开发 UED
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
130 1
|
7月前
|
开发框架 JavaScript 前端开发
循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示
循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示
|
9月前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
93 0
|
9月前
|
JSON JavaScript 数据格式
【经验分享】如何使用scroll-view + swiper制作tabs导航条组件。
【经验分享】如何使用scroll-view + swiper制作tabs导航条组件。
98 6
|
前端开发 JavaScript 数据库
layui框架实战案例(12):layui标签输入框inputTag
layui框架实战案例(12):layui标签输入框inputTag
876 0
|
前端开发 容器
layui框架实战案例(22):layui-tab-title的宽度自适应的解决方案
layui框架实战案例(22):layui-tab-title的宽度自适应的解决方案
531 0
|
容器
Echarts实战案例代码(50):tooltip组件提示框被div折叠的解决方案
Echarts实战案例代码(50):tooltip组件提示框被div折叠的解决方案
197 0
Echarts实战案例代码(32):layui模态框弹出框展现echarts不显示的问题
Echarts实战案例代码(32):layui模态框弹出框展现echarts不显示的问题
161 0
|
JavaScript 前端开发
如何使用 layui 的日期选择器组件?底层原理是什么?
如何使用 layui 的日期选择器组件?底层原理是什么?
396 0

热门文章

最新文章