fastadmin后台加入颜色选择器

最新推荐文章于 2024-07-09 15:47:50 发布

ljd914040633

最新推荐文章于 2024-07-09 15:47:50 发布

阅读量2.4k

点赞数

分类专栏： js 文章标签：大数据

原文链接：https://ask.fastadmin.net/question/32944.html

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该博客介绍了如何在网页中使用layui框架集成颜色选择器功能。通过将layui的colorpicker模块引入，设置js和css文件，然后在html中配置元素，实现了表单颜色输入框的选色并实时显示选定颜色。提供了详细的代码示例和最终效果展示。

摘要由CSDN通过智能技术生成

是转载别人的，入过那位看见是自己的内容不想被转载，请留言告诉我，我会删除

1 在这个目录放入 layui

2 js 部分

3 css

4 相关引入

5 对应js

            layui.use('colorpicker', function() {
                var $ = layui.$
                    , colorpicker = layui.colorpicker;

                //表单赋值
                colorpicker.render({
                    elem: '#test-form'
                    , color: '#1c97f5'
                    , done: function (color) {
                        $('#test-form-input').val(color);
                    }
                });
            });
                    Controller.api.bindevent();
        },

6 html

        <label class="control-label col-xs-12 col-sm-2">{:__('Category_ids')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-form-input">
            </div>
            <div class="layui-inline" style="left: -11px;">
                <div id="test-form"></div>
            </div>
        </div>
    </div>

7 效果