• ホーム
  • HS品目表
  • 日本地図
  • 世界地図
  • タイムライン
  • カレンダー
  • お問い合わせ
  • 運営者情報

HTS macam-macam

  • ホーム
  • HS品目表
  • 日本地図
  • 世界地図
  • タイムライン
  • カレンダー
  • お問い合わせ
  • 運営者情報

jQuery-ui Dialog 使い方

[ Javascript, CSSのセット ]

jQuery-ui と テーマのCSS をセットします。他のjQuery-uiプラグインでも同じ


  <!-- jQuery本体 -->
  <script type="text/javascript" src="Script/js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="Script/js/jquery-migrate-3.0.0.min.js"></script>

  <!-- jQuery-ui -->
  <script type="text/javascript" src="Script/js/jquery-ui-1.9.2.custom.min.js"></script>
  
  <!-- jQuery-ui themes -->
  <link rel="stylesheet" type="text/css" href="Script/css/jquery-ui-themes-1.8.23/themes/${themanm}/jquery-ui.css" charset="UTF-8"/>
  <link rel="stylesheet" type="text/css" href="Script/css/jquery-ui-themes-1.8.23/themes/${themanm}/jquery.ui.all.css" charset="UTF-8"/>

[ コード例 (表示)]

下のようなのを外出しのjsに記述

単純ダイアログ


/**
 * 汎用単純ダイアログ ボタンテキスト指定
 * @param {type} obj divのid
 * @param {type} title タイトル
 * @param {type} msg メッセージ
 * @param {type} btntxt ボタンのテキスト
 * @returns {undefined} なし
 */
function simpleDialog2(obj, title, msg, btntxt) {
  var btns = {};
  btns[btntxt] = function () {
    $(this).dialog("close");
  };
  $(obj).html(msg);
  $(obj).dialog({
    title: title,
    modal: false,
    buttons: btns
  });
}

YES/NO ダイアログ、サイズ指定付


/**
 * 汎用確認ダイアログ サイズ指定
 * @param {type} obj divのid
 * @param {type} title タイトル
 * @param {type} msg htmlメッセージ
 * @param {type} btntxt1 左ボタン
 * @param {type} btntxt2 右ボタン
 * @param {type} func Yesの場合の関数を参照渡し
 * @param {type} w 幅
 * @param {type} h 高さ
 * @returns {undefined} なし
 */
function confirmDialogWithWH(obj, title, msg, btntxt1, btntxt2, func, w, h) {

  var btns = {};
  btns[btntxt1] = function () {
    $(this).dialog("close");
    func();
  };
  btns[btntxt2] = function () {
    $(this).dialog("close");
  };
  $(obj).html(msg);
  $(obj).dialog({
    title: title,
    modal: false,
    width: w, height: h,
    open: function () {
      // フォーカスボタンのセット //
      $(this).siblings(".ui-dialog-buttonpane").find('button:eq(1)').focus();

    },
    buttons: btns
  });

}

[ コード例 (ページ) ]

YESで実行したい処理は、確認ダイアログ表示の前に入れる


 var exec = function () {
   // ここに処理を入れる //
 };
 
 // 確認を入れる //
 confirmDialogWithWH($('#alertdialog'), '経緯度解除確認',
         nm + '<br><br>' + cellcontent + '\n',
         'する', 'しない', exec, 350, 200);

共有:

  • クリックして Twitter で共有 (新しいウィンドウで開きます)
  • Facebook で共有するにはクリックしてください (新しいウィンドウで開きます)

関連

2019-01-09 Dialog JavaScript jQuery-ui
コメントはまだありません

jQuery-ui Dialog について

jQuery リンク集

コメントを残す コメントをキャンセル

コメントを投稿するにはログインしてください。

カテゴリー

  • API (16)
    • FORSQUARE (1)
    • Google Vision (1)
    • googleMap (4)
      • Geocorder (1)
    • Holidays (1)
    • IP GeoLocation (1)
    • Leaflet (2)
    • OpenCage Geocorder (1)
    • RESAS (内閣府 地方創生推進室) (2)
    • teraren.com (1)
    • Yahoo!スタティックマップAPI (1)
  • Database (36)
    • Firebird (4)
    • MySQL (32)
    • Oracle (2)
    • PostgreSQL (2)
    • SQLAnyWhere (1)
    • sqlite (3)
  • Info Site (3)
    • Geomedian (1)
    • 地図蔵 (1)
    • 開店閉店.com (1)
  • Java (43)
    • groovy (2)
    • gson (9)
    • jps jstat (1)
    • JSoup (2)
    • JSP (4)
    • MyBatis (8)
    • Reflection (1)
    • Selenium (2)
    • Servlet (3)
    • Swing (1)
    • Tomcat (7)
  • JavaScript (63)
    • Class (2)
    • dropzone (1)
    • iziToast (1)
    • jqGrid (26)
    • jQuery (7)
    • jQuery-ui (17)
      • AutoComplete (1)
      • conTextMenu (1)
      • Dialog (3)
      • LightBox (2)
      • Lity (1)
      • multipleSelect (5)
      • Slick (1)
    • JSON (1)
    • Numeral (2)
    • Tippy (2)
    • toastr (1)
  • Linux (16)
    • Apache (5)
    • bash (1)
    • CentOS (3)
    • curl (1)
    • Fedora (1)
    • inotify (1)
    • jq (1)
  • PHP (16)
    • GD (11)
    • PDO (2)
  • Public Data (1)
    • 郵便番号 (1)
  • Tools (16)
    • favicon抽出 (1)
    • google-images-download (1)
    • Heidi SQL (1)
    • HTML (1)
    • HttpFox (1)
    • Javascript Obfuscator (1)
    • JSON Pretty Liner (1)
    • SSL Check (1)
    • Unix Timestamp (1)
    • whois geoIP (1)
    • XShell (1)
    • ZBarImg (1)
    • フリーアイコン (1)
    • 画像 (2)
  • Trouble (9)
  • Windows (2)
    • PowerShell (1)
    • コマンドプロンプト (1)
  • WordPress (1)
  • アプリケーション (4)
  • バドミントン (3)
  • リリースニュース (7)
  • 偉人名言集 (42)
    • Steeve Jobs (1)
    • アインシュタイン (1)
    • 三島由紀夫 (2)
    • 井上ひさし (1)
    • 井深大 (1)
    • 夏目漱石 (1)
    • 大隈重信 (4)
    • 小松左京 (1)
    • 山本五十六 (1)
    • 手塚治虫 (1)
    • 星新一 (1)
    • 本田宗一郎 (3)
    • 杉原千畝 (1)
    • 松本清張 (1)
    • 樋口一葉 (1)
    • 武者小路実篤 (1)
    • 湯川秀樹 (1)
    • 石ノ森 章太郎 (1)
    • 福沢諭吉 (14)
    • 赤塚不二夫 (2)
  • 情報システム (3)
  • 書評 (1)
  • 未分類 (1)
  • 海上輸送 (3)
  • 軍事研究 (2)
    • 宇宙 (2)
  • 連絡 (3)

アーカイブ

  • 2020年5月
  • 2020年3月
  • 2020年2月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月

最近の投稿

  • date.nager.at (祝日)
  • Javascript ES2015 で連想配列を検索
  • jQuery Chosen でセレクトボックス
  • 輸出入品目表
  • 日本地図

翻訳

Proudly powered by WordPress | テーマ: Neblue by NEThemes.