jPicker - 一个jQuery的颜色选择器插件

jPicker是一个快速，轻量级的jQuery插件，包括在你的web项目先进的拾色器。

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.我用的功能很简单，就是在一个文本框里使用插件选中颜色，于是我根据“手册”的jPicker({ window: { expandable: true }})实例说明，先写一个文本输入框：

<s:textfield name="newsInfo.title_color" id="title_color" value="e2ddcf" />

这里特别要提醒一下，标签里的value=“xxxx"一定要写上，不然没效果

然后写上一下js

<script type="text/javascript">//<![CDATA[$(document).ready(function(){    /************************jpicker*********************************/      $("#title_color").jPicker(        {          window:          {          position:              {                x: 'screenCenter', /* acceptable values "left", "center", "right", "screenCenter", or relative px value */                y: 'bottom' /* acceptable values "top", "bottom", "center", or relative px value */              },            expandable: true          },          images:          {            //clientPath: '/'+document.location.pathname.split("/")[1]+'/commons/jpicker-1.1.6/images/', /* Path to image files */            clientPath: '${ctx}/commons/jpicker-1.1.6/images/', /* Path to image files */          },          localization: /* alter these to change the text presented by the picker (e.g. different language) */          {            text:            {              title: '拖动鼠标选中一个颜色',              newColor: '选中颜色',              currentColor: '当前颜色',              ok: '确定',              cancel: '取消'            },            tooltips:            {              colors:              {                newColor: '点击‘确定’提交新选颜色',                currentColor: '点击这里还原当前颜色'              },              buttons:              {                ok: '提交选中的颜色',                cancel: '取消并恢复当前颜色'              }            }          }                  });/************************jpicker********************************/})//]]></script>

其中window下的expandable: true表示是否默认扩展，false的话直接是一个选择器，true的时候显示一个小方块，点击它才会显示选择器；

别的大家应该都能看懂，效果如下：

这样选中一个颜色，点击确定后文本框里就是选中的颜色代码，可以直接使用了；

其它功能暂时不研究，用到时候在看