017-颜色选择器

最新推荐文章于 2022-12-18 15:34:41 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-12-18 15:34:41 发布

阅读量267

点赞数

分类专栏： layui学习文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/aihiao/article/details/113039206

版权

layui学习专栏收录该内容

32 篇文章 1 订阅

订阅专栏

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

2. 模块加载名称：colorpicker。

3. 基础参数

3.1. colorpicker组件目前支持以下参数:

4. 预定义颜色

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

<script type="text/javascript">
	layui.use(['colorpicker'], function() {
		var colorpicker = layui.colorpicker;

		// 渲染
	  	colorpicker.render({
	    	elem: '#test1'  // 绑定元素
		    ,predefine: true
			,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
	  	});
	});              
</script>

5. 颜色被改变的回调 - change

5.1. 当颜色在选择器中发生选择改变时, 会进入change回调, 你可以通过它来进行所需操作:

<script type="text/javascript">
	layui.use(['colorpicker'], function() {
		var colorpicker = layui.colorpicker;

		//渲染
	  	colorpicker.render({
	    	elem: '#test1'  //绑定元素
		    ,change: function(color){
				console.log(color)
			}
	  	});
	});              
</script>

6. 颜色选择后的回调 - done

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

<script type="text/javascript">
	layui.use(['colorpicker'], function() {
		var colorpicker = layui.colorpicker;

		//渲染
	  	colorpicker.render({
	    	elem: '#test1'  //绑定元素
		    ,done: function(color){
				console.log(color)
			}
	  	});
	});              
</script>

7. 例子

7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>颜色选择器 - layui</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<div id="test1"></div>

		<script type="text/javascript">
			layui.use(['colorpicker'], function() {
  				var colorpicker = layui.colorpicker;
  
				//渲染
			  	colorpicker.render({
			    	elem: '#test1'  //绑定元素
			    	,size: 'lg'
			    	,color: '#F00'
			    	,format: 'rgb'
			    	,alpha: true
		    	    ,predefine: true
    				,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
				    ,change: function(color){
      					console.log(color)
    				}
				    ,done: function(color){
      					console.log(color)
    				}
			  	});
			});              
		</script>
	</body>
</html>

7.2. 效果图