ColorPicker js control

看過http://andreaslagerkvist.com/jquery/colour-picker/之后,發現很麻煩，所以自己動手豐衣足食.

下面看代碼

JavaScript

<script type="text/javascript">
        $(function () {
            Init6Color();
            $("#colorValue").click(function () {
                $("#ColorList").show();
            });
        });

        function Init6Color() {
            var cs = new Array('00', '33', '66', '99', 'CC', 'FF');

            for (var i = 0; i < 6; i++) {
                for (var j = 0; j < 6; j++) {
                    for (var k = 0; k < 6; k++) {
                        var c = cs[i] + cs[j] + cs[k];
                        $("<div class='colordiv' style=\"background-color:#" + c + " \"></div>").appendTo($("#ColorList"))
                        .click(function () {
                            var color = $(this).css("background-color");
                            $("#colorValue").val(color).css("background-color", color);
                            $("#ColorList").hide();
                        });
                    }
                }
            }
        }
    </script>

CSS:

 <style type="text/css">
        #ColorList { width: 180px; display: none; }
        #colorValue { background: url("jquery.colourPicker.gif") right center no-repeat; }
        .colordiv { display: inline-block; width: 30px; height: 30px; float: left; }
    </style>

HTML:

<div>
        <input id="colorValue" readonly="readonly" />
        <div id="ColorList">
        </div>
    </div>

博客園頁面顯示是第一次寫，存在諸多問題，下面是源碼地址：

https://files.cnblogs.com/Flyear/ColorPicker.zip