jQuery UIカラーピッカー

Question

jQuery UIにはカラーピッカーが含まれていると聞いたことがありますが、それに関するドキュメントはほとんど見つかりませんでした。

存在しますか？

それを実装する方法についてのまともな文書はありますか？ Firebugのは.colorpicker();が方法ではありません私に言って、

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

は動作しません：http://docs.jquery.com/UI/Colorpicker

しかし、使用して：

私はこれを見つけました！

私がダイアログのUIに入れない限り、うまく動作しているように見えます。

Answer 1

ここにいくつかのデモとプラグインがあります。オートコンプリートで作業するとき

http://jqueryui.pbworks.com/ColorPicker

Answer 2

あなたはjQueryのUIベースとカラーピッカーウィジェットがあなたのページ（だけでなく、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> 

あなたが含まれるものを持っている場合は、私たちはあなたのソースを投稿してみてください何が起こっているか見ることができます。

Answer 3

はjQueryを使って同じ問題（メソッドではない）を有していました。 autocomplete.jsがロードされる前にコードが実行されたようです。したがって、colorpickerを呼び出す前にui.colorpicker.jsがロードされていることを確認してください。

Answer 4

これは、プラグインがロードされる前にプラグインにアクセスしようとしているためです。あなたは、DOMはこれとそれを取り巻くによってロードされたときに、それへの呼び出しを作ってみる必要があります。

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

Answer 5

おそらく、私は非常に遅れていますが、今のようjqueryのUI sliderを使用して、それを使用する別の方法があります。ここで

はjqueryのUIのドキュメントに示されている方法をそのです：

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>