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的时候显示一个小方块，点击它才会显示选择器；

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

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

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