1. Find a "web color code" site on the web, and then extract most of the color values to encapsulate in a file.
2. Then asynchronously gets the panel UI for the palette that was created after the Ajax.
3. Finally write the relevant color selection operation is done.
I wrote this demo relies on the jquery framework written (mainly to save my time (*^__^*) hehe)
Example diagram:
Encapsulates a palette of tool classes called Palettetools
Compatible with browsers such as Ie6+,fx,gg,op,safari
/*
* Palette
* Author:MR.CO
* date:2010-12-23
* Qq:[email protected]
*/
function Palettetools (eid/* need to trigger palette element id*/) {
var eobj = $ (' # ' +eid);
var Paletteid = ' Divpalette_ ' + Eid;
if (eobj[0] = = NULL | | eobj[0] = = undefined) return;
if (eobj[0].nodename.tolowercase () = ' input ') {
Alert (' Error message:only support input elements ... (jq.palette.js) ');
Return
}
if (! (' Value ' in eobj[0])) return;
This. Eobj = Eobj;
This. Paletteid = Paletteid;
var colorbox = new Array ();
/* Get color values asynchronously */
$.ajax ({url: ' palette/color.htm ', type: ' Get ', Cache:false,async:false,
Error:function () {alert (' Error message:file not found color.htm ... (jq.palette.js) '); },
Success:function (data) {
var colors = Data.split (");
Colorbox.push (' <div id= ' + Paletteid + ' "style=" Position:absolute;display:none;background: #fff; width:240px; _ width:242px; height:180px; border:1px solid #ccc; "><ul style=" padding:0px; margin:0px; Float:left; List-style:none; ">");
for (var i = 0; i < colors.length; i++) {
if (Colors[i].replace (/[^\a-\z\a-\z0-9\u4e00-\u9fa5\@\.) /g, ')! = ')
Colorbox.push (' <li style= ' display:block; width:10px; height:10px; padding:0px; line-height:1.5!important; " > ' + colors[i] + '; float:left; margin:1px; Cursor:pointer, "colorval=" ' + colors[i] + ' ></li> ');
}
Colorbox.push (' </ul></div> ');
}
});
/* Append the color panel to the current text field */
Eobj.after (Colorbox.join ("));
}
PaletteTools.prototype.show = function (args/* can set the value of the left position on the color palette as {top: ' 1px ', Ieft: ' 1px '}*/) {
var top,left;
if (args! = undefined) {
top = Args.top | | 0;
left = Args.left | | 0;
$ (' # ' +this. Paletteid). css ({top:top,left:left});
}
var obj = this. Eobj,pid = this. Paletteid;
if (obj = = Undefined | | obj = = NULL) return;
/* Set the selected color value */
var setobjcolor = function (Selectedcolor) {
Obj.css ({background:selectedcolor});
Obj.val (Selectedcolor);
}
/* Show the focus of the Text field, Show/hide */
Obj.focus (function () {
$ (' # ' +pid). CSS ({display: ' block '});
}). blur (function () {
$ (' # ' +pid). CSS ({display: ' None '});
});
/* Color Panel mouse Slide effect */
$ (' # ' + pid + ' Li '). MouseOver (function () {
Setobjcolor ($ (this). attr (' Colorval '));
})
/* Final Pick Color Click */
. Click (function () {
Setobjcolor ($ (this). attr (' Colorval '));
$ (' # ' +pid). CSS ({display: ' None '});
});
}
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Palette Demo </title>
<script type= "Text/javascript" language= "javascript" src= ' Palette/jquery-1.3.2.min.js ' ></script>
<script type= "Text/javascript" language= "javascript" src= ' Palette/jq.palette.js ' ></script>
<script type= "Text/javascript" language= "JavaScript" >
$ (function () {
New Palettetools (' Txttest '). Show ();
New Palettetools (' TxtTest2 '). Show ({top: ' 155px ', left: ' 7px '});
});
</script>
<body>
<input type= "text" id= ' txttest '/>
<br/><br/><br/><br/><br/><br/>
<input type= "text" id= ' TxtTest2 '/>
</body>
Full demo Http://files.cnblogs.com/keke/Palette.rar
8. Javascript Palette
