Mdb-ui-kit: チェックボックスとトグルボタンの複製

作成日 2015年01月30日  ·  7コメント  ·  ソース: mdbootstrap/mdb-ui-kit

こんにちは、

現在、新しく複製されたbootstrap-material-designで問題が発生しています。

チェックボックスとトグルボタンが次のように複製されて表示されます。

checkbox toggle-duplicated

どちらのボックスをチェックしてもかまいません。どちらもチェックしています。
トグルボタンでは、常に両方の状態があります-オンとオフ。

それを引き起こす可能性のあるアイデアはありますか? 他のすべての要素は問題なく動作します...
良い週末を、
versedi

PS問題の重複の可能性がありますが、私はNETを使用していません:
https://github.com/FezVrasta/bootstrap-material-design/issues/147

最も参考になるコメント

これは、実際にはAngularJSおよびArriveJSで使用する場合の問題です。
要素のクリックアニメーションが機能するように、ArriveJSを含める必要がありました。 残念ながら、arrive.jsを含めると、トグルボタンとチェックボックスが重複します。

@danbarsスニペットの使用は、トグルボタンに対して機能します。 ありがとう !!
@danbarsが言ったように、チェックボックスについても同じことができます。

$.material.checkbox = function(selector) {
        // Add fake-checkbox to material checkboxes
        $((selector) ? selector : this.options.checkboxElements)
                .filter(":notmdproc")
                .filter(function(){ //added this filter to skip checkboxes that were already initialized
                    return $(this).parent().find(".check").length === 0;
                })
                .data("mdproc", true)
                .after("<span class=check></span>");
    };

トグルボタンやチェックボックスが重複することはもうありません。

<script>
    $.material.togglebutton = function(selector) {...};
    $.material.checkbox = function(selector) {... };
    $.material.init();
</script>

全てのコメント7件

javascriptが編集する前にhtmlコードを表示できますか?

いいアドバイス。
私自身のエラーによるクロージングの問題。 ご迷惑おかけして申し訳ありません。

完全に細かいHTMLでも同じ問題が発生しました。 私の場合、init()(またはcheckbox()またはtogglebutton())が複数回呼び出されたために発生しました。 時間が追加されるたびに、さらに<span class="toggle">がDOMに追加され、重複が発生しました。
角度によって制御されていたため、複数の呼び出しを簡単に回避することはできませんでした。

これを修正するには、次のように重要な内部関数の1つをオーバーライドする必要がありました。

$.material.togglebutton = function(selector) {
  // Add fake-checkbox to material checkboxes
  $((selector) ? selector : this.options.togglebuttonElements)
    .filter(":notmdproc")
    .filter(function(){ //added this filter to skip checkboxes that were already initialized
      return $(this).parent().find(".toggle").length === 0;
    })
    .data("mdproc", true)
    .after("<span class=toggle></span>");
};

チェックボックスについても同じことを行うことができます。
うまくいけば、これは誰かを助けるでしょう。

これは、実際にはAngularJSおよびArriveJSで使用する場合の問題です。
要素のクリックアニメーションが機能するように、ArriveJSを含める必要がありました。 残念ながら、arrive.jsを含めると、トグルボタンとチェックボックスが重複します。

@danbarsスニペットの使用は、トグルボタンに対して機能します。 ありがとう !!
@danbarsが言ったように、チェックボックスについても同じことができます。

$.material.checkbox = function(selector) {
        // Add fake-checkbox to material checkboxes
        $((selector) ? selector : this.options.checkboxElements)
                .filter(":notmdproc")
                .filter(function(){ //added this filter to skip checkboxes that were already initialized
                    return $(this).parent().find(".check").length === 0;
                })
                .data("mdproc", true)
                .after("<span class=check></span>");
    };

トグルボタンやチェックボックスが重複することはもうありません。

<script>
    $.material.togglebutton = function(selector) {...};
    $.material.checkbox = function(selector) {... };
    $.material.init();
</script>

私はこれと同じ問題に遭遇し、ラジオボタンのローカルディストリビューションに@danbars編集を適用しました。 私の問題は、コレクションでKnockoutを使用することでした...これをマージして、次のリリースで利用できるようにしてください。 非常に役立ちます。 :)

また、「if」バインディングを使用したKnockout.jsの観察可能な使用法でもこれに遭遇しました。 これにより、initメソッドが2回起動されました。 (domをロードするとき、およびノックアウトで条件が真になる場合にオンになります)。

「if」バインディングの代わりに「visible」バインディングを使用して回避しました。 ただし、上記をマージすると便利です。

@sthum :チェックボックスが動的に追加されるシナリオを教えてください。 上記のコードは全体的に初期化するチェックボックスを避けているため

このページは役に立ちましたか?
0 / 5 - 0 評価