写了一个小巧的jquery拾色工具
作者:fanxiaojie 来源:韦伯花园的魔法师 发布时间:2009-12-21 14:22:00
写了一个小巧的jquery拾色工具,代码简单得不得了,只有这么几行:
(function($){
$.fn.pickColor=function(callback)
{
var itemColors=["#FFFFFF","#E5E4E4","#D9D8D8","#C0BDBD","#A7A4A4","#8E8A8B","#827E7F","#767173","#5C585A","#000000","#FEFCDF","#FEF4C4","#FEED9B","#FEE573","#FFED43","#F6CC0B","#E0B800","#C9A601","#AD8E00","#8C7301","#FFDED3","#FFC4B0","#FF9D7D","#FF7A4E","#FF6600","#E95D00","#D15502","#BA4B01","#A44201","#8D3901","#FFD2D0","#FFBAB7","#FE9A95","#FF7A73","#FF483F","#FE2419","#F10B00","#D40A00","#940000","#6D201B","#FFDAED","#FFB7DC","#FFA1D1","#FF84C3","#FF57AC","#FD1289","#EC0078","#D6006D","#BB005F","#9B014F","#FCD6FE","#FBBCFF","#F9A1FE","#F784FE","#F564FE","#F546FF","#F328FF","#D801E5","#C001CB","#8F0197","#E2F0FE","#C7E2FE","#ADD5FE","#92C7FE","#6EB5FF","#48A2FF","#2690FE","#0162F4","#013ADD","#0021B0","#D3FDFF","#ACFAFD","#7CFAFF","#4AF7FE","#1DE6FE","#01DEFF","#00CDEC","#01B6DE","#00A0C2","#0084A0","#EDFFCF","#DFFEAA","#D1FD88","#BEFA5A","#A8F32A","#8FD80A","#79C101","#3FA701","#307F00","#156200","#D4C89F","#DAAD88","#C49578","#C2877E","#AC8295","#C0A5C4","#969AC2","#92B7D7","#80ADAF","#9CA53B"];
var $colorBox=$(document.createElement("div")).css({"width":"100px","height":"100px","position":"absolute","border":"1px solid #999999","line-height":"10px"});
$.each(itemColors,function(n,v)
{
var $item=$('<a href="" title="'+v+'"><img src="" width="10" height="10" border="0" style="background:'+v+';" /></a>').click(function(){callback(v);$colorBox.remove();return false;}).appendTo($colorBox);
})
$colorBox.insertAfter(this).hover(function(){},function(){$colorBox.remove();});
}
})(jQuery);
请把上面的代码保存为colorpicker.js
需要用到的图片如下:
调用方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>我的拾色器</title>
<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="colorpicker.js"></script>
</head>
<body>
<!--.main-wrap,#main End-->
<img src="color.png" onclick="var $this=$(this);$this.pickColor(function(color){$this.css('background',color);});"/><br /></br />
<input type="text" size="7" maxlength="7" value="#ffffff" onclick="var $this=$(this);$this.pickColor(function(color){$this.css('background',color);$this.val(color);$this.val(color);});" />
</body>
</html>
不错吧!嘎嘎!
找张截图显示效果:
猜你喜欢
- 下一代的 web 已经开始上路了,就在这个星期,MySpace 集成了 Google Gears,雅虎发布了新的 BrowserPlus,G
- 很多网友在经典论坛里说自己的网站为什么色彩上总是有问题,总是看起来没什么精神,没办法吸引人注意。小毅观察了一些网友们设计的网站发现他们在用色
- 一直很想就搜索结果页写一些心得文章出来,甚至连目录都整理好了可是就是一直没有动手。因为总是觉得还差很多东西需要研究需要分析需要验证。最近也组
- mysql优化了所以先说说这个,其实这个,很复杂,对于不同的网站,其在线,访问量,帖子数量,网络情况,以及机器配置都有关系,优化不是一次可以
- mysql -uusername -pyourpassword yourdatabasename < c:\sqlfile.sql其中
- 以前在介绍SQL2k的时候已经提到了SQL2k对XML的支持,使用for XML语句就可以很容易的把执行的结果转化为一个XML,这样可以在很
- 如何制作一个WAP手机的WML网页?代码如下:<%@Language=VBScriptMaxNoAds = 10'
- 见下:<form action="./calculation.asp"><input&nbs
- Altova 公司的 XMLSPY 是个不可多得的好东西,它几乎可以开发所有的 XML 产品。最近用它来做 Schema
- 下面就来介绍一下这些在后台辛勤工作的进程们。系统检测器(System Monitor,SMON)、进程监视器(Process Monitor
- 临近下班的时候,突然想到统计热门文章的问题。以前我所知道的热门文章统计,基本有这么几种:按点击数排序 该方法最大的问题在于热门的文章会越来越
- 由于新云CMS系统,网站底部“版权信息”字段在数据库中是“文本”类型,有250个字符的限制。想在这里给加网站统计代码,因为字数限制的原因,就
- 要达到二级名的效果,必须一下条件以及流程:1、必须有一个顶级域名,而且此域名必须做好泛解析并做好指向。2、必须有一台属于你的独立的服务器。泛
- HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内容
- 首先打击我的就是rpm安装,它告诉我发现了Mysql版本冲突,安装无法继续。我用rpm -q 查询后,想通过rpm -e 来删除系统自带的版
- 代码如下:SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO /* by kudychen 2
- 以下保存成 App.xml , 与asp文件放在相同目录下! 代码如下: <?xml version="1.0"
- Microsoft SQL Server 7.0安全问题Microsoft Corporation【「Microsoft SQL Serve
- Jabob Nielsen提出的10个可用性原则中有一个原则-防止出错(Error Prevention)。官网中有对这一原则的具体解释,这
- 2008北京奥运会块到了,下面的js代码将告诉你,离奥运会开幕还要多少天!让我们一起迎接这美好的时刻。相关文章推荐:各种北京2008奥运会倒