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

相关文章
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
76 0
|
容器
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
238 0
|
2月前
|
Web App开发 JavaScript iOS开发
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
28 0
|
8月前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
86 0
|
容器
Echarts实战案例代码(50):tooltip组件提示框被div折叠的解决方案
Echarts实战案例代码(50):tooltip组件提示框被div折叠的解决方案
189 0
Echarts实战案例代码(32):layui模态框弹出框展现echarts不显示的问题
Echarts实战案例代码(32):layui模态框弹出框展现echarts不显示的问题
150 0
|
前端开发
CSS实战笔记(一) 悬停效果
CSS实战笔记(一) 悬停效果
90 0
|
前端开发
CSS如何实现毛玻璃效果
写在前面 之前在逛一些网站的时候,就经常看见一些图片背景模糊的效果,这样的效果可以使得用户将更多的注意力放在清晰的地方上,可以不经意间引导用户。 我就很好奇,这样的一种效果是怎么实现的。恰好这几天周末,顺便弥补一下我拙劣的css知识。 通过查找一些资料,我发现这样的效果大致可以使用两种方法来实现:
|
JavaScript 前端开发 API
easyui布局——【入门】
easyui布局——【入门】
easyui布局——【入门】
|
前端开发 容器
CSS水平垂直居中布局方案概述
在前端开发中,通过CSS实现布局容器的居中,也有诸多方法方式,当然也是CSS面试题中的经典面试题,在本文章中会系统的分析综述 通过 Flexbox 布局模块 与 CSS Grid布局模 实现容器的居中效果
CSS水平垂直居中布局方案概述