layui框架学习（22：颜色选择器模块）

最新推荐文章于 2023-07-10 14:48:58 发布

gc_2299

最新推荐文章于 2023-07-10 14:48:58 发布

阅读量974

点赞数

分类专栏：网页编程文章标签： layui 颜色选择器 colorpicker

本文链接：https://blog.csdn.net/gc_2299/article/details/129887191

版权

网页编程专栏收录该内容

149 篇文章 11 订阅

订阅专栏

layui.colorpicker用于颜色选择，基本用法是绑定容器并调用render函数。参数包括color（默认颜色）、format（颜色格式，默认hex）、alpha（是否启用透明度）和predefine（预定义颜色）。回调事件有change（颜色切换时触发）和done（确认或清除时触发）。

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

layui中的颜色选择器模块layui.colorpicker主要用于颜色选择，其基本用法与评分模块类似，也是指定颜色选择功能所在的容器，然后调用colorpicker.render函数渲染，同时在函数中使用基础参数配置颜色选择器的样式及功能。colorpicker模块的基本用法及效果如下所示：
在这里插入图片描述

	<fieldset class="layui-elem-field" style="width: 610px;">
	  <legend>颜色选择示例</legend>
	  <div class="layui-field-box" id="test">
		  <label for="#colorvalue">当前选中颜色：</label><span id="colorvalue">未选中任何颜色</span>
		  <div id="selectcolor"></div>	  
	  </div>
	</fieldset>
	<div id="test1"></div>
	<script src="../src/layui.js"></script>
	<script>
		layui.use('colorpicker', function(){
		  var colorpicker = layui.colorpicker;
		  var $ = layui.$
		  //渲染
		  colorpicker.render({
		    elem: '#selectcolor' ,
			done: function(color){
			      $('#colorvalue').text(color);
			    }
		  });
		});
</script>

基础参数color设置默认颜色，也即弹出颜色选择窗口时的默认选择颜色。
基础参数format设置颜色的格式，其值包括hex、rgb（支持透明度时为rgba），默认为hex格式，这两种格式的区别如下：
在这里插入图片描述

	layui.use('colorpicker', function(){
	  var colorpicker = layui.colorpicker;
	  var $ = layui.$
	  //渲染
	  colorpicker.render({
	    elem: '#selectcolor' ,//绑定元素
		format:'rgb',
		done: function(color){
		      $('#colorvalue').text(color);
		    }
	  });
	});

基础参数alpha设置是否启用透明度，默认为false，不启用透明度。启用时的效果如下所示：
在这里插入图片描述

	layui.use('colorpicker', function(){
	  var colorpicker = layui.colorpicker;
	  var $ = layui.$
	  //渲染
	  colorpicker.render({
	    elem: '#selectcolor' ,//绑定元素
		format:'rgb',
		alpha:true,
		done: function(color){
		      $('#colorvalue').text(color);
		    }
	  });
	});

基础参数predefine和colors设置预定义颜色，predefine控制是否启用预定义颜色，默认为false，不启用，为true时，则需在colors参数中设置一组预定义颜色值，颜色格式不需要与format参数匹配。启用时的效果如下所示（示例中的预定义颜色取自参考文献3）：
在这里插入图片描述

	layui.use('colorpicker', function(){
	  var colorpicker = layui.colorpicker;
	  var $ = layui.$
	  //渲染
	  colorpicker.render({
	    elem: '#selectcolor' ,//绑定元素
		format:'rgb',
		predefine: true, // 开启预定义颜色
		colors: ['#ff8c00','#00ced1','#9d8a0e'], //自定义预定义颜色项
		done: function(color){
		      $('#colorvalue').text(color);
		    }
	  });
	});