3

私はミニカラーを実装しようとしています。すべて問題なく、希望どおりに配置しましたが、jquery を実装する際にいくつかの問題があります コンソールでこのエラーが発生します Uncaught TypeError: Object [object Object] has no method 'miniColors' 必要なすべての jquery ファイルを含めました.

<script src="javascripts/jquery.minicolors.js"></script>
<link rel="stylesheet" href="stylesheets/jquery.minicolors.css" />

<input class="mini" type="minicolors" data-swatch-position="left" value="#75bd25"  

data-textfield="false" name="color" />


<script type="text/javascript">
$(document).ready( function() {

$('INPUT[type=minicolors]').miniColors({
change: function(hex, rgb) {     $('body').css("background-color",hex); }   
});

});

</script>

ご協力ありがとうございました!!

これは、あなたの助けに感謝して描いた修正されたコードです

$(document).ready( function() {

  $('INPUT[type=minicolors]').on('change', function() {

    var input = $(this),
      hex = input.val();

      $('body').css("background-color",hex);

  });

});

今回はエラーはありませんが、機能していません。何が間違っていますか?

助けてくれてありがとう！

4

3 に答える 3

5

アップデート：

ユーザーからのフィードバックに基づいて、MiniColors 2.0 の API は 1.0 と同様のアプローチに戻りました。GitHub で更新されたドキュメントを参照してください。

ABS (プラグイン作成者) の Cory です。Jason と icktooday の両方が正しいです。MiniColors 2.0 はほんの数日前にベータ版がリリースされ、API が実際に変更されました。開発者の 99.9% は、MiniColors JavaScript ファイルをインクルードして、次のような入力コントロールを作成するだけで済みます。

<input type="minicolors" />

プラグインは、最初の読み込み時にページ上のすべてのコントロールを自動的に有効にします。コントロールを動的に追加する必要がある場合は、要素を挿入してからメソッド<input>を呼び出すだけです。init

$.minicolors.init();

セレクターを指定する必要はありません。プラグインは、最小限のオーバーヘッドで可能な限り簡単にするように機能します。詳細については、ドキュメントのユーティリティ関数を参照してください。

新しいエラーについては、次のことを行う必要があります。

  1. 変更イベントを元の入力要素にバインドします
  2. background-colorに変更backgroundColor
  3. 入力要素value(およびdata-opacity不透明度を有効にしている場合は属性) を使用します。
$('INPUT[type=minicolors]').on('change', function() {

    // This shows how to obtain the hex color and opacity (when in use)
    var hex = $(this).val(),
        opacity = $(this).attr('data-opacity');

    $('BODY').css('backgroundColor', hex);

});

注:以前のバージョンの MiniColors は要素ベースでしたが、2.0 では先進的なアプローチを使用する方が適切だと感じました。99.9% のユーザーは、MiniColors JavaScript ファイルをインクルードし、そのminicolorsタイプの入力要素を追加するだけで済みます。追加機能が必要な人にとっては、物事を更新するための追加の関数呼び出しにすぎません。

MiniColors 2.0 のテストにご協力ください。また、バグ レポート、機能リクエストなどをGitHubのホームに送信してください。

于 2012-12-24T23:26:21.330 に答える
2

MiniColors のバージョン 2 を使用していますが、MiniColors バージョン 1 でのみ機能するコードを使用しています。古いバージョン 1 を使用するか、新しいドキュメントを読んでコードを更新してください。

于 2012-12-22T04:57:29.170 に答える
1

私はこれまでミニカラーを使用したことがありませんが、要素ベースのプラグインとして使用しようとしているように見えます (ほとんどのプラグイン作成者がプラグインを作成する方法です) が、ミニカラーはプロトタイプ ベースのようです。

つまり、 を使用することはできません$(selector).miniColors(...);。代わりに、$.minicolors.init()およびそれらがサポートするその他の機能を使用する必要があります。

于 2012-12-22T04:57:41.213 に答える