jPicker是一个快速，轻量级的jQuery插件，是一个比较先进的拾色器，既可以固定到某处作为取色面板使用，也可以做为浮层小窗当作颜色选择器。jPicker支持目前所有的浏览器，并已得到了广泛的测试，在Chrome，火狐，IE 5.5+，Safari和Opera。
使用步骤：
1.首先从网站上下载最新版jPicker，目前最新版是1.1.6，备用下载地址https://code.google.com/p/jpicker
2.解压压缩包：里面除了js文件、css文件等，还有一个Example.html，即使实例也是新手使用手册。
3.在工程根目录建一个文件夹，把解压的文件都放进去
4.在要用到的页面引用对应的js、css、image
5.以下是最基本的固定面板应用实例代码：
<script type="text/javascript">
$(document).ready(
function()
{
$('#Inline').jPicker();
});
</script>
<div id="Inline"></div>6.浮层小窗颜色选择器用法：
<script type="text/javascript">
$(document).ready(
function()
{
$('#Alpha').jPicker(
{
window:
{
expandable: true
},
color:
{
alphaSupport: true,
active: new $.jPicker.Color({ ahex: '99330099' })
}
});
});
</script>
<span id="Alpha"></span>插件设置参数
{
window: // used to define the position of the popup window only useful in binded mode
{
title: null, // any title for the jPicker window itself - displays "Drag Markers To Pick A Color" if left null
effects:
{
type: 'slide', // effect used to show/hide an expandable picker. Acceptable values "slide", "show", "fade"
speed:
{
show: 'slow', // duration of "show" effect. Acceptable values are "fast", "slow", or time in ms
hide: 'fast' // duration of "hide" effect. Acceptable value are "fast", "slow", or time in ms
}
},
position:
{
x: 'screenCenter', // acceptable values "left", "center", "right", "screenCenter", or relative px value
y: 'top', // acceptable values "top", "bottom", "center", or relative px value
},
expandable: false, // default to large static picker - set to true to make an expandable picker (small icon with popup) - set
// automatically when binded to input element
liveUpdate: true, // set false if you want the user to click "OK" before the binded input box updates values (always "true"
// for expandable picker)
alphaSupport: false, // set to true to enable alpha picking
alphaPrecision: 0, // set decimal precision for alpha percentage display - hex codes do not map directly to percentage
// integers - range 0-2
updateInputColor: true // set to false to prevent binded input colors from changing
},
color:
{
mode: 'h', // acceptable values "h" (hue), "s" (saturation), "v" (brightness), "r" (red), "g" (green), "b" (blue), "a" (alpha)
active: new $.jPicker.Color({ hex: 'ffc000' }), // accepts any declared jPicker.Color object or hex string WITH OR WITHOUT '#'
quickList: // this list of quick pick colors - override for a different list
[
new $.jPicker.Color({ h: 360, s: 33, v: 100}), // accepts any declared jPicker.Color object or hex string WITH OR
// WITHOUT '#'
new $.jPicker.Color({ h: 360, s: 66, v: 100}),
(...) // removed for brevity
new $.jPicker.Color({ h: 330, s: 100, v: 50}),
new $.jPicker.Color()
]
},
images
{
clientPath: '/jPicker/images/', // Path to image files
colorMap: // colorMap size and arrow icon
{
width: 256, // Map width - don't override unless using a smaller image set
height: 256, // Map height - don't override unles using a smaller image set
arrow:
{
file: 'mappoint.gif', // Arrow icon image file
width: 15, // Arrow icon width
height: 15 // Arrow icon height
}
},
colorBar: // colorBar size and arrow icon
{
width: 20, // Bar width - don't override unless using a smaller image set
height: 256, // Bar height - don't override unless using a smaller image set
arrow:
{
file: 'rangearrows.gif', // Arrow icon image file
width: 40, // Arrow icon width
height: 9 // Arrow icon height
}
},
picker: // picker icon and size
{
file: 'picker.gif', // Picker icon image file
width: 25, // Picker width - don't override unless using a smaller image set
height: 24 // Picker height - don't override unless using a smaller image set
}
},
localization: // alter these to change the text presented by the picker (e.g. different language)
{
text:
{
title: 'Drag Markers To Pick A Color',
newColor: 'new',
currentColor: 'current',
ok: 'OK',
cancel: 'Cancel'
},
tooltips:
{
colors:
{
newColor: 'New Color - Press “OK” To Commit',
currentColor: 'Click To Revert To Original Color'
},
buttons:
{
ok: 'Commit To This Color Selection',
cancel: 'Cancel And Revert To Original Color'
},
hue:
{
radio: 'Set To “Hue” Color Mode',
textbox: 'Enter A “Hue” Value (0-360°)'
},
saturation:
{
radio: 'Set To “Saturation” Color Mode',
textbox: 'Enter A “Saturation” Value (0-100%)'
},
value:
{
radio: 'Set To “Value” Color Mode',
textbox: 'Enter A “Value” Value (0-100%)'
},
red:
{
radio: 'Set To “Red” Color Mode',
textbox: 'Enter A “Red” Value (0-255)'
},
green:
{
radio: 'Set To “Green” Color Mode',
textbox: 'Enter A “Green” Value (0-255)'
},
blue:
{
radio: 'Set To “Blue” Color Mode',
textbox: 'Enter A “Blue” Value (0-255)'
},
alpha:
{
radio: 'Set To “Alpha” Color Mode',
textbox: 'Enter A “Alpha” Value (0-100)'
},
hex:
{
textbox: 'Enter A “Hex” Color Value (#000000-#ffffff)',
alpha: 'Enter A “Alpha” Value (#00-#ff)'
}
}
}
}
