ホームページ > ウェブフロントエンド > jsチュートリアル > Switchery.js の詳細な図による説明

Switchery.js の詳細な図による説明

php中世界最好的语言
リリース: 2018-03-07 10:55:50
オリジナル
7104 人が閲覧しました

今回はSwitchery.jsを画像と文章で詳しく解説します。実際に使用する際の注意点を紹介します。

これは、プロジェクトで使用されている Apple の IOS7 をモデルにしたスライド ボタン プラグインです。

Switchery は、いくつかの簡単な手順でデフォルトの HTML チェックボックス を美しい iOS 7 スタイルのスイッチに変えるのに役立つシンプルなコンポーネントです。スイッチを簡単にカスタマイズして、デザインに完全に一致させることができます。
最新のすべてのブラウザでサポート: Chrome、Firefox、Opera、Safari、IE8+

特定のスタイル~

Switchery.js の詳細な図による説明

具体的な使用例:

導入方法:

<link rel="stylesheet" href="dist/switchery.css" /><script src="dist/switchery.js"></script>
ログイン後にコピー

初期化:

りー

設定:

Switchery.js の詳細な図による説明

デフォルトの設定とオプション:

var elem = document.querySelector(&#39;.js-switch&#39;);var init = new Switchery(elem);
ログイン後にコピー

例(CSSとJSを引用した後に使用):
< ;入力タイプ="チェックボックス" class="js-switch" がチェックされている /> すべての属性とさまざまな値を使用して、さまざまなスライド ボタン効果を作成します。

ステータスを取得します: Switchery.js の詳細な図による説明コントロールの .checked 属性の bool 値を使用して、クリックされているかどうかを判断します

このケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、注意してください。 PHP 中国語 Web サイトの他の関連記事へ!

Switchery.js の詳細な図による説明関連書籍:

Vue.js 2.0+で作られたグラファイトドキュメントスタイルのリッチテキストエディタ


Switchery.js の詳細な図による説明PythonでExecJsステートメントを実行する方法

以上がSwitchery.js の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート