function $(id){return document.getElementById(id);}
//var void;if(!void)function void(){return false;}
Dabten.Load({
sample0:'template/basic.txt'
,sample1:'template/sample1.txt'
,sample2:'template/sample2.txt'
,sample3:'template/sample3.txt'
,sample4:'template/sample4.txt'
,sample5:'template/sample5.txt'
});
function samphtml(id){
isSampTable=0;
$('samptpl').value=Dabten.Core.GetTemplate('sample'+id, 'text');
$('sampdata').value=str[id];
var html=Dabten.GetHTML('sample'+id, data[id]);
$('samphtml').value=html;
$('sampdom').innerHTML=html;
viewsource('sampdom');
}//
// この２行を１行で書くことができます。
// var html=Dabten.GetHTML('sample'+id, data[id]);
// document.GetElementById('sampdom').innerHTML=html;
// Dabten.InsertHTML('sampdom','sample'+id, data[id]);
function sampdom(id){
isSampTable=0;
$('samptpl').value=Dabten.Core.GetTemplate('sample'+id, 'text');
$('sampdata').value=str[id];
$('samphtml').value='There is no HTML-Data for DOM OUTPUT';//Template.GetHTML('sample'+id, data[id]);
Dabten.InsertDOM('sampdom','sample'+id, data[id]);
viewsource('sampdom');
}//
/***************
解説用
***************/
function viewsource(page){
$('samptplcontainer').style.display='none';
$('sampdatacontainer').style.display='none';
$('samphtmlcontainer').style.display='none';
$('sampdomcontainer').style.display='none';
$(page+'container').style.display='block';
}
var isSampTable=0;
function samptable(id){
if(id==0){
isSampTable=1;
$('samptpl').value=Dabten.Core.GetTemplate('sample2', 'text');
$('sampdata').value='サンプル２と同じテーブルを使います\n\n'+str[2];
var html=Dabten.GetHTML('sample2', data[2]);
$('samphtml').value=html;
$('sampdom').innerHTML=html;
}else{
if(isSampTable==0){alert('先に初期化してください');return;}
if(isSampTable>=data[5].length)isSampTable=1;
$('samptpl').value='サンプル２のテーブルに追加していきます\n'
+'テンプレートはサンプル２のstudentの部分を抜粋した形になります。\n-------------\n'
+'サンプル２のテンプレート(参考用)\n'+Dabten.Core.GetTemplate('sample2', 'text')
+'\n-------------\n追加データ用テンプレート\n'+Dabten.Core.GetTemplate('sample5', 'text')
$('sampdata').value='サンプル２のテーブルに追加しています\n'
+'サンプル２のデータ(参考用)\n------------\n'+str[2]
+'\n-------------\n追加データ用データ\n'+add[isSampTable];
$('samphtml').value='There is no HTML-Data for DOM OUTPUT';//Template.GetHTML('sample'+id, data[id]);
Dabten.InsertDOM('samptable', 'sample5', data[5][isSampTable], true);
isSampTable++;
}
viewsource('sampdom');
}//
/************************************
// ここから下は表示用のデータです。
// 以下のような形式で、サーバーから動的に受信、ページへの反映ができます。
************************************
// ボタンクリックで呼び出される関数
function buttonOnclick(){
Dabten.Net.Load('test.cgi', funcLoaded, {id:1});
}
// test.cgiからのデータを受信後に呼び出される関数
function funcLoaded(o){
eval(o.client.responseText);
Dabten.InsertDOM('output', 'tplid1', data);
}
------- test.cgiは以下のデータを出力
var data={
name:'Wataru Kanzaki'
,mail:'kanzaki@www.example.com'
,addr:'Kyoto-City, Kyoto Pref.'
};
------ test.cgi ここまで ------
/************************************
// 上記のようなCGIスクリプトの代わりに、このサンプルでは以下のデータを使用します。
************************************/
var data=[];
var str=[];
str[0]="data[0]={id:'dummy'}";
str[1]="data[1]={\n"
+" name:'Wataru Kanzaki'\n"
+" ,mail:'kanzaki@www.example.com'\n"
+" ,addr:'Kyoto-City, Kyoto Pref.'\n"
+"};";
str[2]="data[2]={\n"
+" students:[\n"
+" { img:'std1.gif',width:43,height:50,name:'山田',mail:'yamada@mail1.example.com',addr:'南町', sex:1}\n"
+" ,{ img:'std2.gif',width:45,height:50,name:'岡本',mail:'okamoto@mail1.example.net',addr:'真栄田町', sex:1}\n"
+" ,{ img:'std3.gif',width:44,height:50,name:'楠田',mail:'kusuda@mail1.example.net',addr:'北川町', sex:2}\n"
+" ,{ img:'std4.gif',width:43,height:50,name:'松本',mail:'matsumoto@mail2.example.net',addr:'井手町', sex:2}\n"
+" ,{ img:'std5.gif',width:43,height:50,name:'長野',mail:'nagano@mail1.example.com',addr:'西町', sex:1}\n"
+" ]\n"
+"};";
str[3]="data[3]={\n"
+" teacher:[\n"
+" { img:'teacher.gif',width:85,height:85,name:'一津町',mail:'hitotsumachi@example.com',addr:'車折町', sex:1}\n"
+" ],\n"
+" students:[\n"
+" { img:'std1.gif',width:43,height:50,name:'山田',mail:'yamada@mail1.example.com',addr:'南町', sex:1}\n"
+" ,{ img:'std2.gif',width:45,height:50,name:'岡本',mail:'okamoto@mail1.example.net',addr:'真栄田町', sex:1}\n"
+" ,{ img:'std3.gif',width:44,height:50,name:'楠田',mail:'kusuda@mail1.example.net',addr:'北川町', sex:2}\n"
+" ,{ img:'std4.gif',width:43,height:50,name:'松本',mail:'matsumoto@mail2.example.net',addr:'井手町', sex:2}\n"
+" ,{ img:'std5.gif',width:43,height:50,name:'長野',mail:'nagano@mail1.example.com',addr:'西町', sex:1}\n"
+" ]\n"
+"};";
str[4]="data[4]={\n"
+" title:'１年学年簿'\n"
+" ,summary:'２００７年入学生
１組５名、２組３名、３組６名、４組１２名
人数差が激しいのは何のその'\n"
+" ,classes:[\n"
+" {\n"
+" classname:'１組'\n"
+" ,teacher:{img:'teacher1.gif',name:'一津町先生',mail:'hitotsumachi@example.com',addr:'車折町', sex:1}\n"
+" ,message:'メッセージ１'\n"
+" ,students:[\n"
+" { img:'std1.gif',width:43,height:50,name:'山田',mail:'yamada@mail1.example.com',addr:'南町', sex:1}\n"
+" ,{ img:'std2.gif',width:45,height:50,name:'岡本',mail:'okamoto@mail1.example.com',addr:'真栄田町', sex:1}\n"
+" ,{ img:'std3.gif',width:44,height:50,name:'楠田',mail:'kusuda@mail1.example.com',addr:'北川町', sex:2}\n"
+" ,{ img:'std4.gif',width:43,height:50,name:'松本',mail:'matsumoto@mail1.example.com',addr:'井手町', sex:2}\n"
+" ,{ img:'std5.gif',width:43,height:50,name:'長野',mail:'nagano@mail1.example.com',addr:'西町', sex:1}\n"
+" ]\n"
+" }\n"
+" ,{\n"
+" classname:'２組'\n"
+" ,teacher:{img:'teacher2.gif',name:'大石先生',mail:'ooishi@example.com', addr:'真栄田町',sex:1}\n"
+" ,message:'メッセージ２'\n"
+" ,students:[\n"
+" { img:'std1.gif',width:43,height:50,name:'笠原',mail:'kasahara@mail2.example.com',addr:'百合が本町', sex:1}\n"
+" ,{ img:'std2.gif',width:45,height:50,name:'柴田',mail:'shibata@mail2.example.com',addr:'秋野町', sex:1}\n"
+" ,{ img:'std3.gif',width:44,height:50,name:'岡野',mail:'okano@mail2.example.com',addr:'今井町', sex:2}\n"
+" ]\n"
+" }\n"
+" ,{\n"
+" classname:'３組'\n"
+" ,teacher:{img:'teacher3.gif',name:'黒井先生',mail:'kuroi@example.com', addr:'うちだ町',sex:2}\n"
+" ,message:'メッセージ３'\n"
+" ,students:[\n"
+" { img:'std1.gif',width:43,height:50,name:'岸田',mail:'kishida@mail3.example.com',addr:'今井町', sex:1}\n"
+" ,{ img:'std2.gif',width:45,height:50,name:'横井',mail:'yokoi@mail3.example.com',addr:'東田町', sex:1}\n"
+" ,{ img:'std3.gif',width:44,height:50,name:'横田',mail:'yokota@mail3.example.com',addr:'うちだ町', sex:2}\n"
+" ,{ img:'std4.gif',width:43,height:50,name:'木林',mail:'nandatte@mail3.example.com',addr:'百合が本町', sex:2}\n"
+" ,{ img:'std5.gif',width:43,height:50,name:'土井',mail:'doi@mail3.example.com',addr:'真栄田町', sex:1}\n"
+" ,{ img:'std6.gif',width:43,height:50,name:'神岸',mail:'akari@mail3.example.com',addr:'井手町', sex:1}\n"
+" ]\n"
+" }\n"
+" ,{\n"
+" classname:'４組'\n"
+" ,teacher:{img:'teacher4.gif', name:'花井先生',mail:'ohana@example.com', addr:'東田町',sex:1}\n"
+" ,message:'いろいろ考えるの結構面倒なんですよ。ええ。'\n"
+" ,students:[\n"
+" { img:'std1.gif',width:43,height:50,name:'神崎',mail:'dareda@mail4.example.com',addr:'真栄田町', sex:1}\n"
+" ,{ img:'std2.gif',width:45,height:50,name:'土居',mail:'doichan@mail4.example.com',addr:'北町', sex:1}\n"
+" ,{ img:'std3.gif',width:44,height:50,name:'岸辺',mail:'jiro@mail4.example.com',addr:'西町', sex:2}\n"
+" ,{ img:'std4.gif',width:43,height:50,name:'岡田',mail:'kantoku@mail4.example.com',addr:'中倉町', sex:2}\n"
+" ,{ img:'std5.gif',width:43,height:50,name:'岡本',mail:'momomo@mail4.example.com',addr:'藤が丘町', sex:1}\n"
+" ,{ img:'std6.gif',width:43,height:50,name:'長井',mail:'machigainai@mail4.example.com',addr:'北川町', sex:1}\n"
+" ,{ img:'std7.gif',width:43,height:50,name:'松田',mail:'cardealer@mail4.example.com',addr:'井手町', sex:2}\n"
+" ,{ img:'std8.gif',width:45,height:50,name:'前田',mail:'ushiro@mail4.example.com',addr:'真栄田町', sex:1}\n"
+" ,{ img:'std9.gif',width:44,height:50,name:'畑山',mail:'fighter@mail4.example.com',addr:'北川町', sex:1}\n"
+" ,{ img:'std10.gif',width:43,height:50,name:'東野',mail:'nishihigashi@mail4.example.com',addr:'うちだ町', sex:2}\n"
+" ,{ img:'std11.gif',width:43,height:50,name:'小池',mail:'pon@mail4.example.com',addr:'百合が本町', sex:2}\n"
+" ,{ img:'std12.gif',width:43,height:50,name:'大泉',mail:'koizumi@mail4.example.com',addr:'うちだ町', sex:1}\n"
+" ]\n"
+" }\n"
+" ]\n"
+"};";
str[5]="data[5]=[];";
add=[];
add[0]="data[5][0]={};";
add[1]="data[5][1]={students:{img:'std1.gif',width:43,height:50,name:'神崎',mail:'dareda@mail4.example.com',addr:'真栄田町', sex:1}};";
add[2]="data[5][2]={students:{img:'std3.gif',width:44,height:50,name:'岸辺',mail:'jiro@mail4.example.com',addr:'西町', sex:2}};";
add[3]="data[5][3]={students:{img:'std5.gif',width:43,height:50,name:'岡本',mail:'momomo@mail4.example.com',addr:'藤が丘町', sex:1}};";
add[4]="data[5][4]={students:{img:'std10.gif',width:43,height:50,name:'東野',mail:'nishihigashi@mail4.example.com',addr:'うちだ町', sex:2}};";
add[5]="data[5][5]={students:{img:'std11.gif',width:43,height:50,name:'小池',mail:'pon@mail4.example.com',addr:'百合が本町', sex:2}};";
for(var i=0;i