Yii2. Меняем вид стандартного диалога confirm с помощью sweetAlert

Устанавливаем sweetAlert с помощью composer, для этого открываем консоль, переходим в папку с проектом и запускаем следующую команду:

  1. composer require -- prefer - dist bower - asset / sweetalert "*"

Далее создаем файл с именем SweetAlertAsset.php рядом с AppAsset.php в папке assets вашего проекта со следующим содержанием:

  1. <? php
  2.  
  3. namespace app\assets ;
  4.  
  5. class SweetAlertAsset extends \yii\web\AssetBundle
  6. {
  7. public $sourcePath = '@bower/sweetalert/dist' ;
  8. public $css = [
  9. 'sweetalert.css' ,
  10. ];
  11. public $js = [
  12. 'sweetalert.min.js'
  13. ];
  14. }

Стандартный yii.confirm находится в app/vendor/yiisoft/yii2/assets/yii.js и выглядит следующим образом:

  1. /**
  2. * Displays a confirmation dialog.
  3. * The default implementation simply displays a js confirmation dialog.
  4. * Вы можете override this by setting `yii.confirm`.
  5. * @param message the confirmation message.
  6. * @param ок callback to be called when the user confirms the message
  7. * @param cancel a callback to call when the user cancels the confirmation
  8. */
  9. confirm : function ( message , ok , cancel ) {
  10. if ( confirm ( message )) {
  11. ! ок || ok ();
  12. } else {
  13. ! cancel ||
  14. }
  15. },

Нам необходимо переопределить стандартный yii.confirm . Для этого создайте папку js (если ее еще нет) в вашем проекте @app/web/js , а в ней js файл yii.confirm.overrides.js со следующим содержимым:

  1. /**
  2. * Override the default yii confirm dialog. Эта функция is
  3. * Called by yii когда confirmation is requested.
  4. *
  5. * @param string message the message to display
  6. * @param string ok callback triggered когда confirmation is true
  7. * @param string cancelCallback callback triggered when cancelled
  8. */
  9. yii . confirm = function ( message , okCallback , cancelCallback ) {
  10. swal ({
  11. title : message ,
  12. type : 'warning' ,
  13. showCancelButton : true ,
  14. closeOnConfirm : true ,
  15. allowOutsideClick : true
  16. }, okCallback );
  17. };

Далее добавим js файл в Yii2-asset-bundle. Для этого откройте assets/AppAsset.php , добавьте к нему js файл yii.confirm.overrides.js и зависимость SweetAlertAsset для подключения необходимых скриптов и стилей в проект. Файл assets/AppAsset.php будет выглядеть следующим образом:

  1. <? php
  2.  
  3. namespace app\assets ;
  4.  
  5. use yii\web\AssetBundle ;
  6.  
  7. class AppAsset extends AssetBundle
  8. {
  9.  
  10. public $basePath = '@webroot' ;
  11. public $baseUrl = '@web' ;
  12. public $css = [
  13. 'css/site.css' ,
  14. ];
  15. public $js = [
  16. //js переопределяющий yii.confirm
  17. 'js/yii.confirm.overrides.js' ,
  18. ];
  19. public $depends = [
  20. 'yii\web\YiiAsset' ,
  21. 'yii\bootstrap\BootstrapAsset' ,
  22.  
  23. //импорт файлов SweetAlertAsset
  24. 'app\assets\SweetAlertAsset' ,
  25. ];
  26. }

На этом все. Давайте проверим, откроем любой список управления записями и нажмем удалить диалог подтверждения. Как было раньше:

Сейчас вместо стандартного confirm:

Это также будет работать при использовании кнопок в коде проекта:

  1. <? php
  2.  
  3. use yii\helpers\Html ;
  4.  
  5. //...
  6.  
  7. echo Html :: submitButton (
  8. 'Кнопка' ,
  9. [
  10. 'class' => 'btn' ,
  11. 'data-confirm' => Yii :: t ( 'yii' , 'Вы точно хотите это сделать?' ),
  12. ]
  13. );

Вот так легко можно поменять стандартный диалог confirm в yii2

Источник: Перейти
Комментарии (0):
Чтобы оставить свой комментарий, необходимо пройти аутентификацию