Alas, the development of the previous paragraph is really not easy .... Get 1 hours, looking for a variety of materials, finally, the basic function of the font palette is ready, UI design skills need to be upgraded. First look at the effect:
function Introduction: Click on the Color button, pop the color palette, select a color, save settings, hide the color palette ... Implementation of the source code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>color</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script language= "javascript" src= "Chat.js" type= "Text/javascript" ></script>
<body style= "MARGIN:8PX;" >
<span style= "White-space:pre" > </SPAN><!--omit extraneous code here-->
<TD colspan=12 align=left style= "Word-break:break-all" ><input
Name= "FontColor" type= "button" value= "Color"
onclick= "Coloropen (event)" id= "FontColor"/>
<!--omit extraneous code here-->
<script type= "Text/javascript" language= "JavaScript" >
<!--
var colorhex = new Array (', ', ', ', ', ', ' ', ', ' CC ', ' FF ')
var spcolorhex = new Array (' FF0000 ', ' 00ff00 ', ' 0000FF ', ' FFFF00 ',
' 00FFFF ', ' ff00ff ')
var current = null
function Initcolor () {
Getargs ();
Chat.js init ();
Init ();
var colortable = '
for (i = 0; i < 2; i++) {
for (j = 0; J < 6; J + +) {
colortable = colortable + ' <tr height=15> '
Colortable = colortable
+ ' <td width=15 style= ' background-color: #000000 ' > '
if (i = = 0) {
Colortable = colortable
+ ' <td width=15 style= ' cursor:pointer;background-color:# '
+ Colorhex[j]
+ Colorhex[j]
+ Colorhex[j]
+ ' "onclick=" DoClick (this.style.backgroundColor) ">"
} else {
Colortable = colortable
+ ' <td width=15 style= ' cursor:pointer;background-color:# '
+ Spcolorhex[j]
+ ' "onclick=" DoClick (this.style.backgroundColor) ">"
}
Colortable = colortable
+ ' <td width=15 style= ' background-color: #000000 ' > '
for (k = 0; k < 3; k++) {
for (l = 0; l < 6; l++) {
Colortable = colortable
+ ' <td width=15 style= ' cursor:pointer;background-color:# '
+ Colorhex[k + i * 3]
+ Colorhex[l]
+ Colorhex[j]
+ ' "onclick=" DoClick (this.style.backgroundColor) ">"
}
}
}
}
colortable = ' <table border= "0" cellspacing= "0" cellpadding= "0" style= "border:1px #000000 solid;border-bottom:none; Border-collapse:collapse;width:337px "bordercolor=" 000000 ">"
+ ' <tr height=20><td colspan=21 bgcolor= #ffffff style= font:12px ' tahoma;padding-left:2px; > '
+ ' <span style= ' float:left;color: #999999; " >12</span> '
+ ' <span style= ' float:right;padding-right:3px;cursor:pointer ' onclick= ' colorclose () ' >x off </span> '
+ ' </td></table> '
+ ' <table border= ' 1 "cellspacing=" 0 "cellpadding=" 0 "style=" border-collapse:collapse "bordercolor=" 000000 "style=" Cursor:pointer; " > '
+ colortable + ' </table> ';
document.getElementById ("Colorpane"). InnerHTML = colortable;
var current_x = document.getElementById ("FontColor"). offsetleft;
var current_y = document.getElementById ("FontColor"). offsettop;
Alert (current_x + "-" + current_y)
document.getElementById ("Colorpane"). Style.left = current_x + "px";
document.getElementById ("Colorpane"). Style.top = current_y + "px";
}
function DoClick (obj) {
document.getElementById ("FontColor"). Value = obj;
document.getElementById ("Colorpane"). Style.display = "None";
document.getElementById (' MsgBox '). Style.color = obj;
alert (obj);
var Chatarea = frames["Chat"].document
. Getelementsbyname (' Chatarea ');
for (var i = 0; i < chatarea.length; i++) {
Chatarea[i].style.color = obj;
//}
}
function Colorclose () {
document.getElementById ("Colorpane"). Style.display = "None";
Alert ("OK");
}
function Coloropen () {
document.getElementById ("Colorpane"). Style.display = "";
}
Window.onload = Initcolor;
</script>
</body>
When debugging, you can modify the DoClick method by yourself.