求个JS颜色选择控件急

JavaScript022

求个JS颜色选择控件急,第1张

<script language=javascript>

document.write("<OBJECT id=\"dlgHelper\" CLASSID=\"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b\" width=\"0px\" height=\"0px\"></OBJECT>")

var ocolorPopup = window.createPopup()

var ecolorPopup=null

function colordialogmouseout(obj){

obj.style.borderColor=""

obj.bgColor=""

}

function colordialogmouseover(obj){

obj.style.borderColor="#0A66EE"

obj.bgColor="#EEEEEE"

}

function colordialogmousedown(color){

ecolorPopup.value=color

//document.body.bgColor=color

ocolorPopup.document.body.blur()

}

function colordialogmore(){

var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value)

sColor = sColor.toString(16)

if (sColor.length < 6) {

var sTempString = "000000".substring(0,6-sColor.length)

sColor = sTempString.concat(sColor)

}

ecolorPopup.value="#"+sColor.toUpperCase()

//document.body.bgColor="#"+sColor.toUpperCase()

ocolorPopup.document.body.blur()

}

function colordialog(){

var e=event.srcElement

e.onkeyup=colordialog

ecolorPopup=e

var ocbody

var oPopBody = ocolorPopup.document.body

var colorlist=new Array(40)

oPopBody.style.backgroundColor = "#f9f8f7"

oPopBody.style.border = "solid #999999 1px"

oPopBody.style.fontSize = "12px"

colorlist[0]="#000000" colorlist[1]="#993300" colorlist[2]="#333300" colorlist[3]="#003300"

colorlist[4]="#003366" colorlist[5]="#000080" colorlist[6]="#333399" colorlist[7]="#333333"

colorlist[8]="#800000" colorlist[9]="#FF6600" colorlist[10]="#808000"colorlist[11]="#008000"

colorlist[12]="#008080"colorlist[13]="#0000FF"colorlist[14]="#666699"colorlist[15]="#808080"

colorlist[16]="#FF0000"colorlist[17]="#FF9900"colorlist[18]="#99CC00"colorlist[19]="#339966"

colorlist[20]="#33CCCC"colorlist[21]="#3366FF"colorlist[22]="#800080"colorlist[23]="#999999"

colorlist[24]="#FF00FF"colorlist[25]="#FFCC00"colorlist[26]="#FFFF00"colorlist[27]="#00FF00"

colorlist[28]="#00FFFF"colorlist[29]="#00CCFF"colorlist[30]="#993366"colorlist[31]="#CCCCCC"

colorlist[32]="#FF99CC"colorlist[33]="#FFCC99"colorlist[34]="#FFFF99"colorlist[35]="#CCFFCC"

colorlist[36]="#CCFFFF"colorlist[37]="#99CCFF"colorlist[38]="#CC99FF"colorlist[39]="#FFFFFF"

ocbody = ""

ocbody += "<table CELLPADDING=0 CELLSPACING=3>"

ocbody += "<tr height=\"20\" width=\"20\"><td align=\"center\"><table style=\"border:1px solid #808080\" width=\"12\" height=\"12\" bgcolor=\""+e.value+"\"><tr><td></td></tr></table></td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\"font-size:12px\" align=\"center\">当前颜色</td></tr>"

for(var i=0i<colorlist.lengthi++){

if(i%8==0)

ocbody += "<tr>"

ocbody += "<td width=\"14\" height=\"16\" style=\"border:1px solid\" onMouseOut=\"parent.colordialogmouseout(this)\" onMouseOver=\"parent.colordialogmouseover(this)\" onMouseDown=\"parent.colordialogmousedown('"+colorlist[i]+"')\" align=\"center\" valign=\"middle\"><table style=\"border:1px solid #808080\" width=\"12\" height=\"12\" bgcolor=\""+colorlist[i]+"\"><tr><td></td></tr></table></td>"

if(i%8==7)

ocbody += "</tr>"

}

ocbody += "<tr><td align=\"center\" height=\"22\" colspan=\"8\" onMouseOut=\"parent.colordialogmouseout(this)\" onMouseOver=\"parent.colordialogmouseover(this)\" style=\"border:1px solidfont-size:12pxcursor:default\" onMouseDown=\"parent.colordialogmore()\">其它颜色...</td></tr>"

ocbody += "</table>"

oPopBody.innerHTML=ocbody

ocolorPopup.show(e.offsetLeft, e.offsetTop+e.offsetHeight, 158, 147, document.body)

}

//-->

</script>

<input name="table_danyuan" type="text" onfocus="colordialog()" value="">

Jquery实现颜色选择器插件是一款很实用的功能插件,可以灵活设置undefined(不传参数时)、字符串、函数、undefined:把选择的颜

色设置到绑定bigColorpicker的元素的value上。、字符串:把选择的颜色设置到id为"字符串"的元素的value上。、函数:执行传入

的函数以实现自定义的获取颜色后的动作。、engine:可以是undefined、p(或P)、l(或L、在bigColorpicker展现颜色选择

区域小格时有两种实现方式:、

一、是一张背景图片,采用光标定位的方式获取颜色。p(或P)、

二、每个小格就是一个li,设置li的背景颜色。l(或L)、实现方式的不同,效率有所差异,可以自己在使用时选择,默认是p(或P)。、

undefined(不传参数时):使用默认p(或P)、sideLength:设置颜色区域的大小取值范围为2~10,默认为6,只有engine为L

时才生效