Question

如何让网页中的多个miniColor正常工作？如果我更改了一个值，则所有值都会更改？是否需要更改类名？ http://abeautifulsite.net/blog/2011/02/jquery-minicolors-a-color-selector-for-input-controls/

Answer 1

通过输入的id选择正确的选择器。这是一个简单的例子： ` jQuery miniColors v0.1

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.miniColors.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery.miniColors.css" />
    <script type="text/javascript">

        $(document).ready( 
            function() {
                //
                // Enabling miniColors
                //

                //$(".color-picker").miniColors('methodName', [value]);

                $("#color1").miniColors({

                    change: function(hex, rgb) {
                        $("#color1Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />');
                    }

                });

                $("#color2").miniColors({

                    change: function(hex, rgb) {
                        $("#color2Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />');
                    }

                });

                $("#color3").miniColors({

                    change: function(hex, rgb) {
                        $("#color3Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />');
                    }

                });

                $("#color4").miniColors({

                    change: function(hex, rgb) {
                        $("#color4Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />');
                    }

                });

                $("#color5").miniColors({

                    change: function(hex, rgb) {
                        $("#color5Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />');
                    }

                });
            });

    </script>
</head>

<body>
    <h1>jQuery miniColors v0.1</h1>

    <p> color1 <input type="hidden" id="color1" class="colors" /></p>
    <p> color2 <input type="hidden" id="color2" class="colors" /></p>
    <p> color3 <input type="hidden" id="color3" class="colors" /></p>
    <p> color4 <input type="hidden" id="color4" class="colors" /></p>
    <p> color5 <input type="hidden" id="color5" class="colors" /></p>

    <p>
        Color1 value <br />
        <div><label id="color1Value"></label></div>
    </p>

    <p>
        Color2 value <br />
        <div><label id="color2Value"></label></div>
    </p>

    <p>
        Color3 value [content] <br />
        <div><label id="color3Value"></label></div>
    </p>

    <p>
        Color4 value <br />
        <div><label id="color4Value"></label></div>
    </p>

    <p>
        Color5 value <br />
        <div><label id="color5Value"></label></div>
    </p>
</body>

`

Answer 2

我发现使用form或id名称复制函数有助于删除close：和open：functions。

<script type="text/javascript">
$(document).ready( function() {

    //
    // Enabling miniColors
    //

    $("input[name=color1]").miniColors({
        letterCase: 'uppercase',
        change: function(hex, rgb) {
            logData('change', hex, rgb);
        }
    });

    $("input[name=color2]").miniColors({
        letterCase: 'uppercase',
        change: function(hex, rgb) {
            logData('change', hex, rgb);
        }
    });

    $("input[name=color3]").miniColors({
        letterCase: 'uppercase',
        change: function(hex, rgb) {
            logData('change', hex, rgb);
        },
        close: function(hex, rgb) {
            logData('close', hex, rgb);
        }
    });

    $("input[name=color4]").miniColors({
        letterCase: 'uppercase',
        change: function(hex, rgb) {
            logData('change', hex, rgb);
        },
        close: function(hex, rgb) {
            logData('close', hex, rgb);
        }
    });
});
</script>

我的HTML代码示例;

<form method="post" action="#theme" name="color1Form">
    <input type="text" name="color1" value="FFFFFF" size="6" autocomplete="on" maxlength="10" />
    <input type="submit" value="Save" />
</form>

JQuery miniColors：如何让网页中的多个miniColor正常工作？

2 个答案: