Colorpicker с помощью плагина jquery - PullRequest
Новая
       2

Colorpicker с помощью плагина jquery

3 голосов
/ 16 декабря 2011

Я пытаюсь создать страницу с палитрой цветов для установки цвета переднего и заднего текста. Я прошел демонстрацию цветопередачи, которая казалась привлекательной, и попытался реализовать ее во всплывающем окне. Я хотел бы знать, есть ли здесь кто-нибудь, кто знаком с палитрой цветов, описанной в ссылке ниже:

http://www.eyecon.ro/colorpicker/

Запрос "возможно ли привязать этот плагин к div с другим именем?" Если да, пожалуйста, не стесняйтесь помочь ..

Ответы [ 3 ]

3 голосов
/ 16 декабря 2011

Страница содержит следующий фрагмент кода: 

$('#colorpickerHolder').ColorPicker({flat: true});

Первая часть - это стандартный селектор jQuery, поэтому у вас должна быть проблема с заменой идентификатора для div: 

<div id="myPicker"></div>

// snip

$('#myPicker').ColorPIcker({flat: true});

На странице вызова веб-сайта у них есть это, что говорит о том, что, возможно, это работает в поле ввода?Я скачал пакет, и нет лучших инструкций.Возможно, вам придется покопаться в исходном коде, чтобы увидеть, как он работает.

Код вызова Все, что вам нужно сделать, - это выбрать элементы способом jQuery и вызвать плагин.$ ('input'). ColorPicker (параметры);

1 голос
/ 23 декабря 2011

Попробуйте это. 

$(document).ready(function() {
    $('#FieldID').ColorPicker({
    onSubmit: function(hsb, hex, rgb, el) {
            $(el).val(hex);
    $(el).ColorPickerHide();
    },
    onBeforeShow: function () {
        $(this).ColorPickerSetColor(this.value);
    }
    }).bind('keyup', function(){
        $(this).ColorPickerSetColor(this.value);
    })
});

Вы можете заменить #FieldID на разделенный запятыми список идентификаторов полей (с префиксом # (резкое)) и / или классов (с префиксом. (Точка))и / или любой селектор CSS.

1 голос
/ 19 декабря 2011

Я использовал этот инструмент выбора цвета, и он работает нормально.Я думаю, что вы используете демонстрационные файлы для использования этого палитры цветов.В демонстрационном файле "index.html" вы можете найти фрагменты кода, такие как $('#colorpickerHolder').ColorPicker({flat: true});, но внесение любых изменений здесь не повлияет на работу на странице.

Если вы заметили, автор включил отдельный файл кода вверху 

   <script type="text/javascript" src="js/layout.js?ver=1.0.2">
    </script>

этого файла, layout.js содержит все вызовы функции ColorPicker.

Я бы порекомендовал вам создать новую страницу с этими строками вверху. 

<script type="text/javascript" src="js/jquery.js">
    </script>
    <script type="text/javascript" src="js/colorpicker.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#colorpickerHolder').ColorPicker({
                flat: true
            });
            $('#myColorpickerHolder').ColorPicker({
                flat: true
            });        
         });
    </script>

Теперь просто добавьте два элемента div с идентификаторами "colorpickerHolder" и "myColorpickerHolder" встраница, вы увидите, что каждый из них является отдельным палитрой цветов.

...