この記事では、主に Yii2 がカスタマイズされたポップアップ ウィンドウを実装するためにどのように使用するかを紹介します。これを必要な友人に共有します。 Bootbox.js は、Twitter の Bootstrap を使用して開発された、単純なプログラム可能なダイアログ ボックスを作成するための小さな JavaScript ライブラリです。今日は、ブートボックス プラグインを使用してカスタム ポップアップ ウィンドウを実装する方法を学習します。
今回は新しいプラグイン「bootbox」を試してみました。
Yii2 ではインターフェイスをより美しくするために Bootstarp が使用されています。ただし、唯一の欠点は、Gridview テーブルのアクションで、削除関数のポップアップ ウィンドウが Bootstrap I と少し矛盾していることです。オンラインで解決策を見つけて共有しました。以下はこのプラグインを使用するプロセスです。
Bootbox.js は、Bootstrap の Modal (モーダル ボックス) に基づいて、単純なプログラム可能なダイアログ ボックスを作成するために使用される小さな JavaScript ライブラリです。
Bootbox.js のダウンロード
オープン ソースの bootbox.js のダウンロードは GitHub で見つけることができます
このプラグインの使用方法は?
Yii2 の GridView と組み合わせると、Bootbox スタイルのポップアップ ウィンドウをカスタマイズできます:
1. yii.js モジュールYii2 独自のモジュールをカバーします。 yii 確認ダイアログボックスの生成とアクション操作の実行は .js で定義されています。
オーバーライド js メソッドを使用して目標を達成できます。
@app/web/js/ パスに main.js などの JavaScript ファイルを作成します。
コードは次のとおりです:
yii.allowAction = function ($e) { var message = $e.data('confirm'); return message === undefined || yii.confirm(message, $e); }; // --- Delete action (bootbox) --- yii.confirm = function (message, ok, cancel) { bootbox.confirm( { message: message, buttons: { confirm: { label: "OK" }, cancel: { label: "Cancel" } }, callback: function (confirmed) { if (confirmed) { !ok || ok(); } else { !cancel || cancel(); } } } ); // confirm will always return false on the first call // to cancel click handler return false; }
必要です。 bootbox .js ファイルと main.js ファイルを登録します。
ファイルを変更します: @app/assets/Assets.php
コードは次のとおりです:
namespace backend\assets; use yii\web\AssetBundle; class AppAsset extends AssetBundle { public $basePath = '@webroot'; public $baseUrl = '@web'; public $css = ['css/site.css']; // 注册js资源 public $js = ['js/bootbox.js', 'js/main.js']; public $depends = [ 'yii\web\YiiAsset', 'yii\bootstrap\BootstrapAsset', ]; }
3. カスタム モーダル ボックス
bootbox.js のソース コードを理解します。bootbox.js が bootstarp のモーダル ボックスを使用していることがわかります。必要に応じて、bootbox.js のソース コードを変更できます。
「テンプレート」変数、モーダル スタイルをカスタマイズします。 #比較結果を見てください: 変更前:変更後:
#すぐに快適になり、ポップアップ機能もそれほど不安定ではなくなりました。このようなポップアッププラグインはたくさんありますが、他のプラグインも同様に実装できると思います。
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
Yii を使用してコマンド タスク処理を実装する方法複数のデバイス間でのセッションの共存の問題を解決する方法Yii2 のドメイン名 問題
以上がYii2 が Bootbox プラグインを使用してカスタム ポップアップ ウィンドウを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。