设为首页
收藏本站
最新电影
您现在的位置: 首页=>后台技术=>脚本特效=>页面特效 订阅本栏目  
兼容ie6,ie7,ff的jq(jquery)颜色选择器插件(拾色器)
时间: 2008-10-16 15:52:58 阅读次数:7270


兼容ie6,ie7,ff的jq(jquery)颜色选择器插件


/*
* $-color 0.1 - New Wave Javascript
*
* Copyright (c) 2008 King Wong
* 修改后实现:
* 1.兼容IE6,IE7,FF
* 2.鼠标离开颜色选择器,则颜色选择器自动消失
* 3.调整了颜色选择器的初始位置
* 4.将颜色选择器的颜色值显示项的属性更改为只读
* 5.默认选择框ipunt字体加粗
* 6.默认选择框字体颜色为所选颜色
* 7.默认选择框字体大写
* 8.不会被 <select>遮盖
* $Date: 2008-10-1 $
* 版权属于原作者
* 修改:飞飞(QQ:276230416)
*
*/

(function($){
$.fn.extend({
selectColor:function(){
var _d = new Date();
var _tem = _d.getTime();
var t;
return this.each(function(){
var showColor = function(_obj){
var _left = parseInt($(_obj).offset().left);
var _top = parseInt($(_obj).offset().top);
var _width = parseInt($(_obj).width())/2;
var _height = parseInt($(_obj).height());
var _maxindex = function(){
var ___index = 0;
$.each($("*"),function(i,n){
var __tem = $(n).css("z-index");
if(__tem>0)
{
if(__tem > ___index)
{
___index = __tem + 1;
}
}
});
return ___index;
}();

var colorH = new Array('00','33','66','99','CC','FF');
var ScolorH = new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
var _str = new Array();
for(var n = 0 ; n < 6 ; n++)
{
_str.push('<tr height="11">');
_str.push('<td style="width:11px;background-color:#'+colorH[n]+colorH[n]+colorH[n]+'"></td>');
for(var i = 0 ; i < 3; i++)
{
for(var j = 0 ; j < 6 ; j++)
{
_str.push('<td style="width:11px;background-color:#'+colorH[i]+colorH[j]+colorH[n]+'"></td>');
}
}
_str.push('</tr>');
}
for(var n = 0 ; n < 6 ; n++)
{
_str.push('<tr height="11">');
_str.push('<td style="width:11px;background-color:#'+ScolorH[n]+'"></td>')
for(var i = 3 ; i < 6; i++)
{
for(var j = 0 ; j < 6 ; j++)
{
_str.push('<td style="width:11px;background-color:#'+colorH[i]+colorH[j]+colorH[n]+'"></td>');
}
}
_str.push('</tr>');
}
var colorStr = '<div id="colorShowDiv_'+_tem+'" style="width:229px;position:absolute;z-index:'+_maxindex+';left:'+(_left+_width)+'px;top:'+(_top+_height)+'px;"><table style="width:100%; height:30px; background-color:#CCCCCC;"><tr><td style="width:40%;"><div id="colorShow_'+_tem+'" style="width:80px; height:18px; border:solid 1px #000000; background-color:#FFFFFF;"></div></td><td style="width:60%;"><input id="color_txt_'+_tem+'" type="text" style="width:100px; height:20px;" value="#FFFFFF" readonly /></td></tr></table><table id="colorShowTable_'+_tem+'" cellpadding="0" cellspacing="1" style="background-color:#000000;">'+_str.join('')+'</table></div>'
$("body").append(colorStr);
var _currColor;
var _currColor2;
$("#colorShowTable_"+_tem+" td").mouseover(function(){
var _color = $(this).css("background-color");
if(_color.indexOf("rgb")>=0)
{
var _tmeColor = _color;
_tmeColor = _color.replace("rgb","");
_tmeColor = _tmeColor.replace("(","");
_tmeColor = _tmeColor.replace(")","");
_tmeColor = _tmeColor.replace(new RegExp(" ","gm"),"");
var _arr = _tmeColor.split(",");
var _tmeColorStr = "#";
for(var ii = 0 ; ii < _arr.length ; ii++)
{
var _temstr = parseInt(_arr[ii]).toString(16);
_temstr = _temstr.length < 2 ? "0"+_temstr : _temstr;
_tmeColorStr += _temstr;
}
}
else
{
_tmeColorStr = _color
}
$("#color_txt_"+_tem).val(_tmeColorStr);
$("#colorShow_"+_tem).css("background-color",_color);
_currColor = _color;
_currColor2 = _tmeColorStr;
$(this).css("background-color","#FFFFFF");
});
$("#colorShowTable_"+_tem+" td").mouseout(function(){$(this).css("background-color",_currColor);});
$("#colorShowTable_"+_tem+" td").click(function(){$(_obj).val(_currColor2);return dd();});
$("#colorShowDiv_"+_tem).mouseout(function(){t=setTimeout(dd,50)});
$("#colorShowDiv_"+_tem).mouseover(function(){clearTimeout(t)});
var dd = function(){$("#colorShowDiv_"+_tem).remove()};
}
$(this).click(function(){
showColor(this);
});
var _sobj = this;
$(document).click(function(e){
e = e ? e : window.event;
var tag = e.srcElement || e.target;
if(_sobj.id==tag.id)return;
var _temObj = tag;
while(_temObj)
{
if(_temObj.id=="colorShowDiv_"+_tem)return;
_temObj = _temObj.parentNode;
}
$("#colorShowDiv_"+_tem).remove();
});
});
}
});
})(jQuery);



本站下载资源全部放在fs2you共享空间上,若不能正常下载以上资源,请下载修复补丁
下载"兼容ie6,ie7,ff的jq(jquery)颜色选择器插件(拾色器)"Word版
点击下载
站内搜索    

下一篇图片上传前预览缩略图

上一篇无法拦截与屏蔽的网页漂浮图片广告代码 完全自定义 全屏飘动

本栏目最新 栏目最新列表
使用JS对select动态添加options操作 [IE&Fi
符合标准的对联广告代码
使用js/javascript制作特殊的字符效果
图片上传预览,可显示文件大小,宽、高
文件上传前台控制检测预览程序 v0.6
网站优化策划 栏目最新列表
增加网站外链的快速方法
网站上线前必做的30个检查
新的友情链接参考标准(没有google的PR情况
优化Google的AdSense广告的五个工具
王通讲SEO八大基础
站点最新 站点最新列表
微博推广的一些技巧
xhEditor v1.1.7 发布,
收集的一些轻量级非常实
50个新鲜兼容最新版本的
javascript中cookie的设
Excel中出现#VALUE!、#D
jquery插件:飞飞表情插件
十个使用HTML5开发的精彩
支持HTML5的浏览器有哪些
飞妮莫属:漫画:如何写出
历史最热10条信息  
MIME介绍 及 [1] [2] [3]
巧用Google和迅雷来下载
VIA Rhine II Fast Ethe
Transact SQL 常 [1] [2]
电脑常用端 [1] [2] [3]
十道羊皮卷 欣赏+mp3版+
Do you get a kick out
每日一句:A friend and
每日一句:Theres no tu
网站开发常用手册
相关专题 相关专题列表
jquery插件:飞飞表情插件
Jquery插件:textarea使
jQuery插件—Cookie
jQuery Version 1.4.4 A
飞飞input表单输入框默认
jquery插件,图片预加载
jquery(jq)插件的几种写
任意位置浮动固定层(09-
使用jquery实现的简单下
jquery 控制图片无缝滚动
 width= 
伟哥博客 西安房产 123最新电影 三四六四