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的时候显示一个小方块,点击它才会显示选择器;
别的大家应该都能看懂,效果如下:
这样选中一个颜色,点击确定后文本框里就是选中的颜色代码,可以直接使用了;
其它功能暂时不研究,用到时候在看