3

Proto.io は、CSS を使用したオン/オフ スイッチ ボタンの非常に優れたソリューションを提供します。ただし、IE8では機能しません。 http://proto.io/freebies/onoff/

jsで修正する方法を知っている人はいますか？または、IE8で動作することをお勧めするオン/オフスイッチボタンソリューションは他にありますか?

4

2 に答える 2

13

Proto.io フリップスイッチをご利用いただきありがとうございます:)

JavaScript を使用して IE8 のサポートを有効にする方法は次のとおりです。

あなたがする必要があるのは、「onoffswitch-checked」クラスに応じてフリップスイッチの状態を変更するcssを追加し、フリップスイッチがクリックされるたびにjavascriptを使用してそのクラスを切り替えることです。

まず、CSS に次の 2 つの宣言を追加します。

.onoffswitch-checked .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checked .onoffswitch-switch {
    right: 0px; 
}

次に、チェックボックスがチェックされているかどうかに応じて、javascript を使用して「onoffswitch-checked」クラスを切り替えます。

$(document).ready(function(){
    $('.onoffswitch-label').click(function(){
        $(this).parent().toggleClass('onoffswitch-checked');
    });
});

また、「デフォルトでスイッチをオンにする」オプションを選択した場合は、必ず「onoffswitch-checked」クラスを html に追加してください。

<div class="onoffswitch onoffswitch-checked">

ノート：

ラベルの click() の代わりにチェックボックスの change() イベントを使用して、これを実現する少しクリーンな方法がありますが、残念ながら IE8 は、チェックボックスの代わりにラベルがクリックされたときに change() イベントをトリガーしません。

親ではなくチェックボックスでチェックされたクラスをトリガーする方が良いでしょうが、IE8はクラスが変更されたときに隣接する兄弟CSS（ + ）を更新しません:(

于 2013-05-08T13:54:17.617 に答える
2

Proto.io ページには、「...IE8 は CSS :checked セレクターをサポートしていません」と記載されているため、サポートされていません。これは、これを修正するために IE 用の polyfill を含めることで動作させることができることを意味します (例: selectivizr ) 。

編集: Proto.io ページには、(ブラウザー アイコン リストの IE ツールチップを介して) IE8 が Javascript を追加してサポートできることも記載されています。このコードは、このスイッチの実際の作成者であるanna.miによる回答で提供されています。

于 2013-01-09T21:59:49.033 に答える