cxColor 是一款颜色选择器。这样的插件使用场景不多。可喜的这是国人写的。
官方网站: https://github.com/ciaoca/cxColor
使用方法:
1、引入jquery库
1
|
|
2、引入cxColor的css和js
1
2
|
< link rel = "stylesheet" href = "css/jquery.cxcolor.css" > < script src = "js/jquery.cxcolor.min.js" ></ script > |
3、创建cxColor颜色选择器
官方网站demo是使用input组件,官方网站没说明,在些特别提醒下。
添加input组件
1
|
< input id = "color_a" name = "mycolor" type = "text" class = "input_cxcolor" readonly> |
再使用cxColor()构造函数创建cxColor实例
1
|
$( '#color_a' ).cxColor(); |
还有更高级的用法,如在创建实例时设置默认颜色。参考官方源码 https://github.com/ciaoca/cxColor
<!DOCTYPE html5> <html> <head> <title>颜色选择器</title> <meta charset="UTF-8" /> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="css/jquery.cxcolor.css"> <script src="js/jquery.cxcolor.min.js"></script> <style type="text/css"> </style> </head> <body> <input id="color_a" name="mycolor" type="text" class="input_cxcolor" readonly> <script> $('#color_a').cxColor(); </script> </body> </html>