English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

jQueryでiOS風のポップアップボックスプラグイン

このポップアッププラグインは、iOSの原生ポップアップを模倣して作成したカスタムプラグインで、AlertポップアップとConfirm確認ポップアップを含みます。タイトル、内容、ボタンテキスト、ボタンのリターン関数をカスタムで設定できます。非常に使いやすく、拡張も可能です。以下はプラグインの使用方法で、一見でわかります:

まず、jQueryライブラリ、プラグインライブラリ、CSSファイルをインポートします。

<script src="./jquery-1.8.3.min.js"></script>
<script src="./jquery.confirm-1.1.js"></script>
<link href="./jquery.confirm-1.1.css" rel="external nofollow" rel='stylesheet' type='text/css' />

Alert弹出框快速使用

$.alert('Are you sure to continue? --内容はHTMLコードをサポートしています
$.alert({
 title: 'Alertポップアップ!', --タイトル デフォルトタイトル(注意事項)
 content: 'Are you sure to continue? --内容
});

Alertコールバックポップアップの使用方法

$.alert({
 title: 'Alertコールバックポップアップ!',
 content: 'alertにコールバック関数を含め、確認ボタンをクリックするとコールバック関数がトリガーされます',
 buttons: {
  ok: {
   text: 'いいえ', --ボタンのタイトル
   action: function () { --コールバックイベント
     alert("ボタンのコールバック関数が実行されました");
   }
  }
 }
});

Confirm確認ボックスの使用方法

$.confirm('Are you sure to continue?
$.confirm({
 title: 'Confirm確認ボックス!', 
 content: 'Are you sure to continue? 
});

Confirmコールバック確認ボックスの使用方法

$.alert({
 title: 'Confirmコールバック確認ボックス!',
 content: 'Confirm確認ボックス、ボタンをクリックするとコールバック関数がトリガーされます',
 buttons: {
  ok: { --確認ボタン
   text: '確認',
   action: function () {
     alert("確認ボタンのコールバック関数が実行されました");
   }
  }
  close: { --閉じるボタン
   text: '閉じる',
   action: function () {
     alert("閉じるボタンのコールバック関数が実行されました");
   }
  }
 }
});

確認ボタンの配置が複数可能です

効果表示

使いやすそうですね -_-

ダウンロードリンク:https://pan.baidu.com/s/1pLJJky3

以上の説明は編集者が皆さんに紹介したjQueryのiOS風ポップアッププラグインであり、皆さんに役立つことを願っています。何かご不明な点があれば、コメントを残してください。編集者は皆さんの質問に迅速に回答します。また、呐喊教程サイトへのサポートに感謝しています。

おすすめ