2016-05-23 3 views
1

мне нужно использовать цветовую палитру, поэтому я использую это:пипетка не показывает в моем коде

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

В моей странице HTML я создаю это:

<input id="colore_sfondo_generale" type="text" class="form-control" value=""> 

и мой Код jquery:

$('body').on('click','#colore_sfondo_generale',function(){ 
      $('#colore_sfondo_generale').ColorPicker({ 
        onSubmit: function(hsb, hex, rgb, el) { 
         $(el).val(hex); 
         $(el).ColorPickerHide(); 
        }, 
        onBeforeShow: function() { 
         $('#colore_sfondo_generale').ColorPickerSetColor(this.value); 
        } 
       }) 
       .bind('keyup', function() { 
        $('#colore_sfondo_generale').ColorPickerSetColor(this.value); 
       }); 

     }); 

В моем коде это не работает, и я не знаю почему. Кто-нибудь может мне помочь?

+0

Вы проверяли консоль видеть ошибки? –

+0

@ShadowWizard да, но в консоли нет ошибки – Polly

+0

Ответ Shadow Wizard работает. Просто будьте осторожны с 'jquery.js', снабженным плагином. Он старый и не поддерживает метод '.on()', вместо этого вам нужно будет использовать '.live()' –

ответ

0

Я думаю, что вы делаете вещи трудно для себя

Не было бы легче сделать это, как этот

http://jsbin.com/lucetuqucu/edit?html,js,output

$('#colorSelector').ColorPicker({ 
 
\t color: '#0000ff', 
 
\t onShow: function (colpkr) { 
 
\t \t $(colpkr).fadeIn(500); 
 
\t \t return false; 
 
\t }, 
 
\t onHide: function (colpkr) { 
 
\t \t $(colpkr).fadeOut(500); 
 
\t \t return false; 
 
\t }, 
 
\t onChange: function (hsb, hex, rgb) { 
 
\t \t $('#colorSelector div').css('backgroundColor', '#' + hex); 
 
\t } 
 
});
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="http://www.rachelgallen.com/css/colorpicker.css" type="text/css" /> 
 
    <link rel="stylesheet" media="screen" type="text/css" href="http://www.rachelgallen.com/css/layout.css" /> 
 
    <title>ColorPicker - jQuery plugin</title> 
 
\t <script type="text/javascript" src="http://www.rachelgallen.com/js/jquery.js"></script> 
 
\t <script type="text/javascript" src="http://www.rachelgallen.com/js/colorpicker.js"></script> 
 
    <script type="text/javascript" src="http://www.rachelgallen.com/js/eye.js"></script> 
 
    <script type="text/javascript" src="http://www.rachelgallen.com/js/utils.js"></script> 
 
    <script type="text/javascript" src="http://www.rachelgallen.com/js/layout.js"></script> 
 
</head> 
 

 
<body> 
 
<div id="colorSelector"> 
 
    <div style="background-color:#ff00ff"></div> 
 

 
    </div> 
 
</body> 
 

 
</html>

+0

(просмотр фрагмента полной страницы) –

+0

Прохладный! Примите! Код адаптирован из кода, указанного на странице с информацией о выбранной вами ссылке выбора цвета. Всегда проще следить за документами! :) –

1

Это не должно попадать внутрь обработчика событий щелчка.

Просто приложите его непосредственно и он должен работать, как ожидалось:

$(document).ready(function() { 
    $('#colore_sfondo_generale').ColorPicker({ 
     //options here... 
    }); 
}); 

.click() событие обрабатывается самим подборщика, и при подключении его в каждый клик, вы срыве его события.

Смежные вопросы