htmlのチェックボックスで動的にボタンを作成

締切済

質問者：---yamaori---
質問日時：2014/09/16 03:55
回答数：3件

htmlで画面を２つに分けて使用することを想定しております。
・左画面⇒アコーディオン形式の業務メニューリンク
・右画面⇒左画面の中からお気に入り業務の登録して使用するワーク領域。
　　　　　　　お気に入りの内容は子画面のチェックボックスで編集する想定。

イメージとしては、右画面で編集ボタンを押すと子画面が開き、
子画面でお気に入りに登録する業務をチェックボックスで選択して
決定ボタンを押すと、チェックボックスの状態に応じて右画面上に
各業務へのリンクボタンが作成・削除される仕様にしたいのですが、
どうすれば実現できるのかがわからず困っております。
作成されるリンクボタンは左画面と同様、クリックすることで対応したexeを
実行できるようにしたいです。

漠然とした質問で申し訳ありませんが、実現方法について
アドバイスを頂けると大変助かります。

参考として、現在テストで作成しているソースは以下の通りです。
■00_main.html
--------------------
<!DOCTYPE html>
<html>
<head>
<title>メインメニュー</title>
</head>


<frameset cols= "25%,75%">
<frame src="01_menu.html" name="01_menu">
<frame src="02_favorite.html" name="02_favorite">

</html>
--------------------

■01_main.html
--------------------
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">
$(function(){
$('.subMenu').hide();
$('#menu .archive').click(function(e){
$('ul.subMenu').slideUp();
if($('+ul.subMenu',this).css('display') == 'none'){
$('+ul.subMenu',this).slideDown();
}
});
//
});
</script>

<script LANGUAGE="JavaScript">
function execute1() {
var obj = new ActiveXObject("WScript.Shell");
obj.Run("notepad.exe");
}
</script>

<script LANGUAGE="JavaScript">
function execute2() {
var obj = new ActiveXObject("WScript.Shell");
obj.Run("calc.exe");
}
</script>

<script LANGUAGE="JavaScript">
function execute3() {
var obj = new ActiveXObject("WScript.Shell");
obj.Run("mspaint.exe");
}
</script>

<style type="text/css">
@import url("global.css");
</style>
<title>業務メニュー</title>

</head>
<body>
業務メニュー

<ul id="menu">
<li><div class="archive">業務１</div>
<ul class="subMenu">
<li><a href="javascript:execute1()">あああああ</a></li>
<li><a href="javascript:execute1()">いいいいい</a></li>
<li><a href="javascript:execute1()">ううううう</a></li>
</ul></li>

<ul id="menu">
<li><div class="archive">業務２</div>
<ul class="subMenu">
<li><a href="javascript:execute1()">かかかかか</a></li>
<li><a href="javascript:execute2()">ききききき</a></li>
<li><a href="javascript:execute3()">くくくくく</a></li>
</ul></li>

</body>
</html>
--------------------

■02_favorite.html
--------------------
<!DOCTYPE html>
<html>
<head>
<title>お気に入り</title>
<script>
function disp(url){
window.showModalDialog(url, "window_name", "width=700,height=400,scrollbars=yes");
}
</script>
</head>

<body>
お気に入り

<FORM>
<div style = "text-align:right">
<p><a href="03_favorite_setup.html" target="window_name" onClick="disp('03_favorite_setup.html')"><BUTTON type="button">編集</BUTTON></a></p>
</div>
</FORM>

</body>
</html>
--------------------

■03_favorite_setup.html
--------------------
<!DOCTYPE HTML>
<html lang="ja">

<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; CHARSET=Shift_JIS">
<title>お気に入りメニュー編集</title>
<style type="text/css"></style>
</head>

<body>
<div id="MainBox">
<h5>お気に入りに追加するものを選択して下さい。</h5>

<form action="cgi-bin/aaa.cgi" method="post">
<td align="right"><b>業務１</b></td>
<br>
<td>
<input type="checkbox" name="gyoumu" value="あああああ">あああああ<br>
<input type="checkbox" name="gyoumu" value="いいいいい">いいいいい<br>
<input type="checkbox" name="gyoumu" value="ううううう">ううううう<br>
</td>

<td align="right"><b>業務２</b></td>
<br>
<td>
<input type="checkbox" name="gyoumu" value="かかかかか">かかかかか<br>
<input type="checkbox" name="gyoumu" value="ききききき">ききききき<br>
<input type="checkbox" name="gyoumu" value="くくくくく">くくくくく<br>
</td>

</form>

<BUTTON type="button">決定</BUTTON>

<p class="BackLink"><a href="#" onClick="window.close(); return false;">サブウィンドウを閉じる</a></p>

</div>

</body>
</html>
--------------------

■global.css
--------------------
#menu{
width:100%;
margin:20px 0 0 20px;
margin:0;
padding:0;
}

.archive{
background:#369;
color:#FFF;
padding:5px 10px;
border-bottom:1px solid #FFF;
}

.subMenu li{
list-style:none;
background-color:#9CF;
padding:5px 10px;
border-bottom:1px solid #FFF;
}
--------------------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： tracer
回答日時：2014/09/18 01:48

ActiveXとフレームの構成は、今でもIE限定で使えなくはないですが、10年以上前のものです。

また、ソースを見る限り、テーブルレイアウトというかなり古いコーディングを採用されていますね。
今なら、exeにあたるアプリケーションは、サーバーサイドで作って、通信はAjax(JavaScript)を用います。メニュー部とコンテンツ部のレイアウトはすべてCSSだけで解決できます。

- 0
- 件

通報する

No.2

回答者： taloo
回答日時：2014/09/16 09:28

まず1段階目として、HTMLの話です。

JavaScriptを一切考えずに、

「どの画面をどのフレームに表示すれば良いか」
「表示したいフレームを指定するには、どのフレームname （ target 属性）を指定すれば良いか」

というのを考えてみてください。

---------------------------
２段階目として、フレームを使わない画面を作ってください。

その画面だけで、ボタンを押すと、ページ内の他の場所に新しくボタンを生成したり、削除するJavaScriptを作ってみてください。

もうちょっと例を言うと、

<div id="output">おはよう</div>
<BUTTON type="button">決定</BUTTON>

上記「決定」ボタンを押すと、「おはよう」という文字を消して「こんにちは」に書き換える処理を作ってみてください。

---------------------------
３段階目として、1段階目で作ったフレームを、２段階目で作った画面と連携（画面間通信）させてください。

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2014/09/16 08:06

HTMLじゃなくて、普通にCか何かでプログラム書いたほうが良いですね。

HTMLはHyper Text Markup Languageで、最終的にウェブ上の他の文書への（からの）リンクが目的ですから・・
　何らかのCGIにリンクするとするのでしたら・・

HTML・・frameは今は使いません。1999年のHTML4.01(XHTML1.0)で非推奨、以後のHTML/XHTMLではありません。当然(<!DOCTYPE html>)では存在すらしない。

　他の手法を目指したほうが良いでしょう。HTMLで行うならシンプルに、リンクで分岐させるなり、CGIを使うなり。