jquery.edboxプラグインの使用方法について

jquery.edbox.js は、軽量の jquery 応答モーダル ウィンドウ プラグインです。この jquery モーダル ウィンドウ プラグインを使用すると、応答性の高いアニメーション化された AJAX ベースのモーダル ダイアログ効果を簡単に作成できます。

その機能は次のとおりです:

CSS を通じてモーダルウィンドウのスタイルを変更できます。

モーダルウィンドウのヘッダーとフッターのコンテンツをカスタマイズできます。

読み込み効果をカスタマイズできます。

複数の形式のコンテンツをサポート: HTML、テキスト、画像、AJAX コンテンツなど。

成功、情報、警告、危険の 4 つのアラート シナリオ モードをサポートします。

モーダルウィンドウを開いたり閉じたりするためのカスタマイズ可能なアニメーション。

コールバックメソッドをサポートします。

インストール

jquery.edbox.js プラグインは、npm または Yarn を通じてインストールできます。

npm install jquery.edbox

yarn add jquery.edbox

使い方

edbox.css ファイル、jquery および jquery.edbox.js ファイルをページに導入します。

<link href="dist/edbox.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.edbox.js"></script>

HTML 構造

モーダル ウィンドウを使用する最も簡単な方法は、HTML、テキスト、画像、AJAX コンテンツをモーダル ウィンドウのコンテンツのコンテナとして使用することです。置いた。 。

<p id="target">模态窗口内容</p>

次に、ハイパーリンクまたはボタンを使用してモーダル ウィンドウをトリガーします。

<ahref="#"edbox data-box-target="#target">打开模态窗口</a>

プラグインの初期化

ページ DOM 要素がロードされた後、edbox() メソッドを通じてモーダル ウィンドウ プラグインを初期化します。

$('.trigger-link').edbox();

モーダル ウィンドウに HTML、画像、AJAX コンテンツをロードします

モーダル ウィンドウに HTML コンテンツをロードする方法は次のとおりです: data-box-html 属性に HTML コンテンツを入力します。

<pid="target"data-box-html="<p class=&#39;example-html&#39;>这是HTML内容</p>" >模态窗口内容</p>

$('.trigger-link').edbox();

画像を追加する方法は次のとおりです:

<a href="#" class="link-image" data-box-header="Curitiba - Parana - Brazil">Image load example</a>

$('.link-image').edbox({
  image: 'curitiba-brazil.jpg'
});

AJAXコンテンツを追加する方法は次のとおりです:

<!-- 使用 href 或者 data-box-url 属性 -->
<a href="assets/html/curitiba.html" class="link-url">URL load example</a>

$('.link-url').edbox({
  //add an extra class to the modal for an especific style
  addClass: 'example-url',
  width: 900
});

メソッド

jquery.edbox.jsの利用可能なメソッド窓プラグインは:

以上がjquery.edboxプラグインの使用方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。