Yii2는 Bootbox 플러그인을 사용하여 사용자 정의 팝업 windows_javascript 기술을 구현합니다.

이번에는 새로운 플러그인 '부트박스'를 사용해봤습니다.

Yii2에서는 인터페이스를 더 아름답게 만들기 위해 Bootstarp를 사용합니다. 다만, Gridview 테이블의 Action에서 삭제 기능의 팝업창이 Bootstrap과 약간 일치하지 않는다는 점이 유일한 단점입니다. 온라인으로 이 솔루션을 공유해 주세요.

Bootbox.js는 Bootstrap의 Modal(모달 상자)을 기반으로 간단한 프로그래밍 가능 대화 상자를 만드는 데 사용되는 작은 JavaScript 라이브러리입니다.

공식 설명

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

Bootbox.js 다운로드

GitHub에서 오픈 소스 bootbox.js 다운로드를 찾을 수 있습니다

https://github.com/makeusabrew/bootbox

이 플러그인을 어떻게 사용하나요?

Yii2의 GridView와 결합하여 Bootbox 스타일 팝업 창을 사용자 정의할 수 있습니다.

1. yii.js 모듈 표지

Yii2와 함께 제공되는 yii.js는 확인 대화 상자 생성 및 작업 작업 실행을 정의합니다.

우선의 js 메서드를 사용하여 목표를 달성할 수 있습니다.

@app/web/js/ 경로 아래에 main.js와 같은 자바스크립트 파일을 생성합니다.

코드는 다음과 같습니다.

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. 리소스 패키지를 등록하세요

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 소스 코드에서 "templates" 변수를 수정하고 모달 스타일을 맞춤설정하세요.

비교 결과 보기:

수정 전:

수정 후:

순간적으로 훨씬 편해졌고 팝업 기능도 더 이상 일관성이 없습니다. 이런 팝업 플러그인이 많이 있는데, 다른 플러그인도 같은 방식으로 구현할 수 있을 것 같아요.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.