jQuery颜色选取器插件COLPICK
2016-08-29 18:16
495 查看
插件官网:http://www.jq22.com/jquery-info367
下载该插件和 colpick.js 和 colpick.css 添加到您的文档的头:
现在你可能会在任何 jQuery 对象来创建一个颜色选取器上调用colpick方法。默认情况下您获取下拉列表颜色选择器:
html
js
html
JS
All the available options are:
onSubmit and onChange callbacks.
例子:
$(function(){
$('#picker01').colpick({flat:true});
$('#picker02').colpick({flat:true,colorScheme:'dark'});
$('#picker1').colpick();
$('#picker2').colpick({
flat:true,
layout:'hex',
submit:0
});
$('#picker3').colpick({
layout:'hex',
colorScheme:'dark',
submit:0,
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);
});
$('.ex-color-box').colpick({
colorScheme:'dark',
layout:'rgbhex',
color:'ff8800',
livePreview:0,
onSubmit:function(hsb,hex,rgb,el) {
$(el).css('background-color', '#'+hex);
$(el).colpickHide();
}
}).css('background-color', '#ff8800');
});
下载该插件和 colpick.js 和 colpick.css 添加到您的文档的头:
<script src="js/colpick.js" type="text/javascript"></script> <link rel="stylesheet" href="css/colpick.css" type="text/css"/>
现在你可能会在任何 jQuery 对象来创建一个颜色选取器上调用colpick方法。默认情况下您获取下拉列表颜色选择器:
html
<button id="picker">Show Color Picker</button>
js
$('#picker').colpick();
选项
传递给 colpick 函数作为对象的几个选项允许您自定义颜色选择器。例如,传递flat:true使颜色选取器总是可见的如下面的示例。html
<div id="picker"></div>
JS
$('#picker').colpick({ flat:true, layout:'hex', submit:0 });
All the available options are:
Option | Type | Description |
---|---|---|
flat | boolean | Flat mode just displays the color picker in place, always visible, with no show/hide behavior. Use it with colpickShow() and colpickHide() to define your own show/hide behavior or if you want the picker to be always visible. Default: false |
layout | string | Name of the color picker layout to use. Posible values are 'full' (RGB, HEX, and HSB fields), 'rgbhex' (no HSB fields) and hex (no HSB, no RGB). You can see the full layout at the top of the page. rgbhex and hex layouts are shown in the examples below. Default: 'full' |
submit | boolean | If false the picker has no submit or OK button and no previous color viewer. If false use onChange function to get the picked color. Default: true |
colorScheme | string | The color scheme to use for the picker, 'light' or 'dark'. Default: 'light' |
submitText | string | The text to show on the submit button if active. Default: 'OK' |
color | string or object | Default color. Hex string (eg. 'ff0000') or object for RGB (eg. {r:255, g:0, b:0}) and HSB (eg. {h:0, s:100, b:100}). Default: '11ff00' |
showEvent | string | Event that shows the color picker. Default: 'click' |
livePreview | boolean | If true color values change live while the user moves a selector or types in a field. Turn it off to improve speed. Default: true |
onBeforeShow | function | Callback function triggered before the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object. |
onShow | function | Callback function triggered when the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object. |
onHide | function | Callback function triggered when the color picker is hidden. Use it to define custom behavior. Should receive a colorpicker DOM object. |
onChange | function | Callback function triggered when the color is changed. This is the function that allows you to get the color picked by the user whenever it changes, whithout the user pressing the OK button. Should receive: HSB object (eg. {h:0, s:100, b:100}) HEX string (with no #) RGB object(eg. {r:255, g:0, b:0}) el element, the parent element on which colorpicker() was called. Use it to modify this parent element on change (see first example below). bySetColor flag: if true, the onChange callback was fired by the colpickSetColor function and not by the user changing the color directly in the picker. There are some cases in which you'll want a different behaviour in this case (see last example). |
onSubmit | function | Callback function triggered when the color is chosen by the user, using the OK button. Should receive exactly the same as onChange. It's never fired if usingsubmit:0option. |
jQuery.fn Functions
These functions are the color picker's interface. Use them to control the color picker externally, but not to get color values. To retrieve color values from the picker use theonSubmit and onChange callbacks.
Function | Description |
---|---|
colpick(options) | The main function used to create a color picker. |
colpickHide() | Hides de color picker. Accepts no arguments. Use it to hide the picker with an external trigger. |
colpickShow() | Shows the color picker. Accepts no arguments. Use it to show the picker with an external trigger. |
colpickSetColor(col,setCurrent) | Use it to set the picker color. The onChange callback is fired with bySetColor set to true. Parameters: col: a hex string (eg. 'd78b5a') or object for RGB (eg. {r:255, g:0, b:0}) and HSB (eg. {h:150, s:50, b:50}) setCurrent: If true the color picker's current color (the one to the right in layouts with submit button) is set in addition to the new color, which is always set. |
jQuery Functions
The following functions are used internally by the color picker. However, they may also be required as utility functions by your application. They are made available as jQuery functions:Function | Description |
---|---|
$.colpick.rgbToHex(rgb) | Receives an object like {r:255, g:0, b:0} and returns the corresponding HEX string (with no #). |
$.colpick.rgbToHsb(rgb) | Receives an object like {r:255, g:0, b:0} and returns the corresponding HSB object (eg. {h:0, s:100, b:100}). HSB values are not rounded. H is in the [0,360] range, while S and B are in the [0,100] range. |
$.colpick.hsbToHex(hsb) | Receives an object like {h:0, s:100, b:100} and returns the corresponding HEX string (with no #). |
$.colpick.hsbToRgb(hsb) | Receives an object like {h:0, s:100, b:100} and returns the corresponding RGB object (eg. {r:255, g:0, b:0}). RGB values are whole numbers in the [0,255] range. |
$.colpick.hexToHsb(hex) | Receives a hex string with no # and returns the corresponding HSB object (eg. {h:0, s:100, b:100}). HSB values are not rounded. H is in the [0,360] range, while S and B are in the [0,100] range. |
$.colpick.hexToRgb(hex) | Receives a hex string with no # and returns the corresponding RGB object (eg. {r:255, g:0, b:0}). RGB values are whole numbers in the [0,255] range. |
$(function(){
$('#picker01').colpick({flat:true});
$('#picker02').colpick({flat:true,colorScheme:'dark'});
$('#picker1').colpick();
$('#picker2').colpick({
flat:true,
layout:'hex',
submit:0
});
$('#picker3').colpick({
layout:'hex',
colorScheme:'dark',
submit:0,
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);
});
$('.ex-color-box').colpick({
colorScheme:'dark',
layout:'rgbhex',
color:'ff8800',
livePreview:0,
onSubmit:function(hsb,hex,rgb,el) {
$(el).css('background-color', '#'+hex);
$(el).colpickHide();
}
}).css('background-color', '#ff8800');
});
相关文章推荐
- 使用jquery-qrcode生成二维码
- jQuery前端插件以及图片延迟加载
- jquery分页插件pagination 的运用
- jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
- 文章字号调整
- jquery 中 $.map 的使用方法
- jquery操作select(取值,设置选中)
- 快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
- jquery $post $get $
- jquery 让指定导航隐藏
- JQuery选择器知识点归纳(持续更新)
- jquery+ajax+php实现搜索功能
- jQuery选择器
- jquery向HTML中添加代码
- JQuery性能优化
- jQurey 中$.on和$.bind的差别
- jquery值ajaxForm
- jQuery Validate验证框架与 jQuery ajaxSubmit的联合使用
- jQuery获得元素位置offset()和position()的区别
- jquery 插入节点的方法