形から入るWEBアプリ

2011年02月03日

showModalDialog の使い方と使う場所

WEB では一般のテキストエリア毎に機能を持たすより、拡張入力としてテキストエリアを入力する為だけのダイアログを表示させるといいと思います。

※ 単純にページを用意する場合は同一ドメインである必要があります
※ Opera では、showModalDialog を使う事はできません

テストページ

http://toolbox.winofsql.jp/sample/callModalDialog.htm

このテストページでは、「参照」ボタンにより現在の内容がダイアログに転送されて、テキストエリア入力が可能になり、ダイアログ側で変更した後に、「OK」ボタンで元のテキストエリアに変更したデータが転送されます。

このダイアログ内では、テキストエリア内で TAB キーが有効で、選択した状態で TAB キーを使うと一括で全ての行に TAB を挿入します。
( SHIFT+TAB で TAB を削除 )

呼び出す側のページ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=shift_jis" http-equiv="Content-Type">
<title>モーダルダイアログの呼び出し</title>
<style type=text/css>
* {
	font-size: 12px;
}

textarea {
	width:600px;
	height:200px;
}
</style>
<script type=text/javascript>
// *********************************************************
// 参照用ダイアログを開く
// 
// path へ引き渡す値として、
// 1) win	: このウインドウオブジェクト
// 2) target	: 値を戻してほしい id の文字列
// 3) val	: その id にセットされている現在の値
// *********************************************************
function openModalDialog(path,id) {

	var win_param = "";

	win_param += "dialogHeight:450px;";
	win_param += "dialogWidth:720px;";
	win_param += "dialogLeft:200px;";
	win_param += "dialogTop:200px;";

	window.showModalDialog(
		path,
		{ win: window,target: id, val: document.getElementById(id).value },
		win_param
	);
}

</script>
</head>
<body>
<input type="button" value="参照" onclick='openModalDialog("modalDialog.htm", "text")'>
<br>
<textarea id="text">
function dialog_opener_access() {
	try {
		// 処理
		var win = window.dialogArguments.win;
		var target = window.dialogArguments.target;

		win.document.getElementById(target).value =
			document.getElementById("text").value
		window.close();
	}
	catch(e) {
		alert("このページはモーダルダイアログ用です。");
	}
}
</textarea>

<br><br><br>
※ Opera は showModalDialog が使えません
</body>
</html>


呼び出す場合に注意するのは第二引数で、JavaScript のオブシェクトが渡せます。つまり、{} による JSON データを引き渡す事ができるので自由に多くのやり取りが可能になります。

呼び出される側のページ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=shift_jis" http-equiv="Content-Type">
<title>モーダルダイアログ</title>
<style type=text/css>
* {
	font-size: 12px;
}

textarea {
	width:700px;
	height:400px;
}
</style>
<script	type="text/javascript" src="http://lightbox.on.coocan.jp/tabtextarea.js"></script>
<script type=text/javascript>
function dialog_opener_access() {
	try {
		// 処理
		var win = window.dialogArguments.win;
		var target = window.dialogArguments.target;

		win.document.getElementById(target).value = document.getElementById("text").value
		window.close();
	}
	catch(e) {
		alert("このページはモーダルダイアログ用です。");
	}
}
</script>
</head>
<body>
<input type="button" value="OK" onclick='dialog_opener_access()'>
<br>
<script type="text/javascript">
createTabTextArea("text",100,12,"toolbox","width:700px;font-size:13px;","title=\"タブキーが有効です\"");
</script>

<script type=text/javascript>
(function () {
	try {
		var win = window.dialogArguments.win;
		var target = window.dialogArguments.target;

		document.getElementById("text").value = window.dialogArguments.val;
	}
	catch(e) {
		alert("このページはモーダルダイアログ用です。");
	}
})();
</script>

</body>
</html>

関連する記事

クロスドメインで、showModalDialog を使用する

【JavaScriptの最新記事】

posted by lightbox at 12:10 | Comment(0) | JavaScript |

|

2010年11月24日

JavaScript : 無名関数を使用してグローバル領域を汚さない

JavaScript で関数の外で変数を定義してしまうと、グローバル領域を使用
してしまうので、他で使用しているかどうか考慮する必要がありますが、無名
関数を使用すると、そこに一時的なローカルブロックを作成できるので便利です

<!-- JavaScript -->
<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
google.load("prototype", "1.6.1.0");
</script>

<textarea id="result" cols="80" rows=10></textarea>

<script type="text/javascript">
function syain(a,b,c) {

	this.code = a;
	this.name = b;
	this.age = c;
}

var p = Array();

p[0] = new syain("0001","田中", 20 );
p[1] = new syain("0002","鈴木", 21 );
p[2] = new syain("0003","山田", 22 );
p[3] = new syain("0004","中村", 23 );

(function() {
	var work = "";

	for( i = 0; i < p.length; i++ ) {
		work += ( p[i].code + "\t" + p[i].name + "\t" + p[i].age + "\n" );
	}

	$("result").value = work;
})();

try {
	alert(work);
}
catch(e){
	alert(e.message);
}

</script>

posted by lightbox at 13:44 | Comment(0) | JavaScript |

|

JavaScript : Function を同じ種類の入れ物にする

要するに、「オブジェクト」として新たなデータ型を作りたい場合の方法です。
オブジェクトとしては、メソッドも追加できますが、単に「入れ物」で利用する
ところから始めると良いと思います

<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
google.load("prototype", "1.6.1.0");
</script>

<script type="text/javascript">
function syain(a,b,c) {

	this.code = a;
	this.name = b;
	this.age = c;
}

var p = Array();

p[0] = new syain("0001","田中", 20 );
p[1] = new syain("0002","鈴木", 21 );
p[2] = new syain("0003","山田", 22 );
p[3] = new syain("0004","中村", 23 );


function test() {

	var work = "";

	for( i = 0; i < p.length; i++ ) {
		work += ( p[i].code + "\t" + p[i].name + "\t" + p[i].age + "\n" );
	}

	$("result").value = work;
}

</script>
<!-- JavaScript 起動用ボタン -->
<pre>
<input type="button" id="btn" value="実行" onclick='test();'>
<textarea id="result" cols="80" rows=10></textarea>
</pre>

posted by lightbox at 13:29 | Comment(0) | JavaScript |

|

PHP と JavaScript の関数の引数の後から処理

難しく言うと、「可変長引数リスト」の処理方法ですが、引数を定義されている
関数に対しても使えるので、いずれも function のオプション機能を内部で使
っていると考えたほうが自然です。

<?
// 引数の後から処理

function plus() {

	$args = func_get_args();

	$args[0] += $args[1];

	print $args[0];

}

$a = 10;

plus($a, 5);

?>
<!-- JavaScript -->
<script type="text/javascript">
function plus() {

	arguments[0] += arguments[1];

	alert(arguments[0]);

}

var a = 10;
plus(a, 5);

</script>

posted by lightbox at 12:57 | Comment(0) | PHP |

|

PHP : 関数への参照渡しと global キーワードでの変数宣言

PHP では関数の引数は「値渡し」なので、関数内の引数の変数はコピー
されたもので、その内容を変更しても外の変数の内容が変更される事は
ありません。また、仮に外と同じ名前の変数を関数内部で参照しても、
それはローカルのみ有効な別の変数となります。

そこで、PHP では外部の変数を直接参照する方法として参照渡しと global
キーワードによる外部の変数の参照方法という手段があります。

<?
// 参照渡し

function plus( &$a, $b ) {

	$a += $b;
}

$x = 10;
plus($x,5);

print $x;
print "<hr>";

// 後から参照渡し

function minus( $a, $b ) {

	$a -= $b;
}

$x = 10;
minus(&$x,5);

print $x;
print "<hr>";

// 配列を後から参照渡し

function plus2( $a ) {

	$a[0] += $a[1];
}

$y = array(10,5);
plus2( &$y );

print_r( $y );
print "<hr>";

// global キーワード

function plus3() {

	global $z;

	$z[0] += $z[1];
}

$z = array(10,5);
plus3();

print_r( $z );
print "<hr>";


?>

posted by lightbox at 12:34 | Comment(0) | PHP |

|

	showModalDialog の使い方と使う場所
	JavaScript : 無名関数を使用してグローバル領域を汚さない
	JavaScript : Function を同じ種類の入れ物にする
	PHP と JavaScript の関数の引数の後から処理
	PHP : 関数への参照渡しと global キーワードでの変数宣言
	PHP : 関数の中の関数
	PHP : 条件つきで定義される関数
	PHP : 関数名の規則
	PHPを書く時に必要な部品( クリップボード用 )
	JavaScript : コンボボックスの選択状態を操作する
	JavaScript : コンボボックスのテキスト部分を取得
	JavaScript : コンボボックスにリストを挿入する(移動も可)
	簡単にページの右クリックをできなくする
	JavaScript : ページの中の全てを参照する
	JavaScript : ページ内のテーブルのボーダーを設定する
	JavaScript : リロードボタンとリンクボタン
	JavaScript : 任意の要素からの相対位置にウインドウを開く
	JavaScript 用リンク(アンカー)とブラウザ判定 / ブックマークレット登録専用リンク
	JavaScript : ページの最後へ移動するボタン
	JavaScript : ページを半透明にしてプロテクトし、スクロールしない固定ウインドウを開く

	リアルタイム HTML
	リアルタイム JavaScript
	MS : DHTMLリファレンス
	Gecko DOM Reference - MDC
	MS : JScript ステートメント
	JavaScript入門
	Java Script
	IE Tab Plus
	Firebug
	Firebug Console API
	Firecookie
	Firebug Lite
	Google ドメイン内検索
	IE Tab for Google Chrome
	Chromium のダウンロード