jquery的顏色選擇插件實例代碼
更新時間：2008年10月02日 00:53:43 作者：
忙了一夜，終于把jquery的顏色選擇插件寫完了，不多說了，看看代碼吧。
復(fù)制代碼 代碼如下:
(function($){
$.fn.extend({
selectColor:function(){
var _d = new Date();
var _tem = _d.getTime();
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());
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:16px;" value="#FFFFFF" /></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;
}
}
$("#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);
});
}
$(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);
使用方法：
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$("#要綁定的ID").selectColor();
});
注意：要綁定的對像一定要是文本輸入框
相關(guān)文章
簡單的按鈕js事件 用于判斷和顯示提示2011-05-05
JavaScript 學(xué)習(xí)筆記之一jQuery寫法圖片等比縮放以及預(yù)加載
以前對于JavaScript總是在用到的時候在頁面上寫幾個函數(shù)，基本沒考慮到函數(shù)的封裝與重用，最近有個項目可能對于這方面要求有點高，所以就研究了下類似jQuery的封裝2012-06-06
這篇文章主要介紹了jquery等待效果示例,需要的朋友可以參考下2014-05-05
剛開始接觸jquery，很多東西不熟悉，對于表單的一些操作收集整理。2010-04-04
這篇文章主要介紹了jQuery簡單實現(xiàn)中間浮窗效果,涉及jQuery事件響應(yīng)及動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-09-09
基于JQuery實現(xiàn)的Select級聯(lián)
Select級聯(lián)，想必大并不陌生吧，本文為大家介紹下使用jquery是如何快速實現(xiàn)的，希望對大家有所幫助2014-01-01
今天的內(nèi)容是關(guān)于表單驗證插件的制作。表單驗證控件實現(xiàn)的主要功能是，當(dāng)表單提交的時候檢查必填項是否正確填寫，同時根據(jù)需要驗證輸入信息是否符合規(guī)范2012-08-08
這篇文章主要介紹了jQuery中removeProp()方法用法,實例分析了removeProp()方法的功能、定義及刪除由prop()方法設(shè)置的屬性時的使用技巧,需要的朋友可以參考下2015-01-01
JQuery的事件處理機(jī)制在JQuery框架中起著重要的左右，它就像電視機(jī)的開關(guān)，我們打開電視機(jī)的開關(guān)才能看到各個電視臺精彩的節(jié)目，那么我們使用JQuery的事件處理機(jī)制就可以創(chuàng)造我們自定義的行為，比如說提交、改變樣式、效果顯示等等，使我們的網(wǎng)頁更加豐富。2010-11-11
jquery異步請求實例代碼，需要的朋友可以參考下。2011-06-06