日期:2014-05-16  浏览次数:20397 次

js实现颜色选取控件

?

 <TD height=35 align=right>颜色:</TD>
          <TD><INPUT id=tcolor class=iColorPicker 
            style="BACKGROUND-COLOR: #39b778" value=#39b778 name=tcolor> <A 
            onclick="iColorShow('tcolor','icp_tColor1')" id=icp_tColor1 
            href="javascript:void(null)"><IMG 
            align=absMiddle src="/ngcgpro/images/color.png"> </A></TD>

?

iColorPicker.js:

/*Copyright(c)2009,www.supersite.me*/var imageUrl = '../../images/color.png';
function iColorShow(id, id2) {
	var eICP = jQuery("#" + id2).position();
	jQuery("#iColorPicker").css({
		'top' : eICP.top + (jQuery("#" + id).outerHeight()) + "px",
		'left' : (eICP.left) +120+ "px",
		'position' : 'absolute'
	}).fadeIn("fast");
	jQuery("#iColorPickerBg").css({
		'position' : 'fixed',
		'top' : 0,
		'left' : 0,
		'width' : '100%',
		'height' : '100%'
	}).fadeIn("fast");
	var def = jQuery("#" + id).val();
	jQuery('#colorPreview span').text(def);
	jQuery('#colorPreview').css('background', def);
	jQuery('#color').val(def);
	var hxs = jQuery('#iColorPicker');
	for (i = 0; i < hxs.length; i++) {
		var tbl = document.getElementById('hexSection' + i);
		var tblChilds = tbl.childNodes;
		for (j = 0; j < tblChilds.length; j++) {
			var tblCells = tblChilds[j].childNodes;
			for (k = 0; k < tblCells.length; k++) {
				jQuery(tblChilds[j].childNodes[k]).unbind().mouseover(
						function(a) {
							var aaa = "#" + jQuery(this).attr('hx');
							jQuery('#colorPreview').css('background', aaa);
							jQuery('#colorPreview span').text(aaa)
						}).click(function() {
					var aaa = "#" + jQuery(this).attr('hx');
					jQuery("#" + id).val(aaa).css("background", aaa);
					jQuery("#iColorPickerBg").hide();
					jQuery("#iColorPicker").fadeOut();
					jQuery(this)
				})
			}
		}
	}
}
this.iColorPicker = function() {
	jQuery("input.iColorPicker")
			.each(
					function(i) {
						if (i == 0) {
							jQuery(document.createElement("div"))
									.attr("id", "iColorPicker")
									.css('display', 'none')
									.html(
											'<img onclick="colseColorDiv()" src="'+ctxPath+'/images/no.png"/><table class="pickerTable" id="pickerTable0"><thead id="hexSection0"><tr><td style="background:#f00;" hx="f00"></td><td style="background:#ff0" hx="ff0"></td><td style="background:#0f0" hx="0f0"></td><td style="background:#0ff" hx="0ff"></td><td style="background:#00f" hx="00f"></td><td style="background:#f0f" hx="f0f"></td><td style="background:#fff" hx="fff"></td><td style="background:#ebebeb" hx="ebebeb"></td><td style="background:#e1e1e1" hx="e1e1e1"></td><td style="background:#d7d7d7" hx="d7d7d7"></td><td style="background:#cccccc" hx="cccccc"></td><td style="background:#c2c2c2" hx="c2c2c2"></td><td style="background:#b7b7b7" hx="b7b7b7"></td><td style="background:#acacac" hx="acacac"></td><td style="background:#a0a0a0" hx="a0a0a0"></td><td style="background:#959595" hx="959595"></td></tr><tr><td style="background:#ee1d24" hx="ee1d24"></td><td style="background:#fff100" hx="fff100"></td><td style="background:#00a650" hx="00a650"></td><td style="background:#00aeef" hx="00aeef"></td><td style="background:#2f3192" hx="2f3192"></td><td style="background:#ed008c" hx="ed008c"></td><td style="background:#898989" hx="898989"></td><td style="background:#7d7d7d" hx="7d7d7d"></td><td style="background:#707070" hx="707070"></td><td style="background:#626262" hx="626262"></td><td style="