Question

我正在创建一个基于Web的GUI编辑器。在这样做时，我需要创建颜色选择器的前端，例如附加图像中的颜色选择器。我需要知道如何创建它。由于我是这种开发的新手，我可以想到以下选项.. 1.创建跨度并使其可点击并为其提供背景颜色。 2.使用一些生成此功能的插件 3.使用一组按钮，每个按钮都有一个独特的颜色。

我还需要知道是否有任何生成此功能的在线工具或jquery插件。任何帮助将不胜感激

Answer 1

我过去写过类似的东西，这是一个简单的例子，说明了一种方法：

<!DOCTYPE html>

<html lang="en">

<head>
    <style type="text/css">
        .colorBox           {
            position:       relative;
            float:          left;

            width:          24px;
            height:         24px;

            margin:         6px;
            padding:        0;

            background:     #FFFFFF;
            border:         solid 1px #000000;
        }

        colorPicker         {
            background:     #DCDCDC;
            border:         solid 1px #000000;
        }
    </style>

    <title>
        Page
    </title>

    <script src="plugins/js/jquery-1.11.0.js">
    </script>

</head>

<body>

    <div id="colorPicker" class="colorPicker">
        <div id="color-red" class="colorBox" style="background: red;">
            &nbsp;
        </div>
        <div id="color-green" class="colorBox" style="background: green;">
            &nbsp;
        </div>
        <div id="color-blue" class="colorBox" style="background: blue;">
            &nbsp;
        </div>
    </div>

    <div id="targetBox" class="colorBox">
        &nbsp;
    </div>

    <script>
        $(document).ready(function() {
            $(".colorBox").on("click", function() {
                var strID = $(this).attr("id");

                $("#targetBox").css("backgroundColor", $("#" + strID).css("backgroundColor"));
            });
        });
    </script>

</body>

<html>

只需侦听特定元素上的click事件，然后返回所单击元素的背景颜色。

希望这有帮助。

ETA - 不确定您可以使用的任何库或插件，必然会有一个。但是构建一些东西并不困难。

创建一个颜色pallett

1 个答案: