Wie Yii2 das Bootbox-Plugin verwendet, um benutzerdefinierte Popup-Fenster zu implementieren

In diesem Artikel wird hauptsächlich die Verwendung des Bootbox-Plugins zum Implementieren benutzerdefinierter Popup-Fenster in Yii2 vorgestellt. Jetzt kann ich ihn mit Ihnen teilen.

Bootbox.js ist eine kleine JavaScript-Bibliothek zum Erstellen einfacher programmierbarer Dialogfelder, die mit Twitters Bootstrap entwickelt wurde. Heute werden wir untersuchen, wie Sie mit dem Bootbox-Plug-in benutzerdefinierte Popup-Fenster 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 besteht jedoch darin, dass das Popup-Fenster der Löschfunktion etwas inkonsistent mit Bootstrap I ist Ich habe online eine Lösung gefunden und geteilt. Nachfolgend finden Sie die Vorgehensweise zur Verwendung dieses Plug-Ins.

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

Bootbox.js-Download

Wir finden den Open-Source-Download von bootbox.js auf GitHub

Wie verwende ich dieses Plug-in?

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

1 Decken Sie das yii.js-Modul ab

Yii that kommt mit Yii2 Das Generieren des Bestätigungsdialogfelds und das Ausführen der Aktionsoperation sind in .js definiert.

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

Erstellen Sie eine Javascript-Datei im @app/web/js/-Pfad, 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

Benötigt um Bootbox-.js- und main.js-Dateien zu registrieren.

Ändern Sie die Datei: @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 modale Box

Verstehen Sie, dass bootbox.js die modale Box von bootstarp verwendet benötigt die Variable

„templates“, passt 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 wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So implementieren Sie die Befehlsaufgabenverarbeitung über Yii

So lösen Sie das Problem der sitzungsübergreifenden Domain-Koexistenz unter Yii2-Fragen

Das obige ist der detaillierte Inhalt vonWie Yii2 das Bootbox-Plugin verwendet, um benutzerdefinierte Popup-Fenster zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!