jQuery.UiのDialogを使ってみた - ハロの外部記憶インターフェイス

jQuery.Uiを使う

必要な処理

jquery.ui用のCssと当然ながら、jqueryとjquery.uiのjsの追加が必要だ。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

dialogを表示

の中身をdialogとして表示してくれる。

<script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
</script>
<div id="dialog" title="Basic dialog">
</div>

dialogのopen/close時の処理を実装し、openするタイミングでのみ動く様に出来る。

  $( function() {
    $( "#dialog" ).dialog({
       open: function (event) {
          // <input id="open_action" onclick="actiondetail()" />を実行する。
          $("#open_action").trigger("click");
       },
       close: function (event) {
            $(this).dialog("destroy");
       }
    });
  } );

dialogにボタンを配置しボタンクリックイベントで処理を実行する。

  $( function() {
    $( "#dialog" ).dialog({
       button: {
           OK: function () {
            $(this).dialog("close");
           }
       },
       close: function (event) {
            $(this).dialog("destroy");
       }
    });
  } );

[問題]jQueryUiのDialog表示時、ポップアップが表示されてからページが先頭になる。

Clickイベントの最後にReturn falseすることで解決した。

$('#btnOrderKbn').click(function () {
    $("#dialogdiv").dialog("open");
    return false;
});