2016年1月26日火曜日

JQuery-UIのDialogウィジェットを使ってメッセージダイアログを表示するサンプル

JQuery-UIのDialogウィジェットを使ってメッセージダイアログを表示するサンプル

HTML+javascript
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<link href="./jquery-ui.min.css" rel="stylesheet" type="text/css"></link>
<script src="./jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
<!--
$(function () {
    $("#btnOpenDialog").click(function () {
        btnOpenDialogClick();
        $("#result").text("メッセージダイアログが表示");
    });
});

function btnOpenDialogClick() {
    $("#showDialog").children("p").html("メッセージダイアログが表示されました。");
    $("#showDialog").dialog({
        title: "ダイアログサンプル",
        width: "auto",
        height: "auto",
        modal: true,
        resizable: false,
        buttons: {
            "はい": function () {
                $(this).dialog("close");
            }
        },
        open: function () {
            $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
        }
    });
}

// -->
</script>
</head>
<body >
    <div id="main">
        <input type="button" id="btnOpenDialog" value="OPEN DIALOG" />
        <div id="result"></div>
    </div>
    <div id="showDialog" style="display:none;"><p></p></div>
</body>
</html>








とこのような感じで実現できますが、実はダイアログ表示が非同期で動作しておりJavaScriptの
btnOpenDialogClick()でダイアログ表示した後、ダイアログのClose（「はい」ボタンまたは「×」ボタンの押下を待たずに、
$("#result").text("メッセージダイアログが表示");が動作してしまう。

すこし改造して、ダイアログのClose後、処理が動作するようにする。
HTML+javascript
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<link href="./jquery-ui.min.css" rel="stylesheet" type="text/css"></link>
<script src="./jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
<!--
$(function () {
    $("#btnOpenDialog").click(function () {
        btnOpenDialogClick(function (ret) {
            $("#result").text("メッセージダイアログが表示");
        });
    });
});

function btnOpenDialogClick(response) {
    $("#showDialog").children("p").html("メッセージダイアログが表示されました。");
    $("#showDialog").dialog({
        title: "ダイアログサンプル",
        width: "auto",
        height: "auto",
        modal: true,
        resizable: false,
        buttons: {
            "はい": function () {
                $(this).dialog("close");
                response();
            }
        },
        open: function () {
            $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
        }
    });
}

// -->
</script>
</head>
<body >
    <div id="main">
        <input type="button" id="btnOpenDialog" value="OPEN DIALOG" />
        <div id="result"></div>
    </div>
    <div id="showDialog" style="display:none;"><p></p></div>
</body>
</html>









JQuery-UIのダウンロード

投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)