ITコラム

プログラミングノウハウ

2018.04.23

#jQuery入門

jQuery【 jQuery UI 】dialog で様々なダイアログを作成するサンプル

jQuery UI を利用すると、メッセージ等を表示するダイアログを作成することができます。
今回は、jQuery UI でダイアログを作成するサンプルについて、解説いたします。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．ダイアログを表示
２．確認ダイアログ
３．入力可能なダイアログ
4. まとめ

１．ダイアログを表示

　
jQuery UI を使用して、ダイアログを表示します。
ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

<script type="text/javascript">
$(function() {
  $("#btn").click(function() {
    $("#dl").dialog({
      modal:true,
      title:"ダイアログのタイトル",
      buttons: {"OK": function() {$(this).dialog("close");}}
    });
  });
});
</script>

<div id="dl" style="display:none;">
  <p>このようなダイアログが表示されます！</p>
</div>
<div style="background-color:#CCC; padding : 20px;">
  <input type="button" id="btn" value="ダイアログ表示">
</div>

jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。

このページのサンプルは、テーマ「 Pepper Grinder 」を選択しています。
他のテーマを選択するとダイアログの印象も変わってきます。

▲目次へ戻る

２．確認ダイアログ

　
jQuery UI を使用して、「 OK 」と「キャンセル」の 2 つのボタンを表示する確認ダイアログを作成します。
確認ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

<script type="text/javascript">
$(function() {
  $("#btn2").click(function() {
    $("#dl2").dialog({
      modal:true,
      title:"確認画面",
      buttons: {
        "ＯＫ": function() {$(this).dialog("close");},
        "キャンセル": function() {$(this).dialog("close");}
      }
    });
  });
});
</script>

<div id="dl2" style="display:none;">
  <p>この内容でよろしいでしょうか？</p>
</div>
<div style="background-color:#CCC; padding : 20px;">
  <input type="button" id="btn2" value="確認">
</div>

▲目次へ戻る

３．入力可能なダイアログ

　
jQuery UI を使用して、入力機能のあるダイアログを作成します。
ボタンをクリックしてみて下さい。

ID
名前

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

<script type="text/javascript">
$(function() {
  // 入力ダイアログを表示
  $("#btn3").click(function() {
    $("#input").dialog("open");
    return false;
  });

  // 入力ダイアログを定義
  $("#input").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "ＯＫ": function() {
        displayMessage("保存しました。（ ID："
          + $("#inputId").val()
          + "、名前："
          + $("#inputName").val()
          + " ）");
        $(this).dialog("close");},
      "キャンセル": function() {
        displayMessage("キャンセルしました。");
        $(this).dialog("close");}
    }
  });
});

// 処理メッセージ表示
function displayMessage(str) {
  $("#info").html(str);
}
</script>

<div style="background-color:#CCC; padding : 20px;">
  <div>
    <input type="button" id="btn3" value="入力">
  </div>
  <div id="info"></div>
</div>

<!-- 入力ダイアログ  -->
<div id="input" title="入力ダイアログ">
  <table>
    <tr>
      <th>ID</th>
      <td><input type="text" id="inputId" size="10" maxlength="10"></td>
    </tr>   
    <tr>
      <th>名前</th>
      <td><input type="text" id="inputName" size="20" maxlength="30" /></td>
    </tr>
  </table>
</div>

「 $(“#inputName”).val() 」のような記述でダイアログ内の入力データを取得できるので、とても便利です。

▲目次へ戻る