動的表示
動的表示
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" />
<title>動的表示</title>
<script src="../js/prototype.js" type="text/Javascript"></script>
<script src="../js/test4.js" type="text/Javascript"></script>
</head>
<body>
<form id=frm name=frm>
<input type=radio name=rdo>うらしまたろう<br />
<input type=radio name=rdo>ももたろう<br />
<input type=radio name=rdo>かぐやひめ<br />
<table><tr><td style="width:200px">
<div id=dispMessage></div>
</td></tr></table>
</form>
</body>
</html>
<!--
------------------------------------------------------------------------
test4.js
//画面が呼ばれると実行されます
window.onload = function()
{
//初期化処理
init();
//イベント等を登録します
Event.observe
(
'frm', 'click',
changeRadioButton
);
}
//処理に使用するオブジェクト
var objRadio; //ラジオボタン
var objDisplay; //画面に表示する内容
//初期化処理
function init()
{
//ラジオボタンをインスタンス化します
objRadio = new clsRadio( document.frm.rdo );
//ラジオボタンの切り替えに必要なページ（URL）を準備します
var urlPage =
{
0 : 'story1.html',
1 : 'story2.html',
2 : 'story3.html'
}
//ラジオボタン切り替え時に画面に表示させるエリアを準備します
objDisplay = new clsDisplay( urlPage, 'dispMessage' );
}
//ラジオボタンが切り替わった処理
function changeRadioButton()
{
//選択されたインデックスを取得します
var rdoNo = objRadio.getSelectNo();
//画面に選択した内容を反映します
objDisplay.changeDisplayStory( rdoNo );
}
//ラジオボタン用のクラスオブジェクトを生成します
var clsRadio = Class.create();
clsRadio.prototype =
{
frmRadio : null
,
initialize : function( frmRadio )
{
this.frmRadio = frmRadio;
}
,
//選択されたインデックスを取得します
getSelectNo : function(){
for( i = 0; i < this.frmRadio.length; i++ )
{
//チェックのあるラジオボタンのインデックスを返します
if( this.frmRadio[i].checked )
{
return i;
}
}
return null;
}
};
//画面表示用のクラスオブジェクトを生成します
var clsDisplay = Class.create();
clsDisplay.prototype =
{
urlPage : null
,
ajaxID : null
,
ajaxOption : {
method : 'get'
,
//更新処理に失敗した場合、次の処理を実行
onFailure : function()
{
alert( "表示処理に失敗しました。" );
}
}
,
//コンストラクタ
initialize :
function( urlPage, ajaxID )
{
this.urlPage = urlPage;
this.ajaxID = ajaxID;
}
,
//画面に選択した内容を反映します
changeDisplayStory : function( rdoNo )
{
//「Ajax.Updater」
//指定したURLの内容に置き換えます
//第1引数:id
//第2引数:url
//第3引数:オプション
var objAjax = new Ajax.Updater
(
this.ajaxID,
this.urlPage[rdoNo],
this.ajaxOption
);
}
};
------------------------------------------------------------------------
-->
|
|