wake-up-neo.com

jQuery UI Color Picker

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

Existiert es?

Gibt es eine anständige Dokumentation zur Implementierung?

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

Aber mit:

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

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

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

jqueryjquery-uidocumentationcolor-picker
54
Damien

Hier finden Sie einige Demos und Plugins.

http://jqueryui.pbworks.com/ColorPicker

39
shin

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

Hier ist, wie es in den JQuery-UI-Dokumenten gezeigt wird:

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="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//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>
6
Kakar

Stellen Sie sicher, dass auf Ihrer Seite die jQuery-Benutzeroberflächenbasis und das Farbwähler-Widget enthalten sind (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.

2
ajm

Das liegt daran, dass Sie versuchen, auf das Plugin zuzugreifen, bevor es geladen wird. Sie sollten versuchen, einen Anruf zu tätigen, wenn das DOM geladen ist, indem Sie es wie folgt umgeben:

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

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

1
RvdK