017-color selector

1. In the application scenario of theme customization, color customization is naturally inseparable. What you often need is the intuitive choice about it, so the colorpicker module is long overdue. It supports three types of color modes: hex, rgb, and rgba. After a simple call in the code, you can drag it in your web system freely. Drag to choose your favorite color.

2. Module loading name: colorpicker.

3. Basic parameters

3.1. The colorpicker component currently supports the following parameters:

4. Predefined colors

4.1. The predefined colors can be considered as the reference colors provided, so in addition to our default predefined colors, you can also define your own:

<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. Callback when the color is changed-change

5.1. When the color is selected and changed in the selector, it will enter the change callback, you can use it to perform the required operations:

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

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

6. Callback after color selection-done

6.1. Click the "Confirm" and "Clear" buttons of the color selector, both will trigger the done callback, and the callback will return the currently selected color value:

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

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

7. Examples

7.1. Code

<!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'
			    	,format: 'hex'
			    	,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. Effect picture

Guess you like