Yii2 verwendet das Bootbox-Plug-in, um benutzerdefinierte Popup-Windows_Javascript-Fähigkeiten zu implementieren

Diesmal habe ich ein neues Plug-in „Bootbox“ ausprobiert.

Bootstarp wird in Yii2 verwendet, um die Schnittstelle schöner zu machen. Der einzige Nachteil ist jedoch, dass das Popup-Fenster der Löschfunktion etwas inkonsistent mit Bootstrap ist Bitte teilen Sie diesen Plug-in-Prozess mit anderen.

Bootbox.js ist eine kleine JavaScript-Bibliothek, die zum Erstellen einfacher programmierbarer Dialogfelder verwendet wird, basierend auf Bootstraps Modal (modales Feld).

Offizielle Beschreibung

http://bootboxjs.com/v3.x/index.html

Bootbox.js herunterladen

Wir können den Open-Source-Download bootbox.js auf GitHub finden

https://github.com/makeusabrew/bootbox

Wie verwende ich dieses Plugin?

In Kombination mit Yii2s GridView können wir das Popup-Fenster im Bootbox-Stil anpassen:

1. Abdeckung des yii.js-Moduls

Das mit Yii2 gelieferte yii.js definiert die Generierung des Bestätigungsdialogfelds und die Ausführung von Aktionsvorgängen.

Wir können die überschreibende js-Methode verwenden, um unser Ziel zu erreichen.

Erstellen Sie eine Javascript-Datei unter dem Pfad @app/web/js/, z. B. main.js.

Der Code lautet wie folgt:

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;
}

2. Registrieren Sie Ihr Ressourcenpaket

Die Dateien bootbox.js und main.js müssen registriert werden.

Datei ändern: @app/assets/Assets.php

Der Code lautet wie folgt:

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. Benutzerdefinierte Modalbox

Wenn Sie den Quellcode von bootbox.js verstehen, können Sie wissen, dass bootbox.js die modale Box von bootstarp verwendet. Wir können es an unsere Bedürfnisse anpassen

Ändern Sie die Variable „templates“ im Quellcode von bootbox.js und passen Sie den modalen Stil an.

Sehen Sie sich die Vergleichsergebnisse an:

Vor der Änderung:

Nach der Änderung:

Ich fühle mich sofort viel wohler und die Popup-Funktion ist nicht mehr so ​​inkonsistent. Es gibt viele Popup-Plug-Ins wie dieses, und ich denke, dass andere Plug-Ins auf die gleiche Weise implementiert werden können.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.