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

版权声明:本文为博主原创文章,未经博主允许不得转载。 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函数(函数名可改,与上面对应即可):


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

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











展开阅读全文

没有更多推荐了,返回首页