Yii2가 Bootbox 플러그인을 사용하여 사용자 정의 팝업 창을 구현하는 방법

이 글은 주로 Yii2가 Bootbox 플러그인을 사용하여 사용자 정의 팝업 창을 구현하는 방법을 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

Bootbox.js는 작은 JavaScript입니다. Twitter의 Bootstrap을 기반으로 개발된 간단한 프로그래밍 가능 대화 상자를 만드는 데 사용되는 라이브러리입니다. 오늘은 bootbox 플러그인을 사용하여 사용자 정의 팝업 창을 구현하는 방법을 알아보겠습니다.

이번에는 새로운 플러그인 "bootbox"를 사용해보았습니다.

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

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

Bootbox.js 다운로드

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

이 플러그인을 사용하는 방법은 무엇인가요?

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 Modal 상자 사용자 정의

bootbox.js 소스 코드를 이해하면 알 수 있습니다. bootbox.js가 사용하는 bootstarp의 모달 상자의 경우 필요에 따라 bootbox.js 소스 코드의 "templates" 변수를 수정하고 모달 스타일을 사용자 정의할 수 있습니다.

비교 결과 보기:

수정 전:

수정 후:

즉시 훨씬 편해진 느낌이고, 팝업 기능도 더 이상 그렇게 어색하지 않습니다. 이런 팝업 플러그인이 많이 있는데, 다른 플러그인도 같은 방식으로 구현할 수 있을 것 같아요.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

Yii를 통해 명령 작업 처리를 구현하는 방법

Yii2에서 세션 도메인 간 공존 문제를 해결하는 방법

위 내용은 Yii2가 Bootbox 플러그인을 사용하여 사용자 정의 팝업 창을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!