一个轻量级的RGB颜色选择器--jscolor

官方网站：http://www.jscolor.com/ 点击打开链接

之前在网上找了一下，没有找到详细的文档，只是讲了基本的使用方法，自己稍微研究了一下，再总结下吧。

首先在官网下载文件，http://jscolor.com/release/latest.zip ，解压后引入，只需一个js文件，不到60kb。(下面的代码我引入了jquery)

创建一个选择框

<input id="foo" class="jscolor {onFineChange:'update(this)'}" value="fff" >

value值是默认的RGB颜色，不带 ' # ' ，点击后颜色选择器会出现在这个input下面。

{onFineChange : 'update(this)'} 这句是鼠标在选择器面板上移动时执行update这个函数，this参数必须传入

在js里创建update函数(函数名可改，与上面对应即可)：

function update(jscolor) {$('body').css('background-color',('#' + jscolor));console.log(jscolor)
}

接收的参数保存了颜色和其他一些信息

其中jscolor.valueElement是当前点击的input，其他的信息可在控制台里查看打印出的jscolor

效果图：

其他的效果可以去jscolor官网，有一些很简洁明了的demo

默认是点击上面的input显示和隐藏选择器，也可以在其他按钮上绑定事件来控制他的显示和隐藏(默认点击选择器之外的地方，选择器都会自动隐藏)

$('.jscolor')[0].jscolor.show(); //执行此句，选择器将显示，hide则为隐藏

在我的项目中，有这样的需求：点击按钮会创建出一个div，每个div上有一个菜单，点击可以修改这个div的文字颜色，下面附上我的解决办法

首先页面上还是只有一个input和一个update函数，即只使用一个选择器，在update里判断需要修改哪一个div的文字颜色。

创建input时让他display：none 设定点击按钮后才出现。

创建一个全局的变量 var target = null；

update函数：

function update(jscolor) {$target.css('color',('#' + jscolor));$('input').css('display','block');
}

给每个div上的按钮绑定事件，点击的时候，修改target的值为当前div，同时还要做一个处理，点击了按钮后保证input框和颜色选择器在按钮的正下方，这样才符合用户体验

      $('.btn').on('click',function(e){var thisLeft = $(this).offset().left;  var thisTop = $(this).offset().top;  //获取当前按钮的位置$("input").show();  //input显示出来$('.jscolor')[0].jscolor.show();  //颜色选择器显示$('input').css('left',thisLeft);$('input').css('top',(thisTop+20));  //使input的位置在按钮的正下方$('body>div').last().css('left',thisLeft); //只能用这种方法将调色板选出来$('body>div').last().css('top',(thisTop+42))$target = $(this).nextSibling();//选出当前需要修改的divcancelBubble(e) });

在控制台查看dom，自动创建出的颜色选择器上只有style属性，查看了源码是将颜色选择器append到body的最下面，所以就用$('body>div').last()来将这个选择器选出来，暂时没有找到更高效的选择方法，或许以后再仔细看下源码，在源码里给选择器加上class可以方便些。

最后在document上绑定事件点击时隐藏input即可实现最终效果。

一个轻量级的RGB颜色选择器--jscolor相关推荐

使用HTML5技术开发的超酷颜色选择器
日期:2012-10-23 来源:GBin1.com 在线演示本地下载可能大家见过很多使用jquery/js开发的颜色选择器,今天这里我们将使用HTML5技术来自己实现一个更棒的颜色选择器.希 ...
macos - mac os-x 上的颜色选择器选择了错误的颜色
我们的设计师给了我一个颜色值: RGB 217,114,62 在 mac 图像预览中,我打开颜色选择器,切换到 rgb 并输入 rgb 值.但是颜色预览好像太暗了.所以我拿起颜色选择器并在预览窗口中选 ...
LeetCode 800. 相似 RGB 颜色
文章目录 1. 题目 2. 解题 2.1 暴力枚举 2.2 独立枚举 1. 题目 RGB 颜色用十六进制来表示的话,每个大写字母都代表了某个从 0 到 f 的 16 进制数. RGB 颜色 " ...
html简易颜色选择器,HTML颜色选择器实现代码
HTML颜色选择器实现代码 HTML颜色选择器范围:#000 - #FFF // '); } document.writeln(' '); var begin = 0; for (var i = ...
【canvas系列】用canvas实现一个colorpicker（类似PS的颜色选择器）
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...
RGB、HSL、HSV及各种颜色选择器界面
你知道吗?原来颜色是种四维产物. 色彩体系模型我们知道,在描述一个颜色时,往往需要4个变量,其中三个变量代表颜色,最后一个变量代表透明度. 以目前应用最广泛的孟塞尔色体为例,横切面展示了色相的变化. ...
QT QColor颜色选择器并获取rgb值
QColorDialog color;//调出颜色选择器对话框QColor c = color.getRgba(); //c.red(), c.green(), c.blue()是分别对应的rgb值 ...
ESP32 / ESP8266 RGB LED灯带配颜色选择器Web服务器
在本项目中,我们将向您展示如何使用带有颜色选择器的网络服务器通过ESP8266或ESP32板远程控制RGB LED灯条.我们将控制5V RGB LED灯带,并且代码将用Arduino IDE编写. 在 ...
基于opencv做一个HSV的颜色选择器
From sztu 自动化专业的小菜鸡. 本篇将介绍计算机视觉的HSV颜色选择器,基于python的opencv. 众所周知,每个物体的HSV值都是不同的,并且每个色系所在的HSV的颜色范围也都不同, ...

一个轻量级的RGB颜色选择器--jscolor

一个轻量级的RGB颜色选择器--jscolor相关推荐

最新文章

热门文章