Farbauswahl zeigt nicht in meinem Code

Ich brauche eine Farbauswahl zu verwenden, so verwende ich diese:Farbauswahl zeigt nicht in meinem Code

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

In meiner Seite html Ich schaffe diese:

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

und meine jquery code ist:

$('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); 
       }); 

     });

In meinem Code ist dies nicht funktionieren und ich weiß nicht warum. Kann mir jemand helfen?

Quelle

2016-05-23 Polly

Haben Sie die Konsole überprüfen um Fehler zu sehen? –

@ShadowWizard ja, aber in der Konsole gibt es keinen Fehler – Polly

Die Antwort von Shadow Wizard funktioniert. Seien Sie vorsichtig mit den 'jquery.js', die mit dem Plugin geliefert werden. Es ist alt und unterstützt nicht '.on()' Methode, stattdessen müssten Sie '.live()' –

Ich glaube, du machst Dinge hart für sich selbst

Wäre es nicht einfacher, es zu tun wie dieses

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>

Quelle

2016-05-23 11:21:19

(vollständige Ansicht des Schnipsel) –

Cool! Ein Akzeptieren! Der Code wird an den Code angepasst, der auf der About-Seite des von Ihnen bereitgestellten Farbauswahl-Links angegeben wurde. Immer einfacher, den Dokumenten zu folgen! :) –

Dies sollte nicht in einen Click-Event-Handler kommen.

befestigen Sie es einfach direkt und es sollte wie erwartet funktionieren:

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

Die .click() Ereignis vom Picker gehandhabt wird selbst, und wenn Sie es in jedem Klick befestigen, sind Sie ihre Veranstaltungen zu stören.

Quelle

2016-05-23 10:39:37

Farbauswahl zeigt nicht in meinem Code

Antwort

Verwandte Themen