欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

一个轻量级的RGB颜色选择器--jscolor 选取颜色 color 有大用 有大大用

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


版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/huangxin112/article/details/74908695

官方网站: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函数(函数名可改,与上面对应即可):



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



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

其中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函数:


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



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


  1. $('.btn').on('click',function(e){
  2.    

  3.     var thisLeft = $(this).offset().left;
  4.     var thisTop = $(this).offset().top;  //获取当前按钮的位置
  5. $("input").show();  //input显示出来
  6. $('.jscolor')[0].jscolor.show();  //颜色选择器显示
  7. $('input').css('left',thisLeft);
  8. $('input').css('top',(thisTop+20));  //使input的位置在按钮的正下方
  9. $('body>div').last().css('left',thisLeft); //只能用这种方法将调色板选出来
  10. $('body>div').last().css('top',(thisTop+42))

  11. $target = $(this).nextSibling();//选出当前需要修改的div
  12. cancelBubble(e)
  13. });
在控制台查看dom,自动创建出的颜色选择器上只有style属性,查看了源码是将颜色选择器append到body的最下面,所以就用$('body>div').last()来将这个选择器选出来,暂时没有找到更高效的选择方法,或许以后再仔细看下源码,在源码里给选择器加上class可以方便些。


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





来自  https://blog.csdn.net/huangxin112/article/details/74908695

普通分类: