JS模拟dw的颜色选择器

这个插件是基于我自己封装的公共方法写的，大家可以通过绝对路径调用试试看，匆忙写的有问题联系我~~

<script type="text/javascript" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/js/common.js"></script>
<style type="text/css">
    .colorTools{ position:absolute;}
    .colorTools ul{margin:0;padding:0;}
    .colorTools ul{overflow:hidden;zoom:1;width:210px;border:1px solid #ddd;}
    .colorTools li{float:left; width:10px; height:10px;margin:1px 0px 1px 1px;cursor:pointer;list-style:none;}
</style>
<input type="button" value="click" id="test" />
<script src="../Public/js/colortools.js"></script>
<script>
colorTools.Set({
    target : Y.$id("test"),
    expand : function(){
        var colorVal = arguments[0];
        //下面函数可自行修改
        alert(colorVal)    ;
    }
});
</script>

var colorTools = (function(){
    var Tools = function(o){
        this.setting = typeof o ==="object" ? o : {};
        this.target = this.setting.target || 'colorTools';
        this.position =  null;
        this.expand = this.setting.expand || null;
        this.colorArray = "#000000 #000000 #003300 #006600 #009900 #00cc00 #00ff00 #330000 #333300 #336600 #339900 #33cc00 #33ff00 #660000 #663300 #666600 #669900 #66cc00 #66ff00 #333333 #000033 #003333 #006633 #009933 #00cc33 #00ff33 #330033 #333333 #336633 #339933 #33cc33 #33ff33 #660033 #663333 #666633 #669933 #66cc33 #66ff33 #666666 #000066 #003366 #006666 #009966 #00cc66 #00ff66 #330066 #333366 #336666 #339966 #33cc66 #33ff66 #660066 #663366 #666666 #669966 #66cc66 #66ff66 #999999 #000099 #003399 #006699 #009999 #00cc99 #00ff99 #330099 #333399 #336699 #339999 #33cc99 #33ff99 #660099 #663399 #666699 #669999 #66cc99 #66ff99 #cccccc #0000cc #0033cc #0066cc #0099cc #00cccc #00ffcc #3300cc #3333cc #3366cc #3399cc #33cccc #33ffcc #6600cc #6633cc #6666cc #6699cc #66cccc #66ffcc #ffffff #0000ff #0033ff #0066ff #0099ff #00ccff #00ffff #3300ff #3333ff #3366ff #3399ff #33ccff #33ffff #6600ff #6633ff #6666ff #6699ff #66ccff #66ffff #ff0000 #990000 #993300 #996600 #999900 #99cc00 #99ff00 #cc0000 #cc3300 #cc6600 #cc9900 #cccc00 #ccff00 #ff0000 #ff3300 #ff6600 #ff9900 #ffcc00 #ffff00 #00ff00 #990033 #993333 #996633 #999933 #99cc33 #99ff33 #cc0033 #cc3333 #cc6633 #cc9933 #cccc33 #ccff33 #ff0033 #ff3333 #ff6633 #ff9933 #ffcc33 #ffff33 #0000ff #990066 #993366 #996666 #999966 #99cc66 #99ff66 #cc0066 #cc3366 #cc6666 #cc9966 #cccc66 #ccff66 #ff0066 #ff3366 #ff6666 #ff9966 #ffcc66 #ffff66 #ffff00 #990099 #993399 #996699 #999999 #99cc99 #99ff99 #cc0099 #cc3399 #cc6699 #cc9999 #cccc99 #ccff99 #ff0099 #ff3399 #ff6699 #ff9999 #ffcc99 #ffff99 #00ffff #9900cc #9933cc #9966cc #9999cc #99cccc #99ffcc #cc00cc #cc33cc #cc66cc #cc99cc #cccccc #ccffcc #ff00cc #ff33cc #ff66cc #ff99cc #ffcccc #ffffcc #ff00ff #9900ff #9933ff #9966ff #9999ff #99ccff #99ffff #cc00ff #cc33ff #cc66ff #cc99ff #ccccff #ccffff #ff00ff #ff33ff #ff66ff #ff99ff #ffccff #ffffff";    
        this.init();
    };
    Tools.prototype = {
        init:function(){
            var me = this;
            me.target.onclick = function(ev){
                me.position = me.mousePosition(ev);
                me.create();
                me.backColor();
            }
            
        },
        create : function(){
            var me = this,elem, liArray = [],colorsNode ,i,colors = me.colorArray,liNodes,x,y;
            colors = colors.split(" ");
            x = me.position.x;
            y = me.position.y;
            if(Y.$id("colorTools")){return false;}
            colorsNode = document.createElement("div");
            colorsNode.id="colorTools";
            colorsNode.className="colorTools";
            colorsNode.style.top = y+"px";
            colorsNode.style.left = x+"px";
            liArray.push('<ul>');    
            for(i=0;i<colors.length;i++){
                 liArray.push('<li style=" background-color:' + colors[i] + ';" val ="'+colors[i]+'"></li>');     
            }
            liArray.push('</ul>');
            colorsNode.innerHTML = liArray.join("");
            document.body.appendChild(colorsNode);
            var timer;
            Y.$id("colorTools").onmouseover = function(){
                clearTimeout(timer);    
            }
            Y.$id("colorTools").onmouseout = function(){
                timer = setTimeout(function(){
                    Y.removeElem(Y.$id("colorTools"));
                },500);
            }
        },
        backColor : function(){
            elem = Y.$id("colorTools");
            var me = this;
            var liNode = elem.getElementsByTagName("li");
            for(var j=0;j<liNode.length;j++){
                liNode[j].onclick = function(){
                    if(typeof me.expand==="function"){
                        me.expand(this.getAttribute('val'));    
                    }
                }    
            }    
        },
        mousePosition:function(ev){
            ev = ev || event;
            if(ev.pageX || ev.pageY){
                return {x:ev.pageX, y:ev.pageY};
            }
            return {
                x:ev.clientX + (document.body.scrollLeft||document.documentElement.scrollLeft) - document.body.clientLeft,
    　　　　　　　y:ev.clientY + (document.body.scrollTop||document.documentElement.scrollTop)  - document.body.clientTop
            };
        }
    };    
    return {
        Set:function(o){
            var newColor = new Tools(o);    
        }    
    };
})();