jQuery-UI-Farbwähler [closed]

Question 1

Ich habe gehört, dass die jQuery-Benutzeroberfläche einen Farbwähler enthält, konnte aber wenig Dokumentation dazu finden.

Existiert es?

Gibt es eine anständige Dokumentation zur Implementierung?

Ich habe das gefunden: http://docs.jquery.com/UI/Colorpicker

Aber mit:

$("#colorpicker").colorpicker();

funktioniert nicht, mit Firebug sagt mir .colorpicker(); ist keine Methode!

Es scheint gut zu funktionieren, es sei denn, ich lege es in eine Dialog-Benutzeroberfläche, wo es sich dann entscheidet, zu brechen.

Question 2

Einige Demos und Plugins finden Sie hier.

http://jqueryui.pbworks.com/ColorPicker

Question 3

Vielleicht bin ich sehr spät dran, aber ab sofort gibt es eine andere Möglichkeit, es mit der jquery-Benutzeroberfläche zu verwenden Schieberegler.

So wird es in den jquery ui-Dokumenten angezeigt:

function hexFromRGB(r, g, b) {
    var hex = [
      r.toString( 16 ),
      g.toString( 16 ),
      b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
      if ( val.length === 1 ) {
        hex[ nr ] = "0" + val;
      }
    });
    return hex.join( "" ).toUpperCase();
  }
  function refreshSwatch() {
    var red = $( "#red" ).slider( "value" ),
      green = $( "#green" ).slider( "value" ),
      blue = $( "#blue" ).slider( "value" ),
      hex = hexFromRGB( red, green, blue );
    $( "#swatch" ).css( "background-color", "#" + hex );
  }
  $(function() {
    $( "#red, #green, #blue" ).slider({
      orientation: "horizontal",
      range: "min",
      max: 255,
      value: 127,
      slide: refreshSwatch,
      change: refreshSwatch
    });
    $( "#red" ).slider( "value", 255 );
    $( "#green" ).slider( "value", 140 );
    $( "#blue" ).slider( "value", 60 );
  });

#red, #green, #blue {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#swatch {
width: 120px;
height: 100px;
margin-top: 18px;
margin-left: 350px;
background-image: none;
}
#red .ui-slider-range { background: #ef2929; }
#red .ui-slider-handle { border-color: #ef2929; }
#green .ui-slider-range { background: #8ae234; }
#green .ui-slider-handle { border-color: #8ae234; }
#blue .ui-slider-range { background: #729fcf; }
#blue .ui-slider-handle { border-color: #729fcf; }

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
  <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
  Simple Colorpicker
</p>
 
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
 
<div id="swatch" class="ui-widget-content ui-corner-all"></div>

Question 4

Stellen Sie sicher, dass Sie die jQuery-UI-Basis und das Farbauswahl-Widget auf Ihrer Seite enthalten haben (sowie eine Kopie von jQuery 1.3):

<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">

<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>

<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.colorpicker.js"></script>

Wenn Sie diese enthalten haben, versuchen Sie, Ihre Quelle zu veröffentlichen, damit wir sehen können, was los ist.

Question 5

Hatte das gleiche Problem (ist keine Methode) mit jQuery bei der Arbeit an der automatischen Vervollständigung. Es schien, dass der Code ausgeführt wurde, bevor die Datei autocomplete.js geladen wurde. Stellen Sie also sicher, dass ui.colorpicker.js geladen ist, bevor Sie colorpicker aufrufen.

Question 6

Das liegt daran, dass Sie versuchen, auf das Plugin zuzugreifen, bevor es geladen ist. Sie sollten versuchen, es anzurufen, wenn das DOM geladen ist, indem Sie es mit folgendem umgeben:

$(document).ready(function(){
    $("#colorpicker").colorpicker();
}