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
posted @ 2011-07-25 18:01  DukeCheng  阅读(481)  评论(0编辑  收藏  举报