推荐一款拾色器插件colorpicker.js

柔光的暖阳◎ 2022-12-22 00:58 170阅读 0赞

需求：点击颜色的input框的时候，会出现拾色器的插件，将自己选择的颜色的色号赋值给input里面，在插件库里面找到了一个UI样式还比较好看的插件，作了一些修改，符合项目需要，分享出来。

![73c1fd75214aa359cae92269493b00e0.png][]

找了一个拾色器插件，将colorpicker.js下载并且引用。

<script src="./colorpicker.js"></script>

下载地址：http://www.jq22.com/jquery-info22179

参考demo：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title>colorpicker</title>
    	<script src="./colorpicker.js"></script>
    	<style>
    	</style>
    </head>
    <body>
    	<div class="abc">
    		<h3>点击下方选择颜色</h3>
    		<input  id="color-picker"></input>
    	</div>
    	<button  type="submit">提交</button>
    </body>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script>
    	new Colorpicker({
    	    el: "color-picker",
    	    color: "#000fff",
    	    change: function(elem, hex) {
    	        console.log(elem, hex)
    			document.getElementById("color-picker").value=hex;
    	    }
    	})
    </script>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[73c1fd75214aa359cae92269493b00e0.png]: /images/20221120/aaad3b85d02e40409053bb9159c1badc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/18900ef92bf64ef79b02cdb969ff2ed6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 IDEA 吐血推荐几款插件

1.CodeMaker ![format_png][] 使用在 Java 类编辑界面右键“Generate”，选择对应模板即可自动生成代码到当前类的包 ![

た入场券/ 2023年02月17日 01:21/ 0 赞/ 105 阅读

相关推荐一款拾色器插件colorpicker.js

需求：点击颜色的input框的时候，会出现拾色器的插件，将自己选择的颜色的色号赋值给input里面，在插件库里面找到了一个UI样式还比较好看的插件，作了一些修改，符合项目需要，

柔光的暖阳◎/ 2022年12月22日 00:58/ 0 赞/ 171 阅读

相关推荐一款神器软件！！！

不知道各位看官有没有遇到这种情况，你有一大堆office/word/pdf文档，你想找到其中一个文档，但是你不知道它叫什么它在哪，只能隐隐约约记得一些大概内容或者关键词，这时候

迷南。/ 2022年11月20日 05:57/ 0 赞/ 298 阅读

相关推荐几款Wordpress摘要插件

Wordpress 的博客设计问题一般可通过两个渠道进行解决： 1.修改主题模板文件 2.利用相应的插件文章摘要对于快速准确的让读者了解文章内

左手的ㄟ右手/ 2022年08月03日 08:15/ 0 赞/ 357 阅读

相关 JavaScript HSL拾色器

HSL 和 HSV 在数学上定义为在 RGB 空间中的颜色的 R, G 和 B 的坐标的变换。从 RGB 到 HSL 或 HSV 的转换设 (r, g, b)

我就是我/ 2022年07月11日 04:58/ 0 赞/ 217 阅读

相关推荐一款Mybatis分页插件

推荐一款Mybatis分页插件以前也写过一篇博文介绍Mybatis的插件，以及如何通过Mybatis的插件功能实现一个自定义的分页插件，但是那个插件的侵入性是比较大的。

绝地灬酷狼/ 2022年06月15日 10:12/ 0 赞/ 270 阅读

相关图片拾色器

如果要获取这张图片的所有颜色：[https://segmentfault.com/a/1190000009345753][https_segmentfault.com_a_11

我会带着你远行/ 2022年06月03日 05:16/ 0 赞/ 231 阅读

相关推荐idea几款优秀插件

Lombok plugin [https://github.com/mplushnikov/lombok-intellij-plugin][https_github.com

痛定思痛。/ 2022年04月04日 15:39/ 0 赞/ 352 阅读

相关推荐一款 chrome SSH 插件－ Secure Shell

http://blog.csdn.net/jizhongchun/article/details/8519413 导读：我就是一个Chrome Fans。最近发现一款goog

迈不过友情╰/ 2021年12月17日 14:57/ 0 赞/ 406 阅读

相关 HTML input color 拾色器

< input> 标签 type 属性值设置为 "color" 即可创建一个拾色器。拾色器控件是 HTML5 新增。

小灰灰/ 2020年05月16日 16:40/ 0 赞/ 691 阅读