Nice simple JavaScript palette code

My implementation is simple, with no color algorithm, and the steps are as follows:

1. Find a "Web page color code" site on the Internet, and then extract most of the color values out of the package into a file.

2. Then the Panel UI of the palette is then created asynchronously via Ajax.

3. The last write related color selection operation is done.

I wrote this demo-dependent jquery framework written (mainly to save my time (*^__^*) hehe)

Example diagram:

Encapsulates a palette tool class called Palettetools

Compatible Ie6+,fx,gg,op,safari and other browsers

  
  

   -->
   /*
   
   
* Color palette
   
* author:mr.co
   
* date:2010-12-23
   
* qq:co.mr.co@gmail.com
   

   */
   
   

   function
   Palettetools (Eid
   /*
   The palette element ID needs to be triggered
   */
   ){
   

   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-za-z0-9u4e00-u9fa5@.]
   /
   G,
   ''
   ) 
   !=
    
   ''
   )
   
Colorbox.push (
   '
   <li style= "Display:block; width:10px; height:10px; Background-color:
   '
   +
   Colors[i]
   +
   '
   ; float:left margin:1px; cursor:pointer; "Colorval="
   '
   +
   Colors[i]
   +
   '
   "></li>
   '
   );
   
}
   
Colorbox.push (
   '
   </ul></div>
   '
   );
   
}
   
});
   

   /*
   appends the color panel to the current text field
   */
   
   
Eobj.after (Colorbox.join (
   ''
   ));
   
}
   
Palettetools.prototype.show
   =
    
   function
   (args
   /*
   you can set the left position on the color palette to {top: ' 1px ', Ieft: ' 1px '}
   */
   ){
   

   var
   Top,left;
   

   if
   (args
   !=
   undefined) {
   
Top
   =
   Args.top
   ||
    
   0
   ;
   
Left
   =
   Args.left
   ||
    
   0
   ;
   
$(
   '
   #
   '
   +
    This
   . Paletteid). CSS tutorial ({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 focus, show/hide for text fields
   */
   
   
Obj.focus (
   function
   (){
   
$(
   '
   #
   '
   +
   pid). CSS ({display:
   '
    Block
   '
   });
   
}). blur (
   function
   (){
   
$(
   '
   #
   '
   +
   pid). CSS ({display:
   '
   None
   '
   });
   
});
   

   /*
   Color panel mouse sliding effect
   */
   
   
$(
   '
   #
   '
   +
   PID
   +
   '
   Li
   '
   ). Mouseo Tutorial ver (
   function
   (){
   
Setobjcolor ($ (
    This
   ). attr (
   '
   Colorval
   '
   ));
   
})
   

   /*
   Final selection 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 "
   >
   
   

   <
   HTML
   xmlns
   = "http://www.w3.org/1999/xhtml"
   >
   
   

   <
    Head
   ID
   = "Ctl00_head1"
   >
   
   

   <
   title
   >
   Palette Demo
   </
   title
   >
   
   

   <
   Script
   type
   = "text/web Effects"
   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
   >
   
   

   </
    Head
   >
   
   

   <
    Body
   >
   
   

   <
   input
   type
   = "text"
   ID
   = ' Txttest '
   />
   
   

   <
   BR
   /><
   BR
   /><
   BR
   /><
   BR
   /><
   BR
   /><
   BR
   />
   
   

   <
   input
   type
   = "text"
   ID
   = ' Txttest2 '
   />
   
   

   </
    Body
   >
   
   

   </
   HTML
   >