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

相关文章
|
JSON 数据格式
layui富文本编辑器文档layedit组件的调用和图片上传接口的使用
layui富文本编辑器文档layedit组件的调用和图片上传接口的使用
863 0
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
1120 0
|
JSON 前端开发 安全
layui框架实战案例(22):多附件上传实战开发实录(php后端、文件删除、数据库删除)
layui框架实战案例(22):多附件上传实战开发实录(php后端、文件删除、数据库删除)
1234 0
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
3376 0
如何使用阿里云 Billing API 实现资源包余量报警
使用Billing API获取资源包余量信息,自主实现资源包余量报警
663 2
|
10月前
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
7442 90
|
JavaScript 前端开发 数据可视化
图像裁剪库Cropper.js的学习使用
图像裁剪库Cropper.js的学习使用
716 111
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
3626 1
|
存储 数据库
layui 富文本layedit编辑、存储和回显
layui 富文本layedit编辑、存储和回显
1381 0
|
安全 搜索推荐 开发者
XYNTService 报错 StartServiceCtrlDispatcher Failed, error code = 1063
【10月更文挑战第7天】XYNTService 报错 StartServiceCtrlDispatcher Failed, error code = 1063
385 6