网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款jQuery拾色器插件,模仿PhotoshopRGB/HEX/HSB/HSL颜色选择器,响应迅速、跨浏览器、支持触摸。
1. 在html页面尾部加载JQuery库和拾色器插件文件。
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="colpick-remix/colpickRmx.js"></script>
2.加载拾色器样式文件。
<link href="wcolpick.css" rel="stylesheet" type="text/css">
3.在网页上创建内联颜色选择器。
<div id="example1"></div>
$('#example1').loads();
4.将颜色选择器附加到文本字段。
<input type="text" id="example2" readonly></input>
$('#example2').loads({
onSubmit: function(ev) {
$(ev.el).css('border-color', '#' + ev.hex);
$(ev.el).val("#" + ev.hex);
$(ev.el).hides();
},
onHide: function(ev) {
var color = $(ev.el).getColor("hex", true);
$(ev.el).setColor(color, false);
}
});
5. 指定一个颜色选择器。
<button id="example3"></button>
$('#example3').loads({
flat: false,
enableAlpha: false,
layout: 'rgbhex',
compactLayout: true,
color: 'c9264a',
onLoaded: function(ev) {
var hex = $(ev.el).getColor("hex", true);
$(ev.el).css('background-color', '#' + hex);
},
onHide: function(ev) {
var hex = $(ev.el).getColor("hex", true);
$(ev.el).css('background-color', '#' + hex);
$(ev.el).setColor(hex, false);
},
onChange: function(ev) {
$(ev.el).css('background-color', '#' + ev.hex);
},
onSubmit: function(ev) {
$(ev.el).hides();
}
});
6. 颜色选择器插件默认配置项。
$('#element').newColpick({
alphaOutline: true,
appendToBody: false,
arrowsColor: 'default',
backgroundColor: 'default',
border: 1,
borderColor: 'default',
checkersColor: 'default',
color: {h:0, s:0, b:20, a:1},
colorOutline: true,
colorScheme: 'light-full', // Light, Light Full, Dark, and Dark Full
colorSelOutline: true,
compactLayout: false,
enableAlpha: true,
enableSubmit: true,
enableUpDown: true,
fieldsBackground: 'default',
flat: true,
hueOutline: true,
layout: 'full', // "full", "rgbhex", "hex"
livePreview: true,
polyfill: false,
position: 'auto', // 'center', 'auto'
readonlyFields: false,
readonlyHexField: false,
showEvent: 'click',
submitBackground: 'default',
submitColor: 'default', // "light", "dark", "default"
variant: 'standard' // "small", "standard", "extra-large"
});
7. 拾色器监听事件。
$('#element').newColpick({
/* Attributes:
bySetColor: true or false
colorDiv: the color picker.
el: the parent element
hex: hex color
hexa: hexa color
hsb: {h: float, s: float, b: float}.
hsba: {h: float, s: float, b: float, a: float}.
hsl: {h: float, s: float, l: float}.
hsla: {h: float, s: float, l: float, a: float}.
overridePos: allows to set the position of the color picker
rgb: {r: int, g: int, b: int}.
rgba: {r: int, g: int, b: int, a: float}.
*/
onBeforeShow: function (colorDiv, el, overridePos) {},
onChange: function (bySetColor, colorDiv, el, hex, hexa, hsb, hsba, hsl, hsla, rgb, rgba) {},
onDestroy: function (colorDiv, el) {},
onHide: function (colorDiv, el) {},
onLoaded: function (colorDiv, el) {},
onShow: function (colorDiv, el) {},
onSubmit: function (colorDiv, el, hex, hexa, hsb, hsba, hsl, hsla, rgb, rgba) {}
});
8. API方法。
// initialize the color picker
instance.loads(opt)
// destroy the color picker
instance.destroys()
// hide the color picker
instance.hides()
// show the color picker
instance.shows()
// set a new color
instance.setColor(col, setCurrent)
// get the selected color
instance.getColor(type, getCurrent)
9. 颜色模式之间转换函数。
$.wcolpick.hexToRgba(hex)
$.wcolpick.hexToHsba(hex)
$.wcolpick.hexToHsla(hex)
$.wcolpick.rgbaToHex(rgba)
$.wcolpick.rgbaToHsba(rgba)
$.wcolpick.rgbaToHsla(rgba)
$.wcolpick.hsbaToHex(hsba)
$.wcolpick.hsbaToRgba(hsba)
$.wcolpick.hsbaToHsla(hsba)
$.wcolpick.hslaToHex(hsla)
$.wcolpick.hslaToRgba(hsla)
$.wcolpick.hslaToHsba(hsla)
$.wcolpick.isValidHex(hex)
$.wcolpick.encodeToCSS(colobj)
$.wcolpick.decodeFromCSS(colstr)
转载请注明来源:jQuery仿Photoshop颜色选择插件
本文永久链接地址:https://www.moyouyouw.cn/code/884.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论