[HTA]1ファイルでモーダルダイアログを表示
HTA(HTML Applicatoins)から、モーダルダイアログを表示しようと思い、ネット検索しているとダイアログは別ファイルを読み込んで開くサンプルをいくつか見つけました。
しかし、配布等を考えると可能な限り１つのHTAファイルでまとめたいと思ったため、試しに作ってみました。( ￣▽￣)ﾉ
サンプルのモーダルダイアログの画面イメージは、以下のとおり。
それぞれのパラメータ１とパラメータ２をモーダルダイアログで個別設定できるようにしたサンプルで、モーダルダイアログパラメータを変更し、OKボタンから戻ってきた時にパラメータを更新するようにしています。
しかし、配布等を考えると可能な限り１つのHTAファイルでまとめたいと思ったため、試しに作ってみました。( ￣▽￣)ﾉ
サンプルのモーダルダイアログの画面イメージは、以下のとおり。
それぞれのパラメータ１とパラメータ２をモーダルダイアログで個別設定できるようにしたサンプルで、モーダルダイアログパラメータを変更し、OKボタンから戻ってきた時にパラメータを更新するようにしています。
htaのプログラムソースは、以下のとおり。
プログラムソースの簡単な説明として、htaの起動時にダイアログとして起動かそうでないかで処理を分岐し、表示内容を切り替えていることと、タイトルバーの名前変更、表示領域の自動調整も行っているといったところでしょうか。詳しくはプログラムソースを解析してもらえばと思います。
また、実際に動作するhtaファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/hta/fji_modal_dialog.hta
(リンク先をファイルとしてダウンロードしてください)
■過去記事
・2016年08月11日(木) : 表示内容に合わせてウィンドウ縦方向自動伸縮
<!-----------------------------------------------------------------------------
* モーダルダイアログ for HTML Application
------------------------------------------------------------------------------>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="MSThemeCompatible" content="yes" />
<meta http-equiv="X-UA-Compatible" content="IE=8;IE=9" />
<meta name="Author" content="fji" />
<title>モーダルダイアログ</title>
<style type="text/css">
* {font-family:MS UI Gothic;}
body {background-color:buttonface; margin:10px;}
body > div {text-align:right;}
textarea {width:100%; height:60px; box-sizing:border-box;}
input[type="text"] {width:100%; box-sizing:border-box;}
.label {text-align:left; font-size:12px;}
#dlg1, #dlg2 {display:none;}
</style>
<script language="JavaScript">
//グローバル変数 ------------------------------------------------------
var g_iniMainSize = {cx:500, cy:50};
var g_iniDlgSize = {cx:400, cy:50};
//ダイアログかの判定 --------------------------------------------------
function isDialog() {return window.dialogArguments;}
//ファイル名取得 ------------------------------------------------------
function getFileName() {return window.location.href.split('/').pop();}
//メインウィンドウの初期化 --------------------------------------------
function onInitialize() {
//表示高調整
window.resizeBy(0, document.body.parentNode.scrollHeight - document.body.parentNode.clientHeight);
}
//ダイアログ１を実行 --------------------------------------------------
function doModalDlg1() {
var rsltParam = window.showModalDialog(getFileName(), ['dlg1', 'ダイアログ１', document.getElementById('param1').innerHTML]);
if (rsltParam)
document.getElementById('param1').innerText = rsltParam;
}
//ダイアログ２を実行 --------------------------------------------------
function doModalDlg2() {
var rsltParam = window.showModalDialog(getFileName(), ['dlg2', 'ダイアログ２', param2.value]);
if (rsltParam)
param2.value = rsltParam;
}
//終了実行 ------------------------------------------------------------
function doExit() {
window.close();
}
//ダイアログの初期化 --------------------------------------------------
function onInitDialog() {
var args = window.dialogArguments;
//表示内容設定
document.getElementById('main').style.display = 'none';
document.getElementById(args[0]).style.display = 'block';
//タイトル設定
document.title = args[1];
//パラメータ設定
switch (args[0]) {
case 'dlg1': document.getElementById('dlg_param1').innerText = args[2]; break;
case 'dlg2': dlg_param2.value = args[2]; break;
}
//表示高調整
window.dialogHeight = g_iniDlgSize.cy + Math.abs(g_iniDlgSize.cy - document.body.parentNode.scrollHeight) + 'px';
}
//OK ------------------------------------------------------------------
function onOK() {
//パラメータ取得
switch (dialogArguments[0]) {
case 'dlg1': window.returnValue = document.getElementById('dlg_param1').innerHTML; break;
case 'dlg2': window.returnValue = dlg_param2.value; break;
}
doExit();
}
//キャンセル ----------------------------------------------------------
function onCancel() {
doExit();
}
//自動実行 ------------------------------------------------------------
if (isDialog()) {
window.opener = window.dialogAruguments;
window.dialogWidth = g_iniDlgSize.cx + 'px';
window.dialogHeight = g_iniDlgSize.cy + 'px';
window.onload = onInitDialog;
} else {
window.resizeTo(g_iniMainSize.cx, g_iniMainSize.cy);
window.onload = onInitialize;
}
</script>
<hta:application id="app" maximizeButton="no" minimizeButton="no" innerborder="no" selection="no" scrollflat="yes"></hta:application>
</head>
<body>
<!-- メインウィンドウ ---------------------------------------------------->
<div id="main">
<div class="label">パラメータ１：</div>
<textarea id="param1" name="param1">パラメータ１ ２行目 ３行目</textarea>
<input type="button" value="ダイアログ１で設定" onclick="doModalDlg1();">
<div class="label">パラメータ２：</div>
<input type="text" name="param2" value="パラメータ２">
<input type="button" value="ダイアログ２で設定" onclick="doModalDlg2();">
<hr />
<input type="button" value="閉じる" onclick="doExit();">
</div>
<!-- ダイアログ１ -------------------------------------------------------->
<div id="dlg1">
<div class="label">パラメータ１：</div>
<textarea id="dlg_param1"></textarea>
<hr />
<input type="button" value="OK" onclick="onOK();">
<input type="button" value="キャンセル" onclick="onCancel();">
</div>
<!-- ダイアログ２ -------------------------------------------------------->
<div id="dlg2">
<div class="label">パラメータ２：</div>
<input type="text" name="dlg_param2">
<hr />
<input type="button" value="OK" onclick="onOK();">
<input type="button" value="キャンセル" onclick="onCancel();">
</div>
</body>
</html>
|
プログラムソースの簡単な説明として、htaの起動時にダイアログとして起動かそうでないかで処理を分岐し、表示内容を切り替えていることと、タイトルバーの名前変更、表示領域の自動調整も行っているといったところでしょうか。詳しくはプログラムソースを解析してもらえばと思います。
また、実際に動作するhtaファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/hta/fji_modal_dialog.hta
(リンク先をファイルとしてダウンロードしてください)
■過去記事
・2016年08月11日(木) : 表示内容に合わせてウィンドウ縦方向自動伸縮
| 固定リンク
「プログラミング」カテゴリの記事
- [VBS] コマンドプロンプト非表示で引数付きバッチファイル実行(2024.11.12)
- [HTA]1ファイルでモーダルダイアログを表示(2016.08.22)
- [HTA]表示内容に合わせてウィンドウ縦方向自動伸縮(2016.08.11)
- [Web作成] アコーディオンメニュー(2012.07.04)
- [Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ(2012.05.22)
「HTA」カテゴリの記事
- [HTA]1ファイルでモーダルダイアログを表示(2016.08.22)
- [HTA]表示内容に合わせてウィンドウ縦方向自動伸縮(2016.08.11)
コメント