jQuery仿Photoshop颜色选择插件

演示  website 下载

插件介绍

这是一款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)