搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

颜色选择器文档 - layui.colorpicker

在主题定制的应用场景中,自然离不开颜色的自定义。而你往往需要的是关于它的直观选择,于是 colorpicker 模块姗姗来迟,它支持 hex、rgb、rgba 三类色彩模式,在代码中简单的调用后,便可在你的网页系统中自由拖拽去选择你中意的颜色。
模块加载名称:colorpicker

注意:colorpicker 为 layui 2.4.0 新增模块,不支持 ie10 以下版本,其它高级浏览器均支持。

使用

colorpicker 是一款颜色选择器,如下是一个最基本的用法:

小例子code

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>颜色选择器</title>
  6. <link rel="stylesheet" href="../src/css/layui.css">
  7. </head>
  8. <body>
  9. <div id="test1"></div>
  10. <script src="../src/layui.js"></script>
  11. <script>
  12. layui.use('colorpicker', function(){
  13. var colorpicker = layui.colorpicker;
  14. //渲染
  15. colorpicker.render({
  16. elem: '#test1' //绑定元素
  17. });
  18. });
  19. </script>
  20. </body>
  21. </html>
基础参数

colorpicker 组件目前支持以下参数

参数选项 说明 类型 默认值
elem 指向容器选择器 string/object -
color 默认颜色,不管你是使用 hex、rgb 还是 rgba 的格式输入,最终会以指定的格式显示。 string -
format 颜色显示/输入格式,可选值: hexrgb
若在 rgb 格式下开启了透明度,格式会自动变成 rgba。在没有输入颜色的前提下,组件会默认为 #000 也就是黑色。
string hex(即 16 进制色值)
alpha 是否开启透明度,若不开启,则不会显示透明框。开启了透明度选项时,当你的默认颜色为 hex 或 rgb 格式,组件会默认加上值为 1 的透明度。相同的,当你没有开启透明度,却以 rgba 格式设置默认颜色时,组件会默认没有透明度。
注意:该参数必须配合 rgba 颜色值使用
boolean false
predefine 预定义颜色是否开启 boolean false
colors 预定义颜色,此参数需配合 predefine: true 使用。 Array 此处列举一部分:['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)']
size 下拉框大小,可以选择:lg、sm、xs。 string -
预定义颜色

预定义颜色,可以被认为是提供的参考色,因此除了我们默认的预定义颜色之外,你还可以自己定义

小例子code

  1. layui.use('colorpicker', function(){
  2. var colorpicker = layui.colorpicker;、
  3. colorpicker.render({
  4. elem: '#test1'
  5. ,predefine: true
  6. ,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
  7. });
  8. });
颜色被改变的回调

回调名:change
当颜色在选择器中发生选择改变时,会进入 change 回调,你可以通过它来进行所需操作,下面的例子就是实时的输出当前选择器的颜色

小例子code

  1. layui.use('colorpicker', function(){
  2. var colorpicker = layui.colorpicker;
  3. colorpicker.render({
  4. elem: '#test1'
  5. ,change: function(color){
  6. console.log(color)
  7. }
  8. });
  9. });
颜色选择后的回调

回调名:done
点击颜色选择器的“确认”和“清除”按钮,均会触发 done 回调,回调返回当前选择的色值。

小例子code

  1. layui.use('colorpicker', function(){
  2. var colorpicker = layui.colorpicker;
  3. colorpicker.render({
  4. elem: '#test1'
  5. ,done: function(color){
  6. console.log(color)
  7. //譬如你可以在回调中把得到的 color 赋值给表单
  8. }
  9. });
  10. });
结语

颜色选择器不仅仅是独立使用,它更多情况可能是跟表单结合使用。

layui - 在每一个细节中,用心与你沟通