Блог

Главная - Вопросы по программированию - Мини-цвета jQuery: как мне заставить несколько мини-цветов на веб-странице работать должным образом?

Мини-цвета jQuery: как мне заставить несколько мини-цветов на веб-странице работать должным образом?

#jquery

#jquery

Вопрос:

Как мне заставить несколько мини-цветов на веб-странице работать должным образом?Если я изменю одно значение, все значения изменятся?Требуется имя класса, чтобы изменить значение? http://abeautifulsite.net/blog/2011/02/jquery-minicolors-a-color-selector-for-input-controls /

Комментарии:

1. Страница примера ( labs.abeautifulsite.net/projects/js/jquery/miniColors ), по-видимому, работает с несколькими селекторами. Разве это не тот эффект, который вам нужен?

Ответ №1:

выбор правильного селектора по идентификаторам ввода. Вот простой пример: ` 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>

`

Ответ №2:

Я обнаружил, что дублирование функции с использованием только имен формы или идентификаторов помогло при удалении функций close: и open: .

 <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>
Метки: