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) {
if (ret == 0) {
//「はい」が選択された時
$("#result").text("「はい」を選択");
} else {
//「いいえ」が選択された時
$("#result").text("「いいえ」を選択");
}
});
});
});
function btnOpenDialogClick(response) {
var _btn = {};
_btn["はい"] = function () { $(this).dialog("close"); response(0) };
_btn["いいえ"] = function () { $(this).dialog("close"); response(1) };
$("#showDialog").children("p").html("問い合わせダイアログが表示されました。");
$("#showDialog").dialog({
title: "ダイアログサンプル",
width: "auto",
height: "auto",
modal: true,
resizable: false,
buttons: _btn,
open: function () {
$(this).parents('.ui-dialog-buttonpane button:eq(1)').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>
<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) {
if (ret == 0) {
//「はい」が選択された時
$("#result").text("「はい」を選択");
} else {
//「いいえ」が選択された時
$("#result").text("「いいえ」を選択");
}
});
});
});
function btnOpenDialogClick(response) {
var _btn = {};
_btn["はい"] = function () { $(this).dialog("close"); response(0) };
_btn["いいえ"] = function () { $(this).dialog("close"); response(1) };
$("#showDialog").children("p").html("問い合わせダイアログが表示されました。");
$("#showDialog").dialog({
title: "ダイアログサンプル",
width: "auto",
height: "auto",
modal: true,
resizable: false,
buttons: _btn,
open: function () {
$(this).parents('.ui-dialog-buttonpane button:eq(1)').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 件のコメント:
コメントを投稿