从品牌网站建设到网络营销策划,从策略到执行的一站式服务
本篇文章为大家展示了jQuery的颜色拾取器是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
颜色拾取器(又名取色板)是为了方便用户在一些需要使用颜色的WEB应用中直观的选择所需的颜色,如论坛发帖时使用的编辑器中就应用到了颜色拾取器。小编将给大家介绍一款非常好用的基于jQuery的颜色拾取器,它可以轻松便捷的应用到你的项目中去。
这款颜色拾取器的名称叫bigcolorpicker,使用这款颜色拾取器,可以通过点击页面中的目标元素,直接获取颜色值,方便快捷。
页面中首先在head中需要引入jquery库和bigcolorpicker插件,以及所需的样式jquery.bigcolorpicker.css。
接着,我们直接在body中放置一个用于触发接收颜色值的input输入框。
或者也可以直接放置一个html元素或者按钮。
我们还可以获取多个颜色,自定义颜色小格子的个数,具体请参照demo。
调用bigcolorpicker插件非常简单,直接使用$(element).bigColorpicker(callback,engine,sideLength); 其中callback为回调函数,它可以把选择的颜色设置到绑bigColorpicker的元素的上,也可以自定义函数。engine可以为空,P、L,使用默认P,P代表着拾取器的背景是一张图片,而L则代表着拾取器的小格子是由一个个的li组成。sideLength参数是指小格子的个数,只有engine为L时生效,范围:2-10,默认为6。
$(function(){//点击输入框选取颜色$("#c1").bigColorpicker("c1"); //点击选色按钮选取颜色$("#btn").bigColorpicker("c2"); //点击方框选取颜色$("#img").bigColorpicker(function(el,color){$(el).css("background-color",color);}); //选取多个颜色$(".ku").bigColorpicker(function(el,color){$(el).css("background-color",color);}); //自定义颜色块个数$("#c5").bigColorpicker("c5","L",3);});
当要在可以移动的弹出层上操作颜色拾取器时,可以通过以下方法实现。
1、拖拽开始时自动隐藏取色板(以下代码需要写在拖拽的开始时)
$(element).bigColorpickerHide();
2、拖拽时取色板的位置随浮层一起移动(以下代码需要写在拖拽的进行时)
$(element).bigColorpickerMove();
关于bigcolorpicker颜色拾取器的更多信息您也可以参照bigcolorpicker项目地址:http://code.google.com/p/jquery-bigui/wiki/bigcolorpicker
上述内容就是jQuery的颜色拾取器是怎样的,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图