Graent.Hu 的博客

新浪微薄腾讯微薄

最新碎语:最近感觉有些迷茫,怎么办~

您的位置:Graent.Hu 的博客 >素材下载> 一个支持手输的颜色选择控件:jquery.colpick中文使用说明

一个支持手输的颜色选择控件:jquery.colpick中文使用说明

    最近有用到颜色选择的插件,但是试了几个发现不支持手工输入颜色值,这样的话就不是很方便,因为肉眼无法准确的判断哪种颜色是需要的颜色,这就需要直接输入已知需要的颜色值了(这里都是使用的16进制颜色值),所以就找到了jquery.colpick这个插件,看下他的效果的演示:

    QQ截图20161005142644.png

这个插件使用也很简单:

1,引入资源


<script src="js/colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/colpick.css" type="text/css"/>
2,新建元素选择器
<input type="text" id="picker"></input>
3,编写事件脚本
$('#picker').colpick({

	layout:'hex',

	submit:0,

	colorScheme:'dark',

	onChange:function(hsb,hex,rgb,el,bySetColor) {

		$(el).css('border-color','#'+hex);

		// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.

		if(!bySetColor) $(el).val(hex);

	}

}).keyup(function(){

	$(this).colpickSetColor(this.value);

});
4,给html元素增加样式
#picker {
	margin:0;
	padding:0;
	border:0;
	width:70px;
	height:20px;
	border-right:20px solid green;
	line-height:20px;
}

只需简单的几步就可以实现,如果想要更多的配置参数可以参考如下(以下翻译为原创转载注明出处,欢迎指正):
参数   类型 说明
flat boolean 扁平模式只显示颜色选择器,不具有显隐功能会一直显示。当然如果你不希望颜色选择器一直显示,你也可以通过使用 colpickShow() 和 colpickHide() 来自定义显隐功能。默认值: false
layout string 颜色选择器使用布局。可选的值有 'full' (RGB, HEX, HSB 功能区), 'rgbhex' (不含 HSB 功能区) , hex (不含 HSB,  RGB功能区)。默认值: 'full'
submit boolean 如果此值为false,颜色选择器不显示提交或者OK按钮,并且没有颜色预览。如果是false可以使用 onChange 获取选中的颜色值 默认值: true
colorScheme string 颜色选择器的配色方案。 'light' (明色调)或者 'dark'(暗色调) 默认值: 'light'
submitText string 设置submit按钮的文本内容,submit值为true时有效。 默认值: 'OK'
color string or object 颜色选择器初始的默认颜色值。十六进制颜色值 (例. 'ff0000') 或者RGB对象 (例. {r:255, g:0, b:0}) 或者 HSB (例. {h:0, s:100, b:100})。默认值: '11ff00'
showEvent string 显示颜色选择器的事件。 默认值: 'click'
livePreview boolean 如果开启,当在颜色选择器面板上移动鼠标选择颜色时,可以即时预览选择的颜色。 关闭这个功能可以提升控件运行速度。  默认值: true
onBeforeShow function 颜色选择器显示之前触发的回调函数。可以自定义颜色选择器显示之前需要处理的操作,使用需要传入DOM对象。
onShow function 颜色选择器显示时触发的回调函数。可以自定义颜色选择器显示时需要处理的操作,使用需要传入DOM对象。
onHide function 颜色选择器隐藏之时触发的回调函数。可以自定义颜色选择器隐藏的时需要处理的操作,使用需要传入DOM对象。
onChange function 当选定颜色发生改变时触发的回调函数。onChange允许你不通过点击提交按钮来获取选定的颜色值,不管颜色选择面板是否被改变。传入:
  • HSB 对象(例. {h:0, s:100, b:100})
  • 十六进制颜色值 (不以#开头)
  • RGB 对象(例. {r:255, g:0, b:0})
  • el 元素:colorpicker() 调用的父元素。 可以用来更改改变时的当前父元素。
  • bySetColor 标记:如果是true,onChange回调将会被colpickSetColor函数唤起并设置颜色而不是用户直接在颜色选择面板改变颜色值。
onSubmit function 当颜色已经选择完毕,并且按下提交按钮后触发的回调函数。 使用应当传入onChange中指出的参数值。如果 submit:0 那么将不会被触发。

未完待续...

我的微信:graent_hu

欢迎扫码加我和微信好友,有什么问题我们可以一起探讨,有什么需要也随时欢迎发消息给我~

转载请注明出处:

本文标题:一个支持手输的颜色选择控件:jquery.colpick中文使用说明

本文链接:https://www.wlyc.cn/post-48.html

发表评论

路人甲 表情
看不清楚?点图切换

网友评论(4)

很是强大的工具,不过貌似更高级的都用node.js了
唯历史 3年前 (2016-10-08) 回复
@唯历史:厄不是一回事
9ra3nt 3年前 (2016-10-09) 回复
这个好,谢谢分享。
潜水搅拌机 3年前 (2016-10-07) 回复
@潜水搅拌机:还有一部分内容没完成,不过确实感觉很好用
9ra3nt 3年前 (2016-10-07) 回复