一个轻量级的RGB颜色选择器--jscolor
来源:互联网 发布:淘宝优衣库代购靠谱吗 编辑:程序博客网 时间:2024/06/08 10:23
官方网站: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
- 轻量级 js取色器 JSColor
- 收录一个RGB颜色转化的库
- jscolor
- 一个轻量级jQuery的日期选择器日历 glDatePicker
- jPicker - 一个jQuery的颜色选择器插件
- 颜色的RGB值
- 颜色的RGB值
- 颜色的RGB
- 颜色的RGB值
- 颜色代码查询,在线颜色选择器,RGB颜色对照表
- 网上找的一个不错的html颜色选择器
- QT QColor颜色选择器并获取rgb值
- 分享一个android颜色选择器的使用教程
- 推荐一个Android颜色选择器的库colorpicker
- 一些颜色的RGB值
- 得到颜色的RGB值
- 常用的RGB颜色表
- 利用forenose前嗅数据采集器爬取网页数据
- spring mvc 常用注解
- 装箱拆箱
- 对Akka Future的理解(一)
- 微信支付 h5 支付
- 一个轻量级的RGB颜色选择器--jscolor
- 程序员如何跳级
- html中div如何水平和垂直居中的几种css方法代码
- Hibernate的工作原理
- 深度学习
- 断点续传
- java错题mark_5
- 【bzoj3306】树
- 一个很好的学习网站