color palette

by monteslu

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<div id="main" style="display: none;">

    Click the button for color palette
    
           <div id="colorButton" style="background-color: FFFFFF; border-color: black; border-width: 1px;" dojoType="dijit.form.DropDownButton">
               <span id="colorText">color <span id="colorSwatch" style="height: 10px; width: 10px; border: 1px solid black; background-color: black;">&nbsp;&nbsp;</span></span>
               <div dojoType="dijit.TooltipDialog" id="colorPaletteDialog" title="Color Palette">
                    <div dojoType="dijit.ColorPalette" id="colorPaletteWidget"></div>                    
               </div>
           </div>

</div>

JavaScript

dojo.require("dijit.ColorPalette");
dojo.require("dijit.form.DropDownButton");
dojo.require("dijit.TooltipDialog");
dojo.require("dojox.widget.ColorPicker");


dojo.addOnLoad(function(){
    
    var cp = dijit.byId('colorPaletteWidget');
    dojo.connect(cp,'onChange',function(){
        
        dojo.style(dojo.byId('colorSwatch'),{backgroundColor: cp.value});
        dijit.popup.close(dijit.byId("colorPaletteDialog"));
    });
    
       
    //show main form now that parsing and event hanlding is setup
    dojo.byId('main').style.display = '';
    
});