Vexを使用して、サイトに適したモーダルウィンドウを作成、制御、カスタマイズします
Use Vex Create Control
に 前回の記事では、 Bootstrapプラグインを使用してモーダルウィンドウを作成する方法についてのチュートリアルをご案内しました。
モーダルウィンドウは、次の目的で使用されるため、モーダルボックスと呼ばれることがあります。 ダイアログを表示 。
君が望む時に ユーザーがWebサイトを操作できるようにする 時間、 モードウィンドウ 非常に便利。
この記事では、jQueryを使用する別のライブラリを紹介します 成長する モーダルウィンドウを作成するための優れたヘルパー。
この軽量のjQueryプラグインは、ブラウザのネイティブダイアログボックスに代わるものです。
成長する 完全であり、 高度にカスタマイズ可能なJavascriptライブラリ モーダルウィンドウを簡単に作成できるようにします。
基本設定
次に、次のスクリプトを使用して、タイトルに最新のjQueryを含めます。
あなたはできる ここにあります ダウンロード。
まず、Vexスクリプトを準備する必要があります。
vex.js使用する代わりにvex.dialog.js with vex.combined.js 、含めることができますvex.combined.min.jsまたはvex.js 。
Vexを使用するには、vex.css with vex-theme-os.css fileを含める必要があります。
次に、これらのVexライブラリをこのようなタイトルに追加します。
vex.dialog.open他のテーマを使用するには、次のことができます ここを見る デモに付随するドキュメント。
上記のスクリプトには、vex.dialog.alertを含めました。 、これは別のすぐに使用できるVexテーマです。
Vexを適用する
そしてまたvex.dialog.confirm 、これはこれらの方法の組み合わせであり、次のようなより高度な使用法に使用できます。 フォーム、ログイン名、または複数のモーダルウィンドウを作成する 。
Vexの最も基本的な方法はvex.dialog.promptです。 、defaultOptions.className with vex.dialog.open 。
テーマを適用するには、このように値オプションとしてテーマ名を簡単に追加できます。
メソッドを開始する前に、まずvex.defaultOptions.className = 'vex-theme-os'オプションで使用されるテーマを適用する必要があります。
次に、alertメソッドを使用して単純なログインモードウィンドウを作成してみます。
confirm次のコードは、より複雑なデモンストレーションであり、promptと呼びます。 、vex.dialog.openおよび内部 vex.defaultOptions.className = 'vex-theme-os' vex.dialog.open({ message: 'Please enter your username and password:', input: '
', buttons: [ $.extend({}, vex.dialog.buttons.YES, { text: 'Login' }), $.extend({}, vex.dialog.buttons.NO, { text: 'Back' }) ], }) ログインダイアログを作成します。
前述のように、
この方法は、基本的に他の3つの方法を組み合わせたものです。したがって、ログインボックスは次のように表示されます。
最終的な考え
その他の重要な機能には、モバイルデバイスでスムーズに実行される複数のモーダルウィンドウとモーダルボックス内のダイアログボックスが含まれます。
あなたはできる ボックスにアラート、プロンプト、確認、フォーム、またはその他の入力オプションを追加し、アニメーションを設定することもできます 。
モーダルウィンドウの作成に使用できるツールは他にもたくさんありますが、Vexはかなり完全で高度に構成可能なツールです。
また、ほとんどの最新のブラウザと互換性があり、非常に軽量です。7kb未満でのみ圧縮されます（2kb +圧縮後にgzip圧縮されます）。
Vexには既製のテーマも付属しており、ダイアログボックスを自分のスタイルに合わせることができます。 CSS まだです SASS 。