Data Bind


ｸﾞﾙｰﾌﾟ、ﾒﾝﾊﾞｰの選択

＼^o^／　 ﾒﾝﾊﾞｰ =(^。^)=
,


ﾒﾝﾊﾞｰ名: ,

項目 朝食 昼食 夕食

　

　

ﾎｰﾑ　へ　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　Data Bind js　　data_bind_js.htm

XMLﾌｧｲﾙのﾃﾞｰﾀを、ﾎﾞﾀﾝ選択・ｽｸﾛｰﾙでﾃｰﾌﾞﾙに表示。　　　 20人の一週間の献立（例）。　　 　　　　DHTML、XML。　　　　　　ﾃﾞｰﾀﾍﾞｰｽの 編集はﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　Internet Explorer5.x〜対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ。

ﾃﾞﾓは、[ > ] [ >| ] や、ﾒﾝﾊﾞｰ名などのｸﾘｯｸで。　　　　※:ﾃﾞｰﾀは、架空値。　　互換表示・設定で。

　

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、data_bind_js.htm、data_bind.dtd、data_bind.xml を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装方法は、data_bind_js.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名） の、 <head>　〜　</head> の任意の行間に (*1)を、さらに <body>　〜　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

　･　編集方法は、hogehoge.html を WordPad や SmipleTextなどのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。　　　　下記の（例） (*1) と、(*2)〜 を参考に太字部分の編集を任意に行います。　 　　 列数〔朝食、……など〕の変更は、data_bind.dtd　の編集も。　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 8.x〜 などで開いて。　　　　更新の確認は、ie、Safariやｻｰﾊﾞｰからのｷｬｯｼｭﾃﾞｰﾀｰ更新を、目的のﾍﾟｰｼﾞを表示し ieで [F5]ｷｰ を押し最新ﾃﾞｰﾀ読み込みで行います（≠再ｱｸｾｽ）。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.dtd、*.xml なども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

　･　関連情報 ： 色記号5、〃6、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門。　　　Web Development、Web開発、IE10 互換性ｸｯｸﾌﾞｯｸ、〃開発者向けｶﾞｲﾄﾞ、IE API ﾘﾌｧﾚﾝｽ、IE 開発 > HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄ ﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、XML、〃ﾘﾌｧﾚﾝｽ、DHTML。

(*1) ：data_bind_js.htm （例）　　　　　　　　　挿入先の 　<head> 〜 </head>　の、〜 部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　  (*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕  　

ｼﾌﾄJIS使用（削除不可）

ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

<style type= 〜  </style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景

body 文字色　背景色　下線
ﾊｲﾊﾟｰﾘﾝｸ 〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
ﾌｫﾝﾄ

　

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent
お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

 　

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {
font-size:12px;
line-height:13px;
}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ　　Data Bind - XML js</title>

(*2) ：　data_bind_js.htm （例）　　　　　　　　挿入先の 　<body> 〜 </body>　の、〜 部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　  (*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

背景　ﾘﾝｸ　表示済みﾘﾝｸﾝｸ　ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値）

　

　

選択実行背景色

　

　

選択実行背景色
ﾎﾟｲﾝﾄ背景色

　

　

　

　

背景色　

　

　

　

表幅　　罫線色

左表ｻｲｽﾞ　背景食　表ﾀｲﾄﾙ　

内表ｻｲｽﾞ左　右　

　

背景色　　列ﾀｲﾄﾙ

　

　

背景色　ﾎﾞﾀﾝ文字列

　

　

右表ｻｲｽﾞ　背景食　表ﾀｲﾄﾙ　

　

　

内表ｻｲｽﾞ　

　

背景色　　列ﾀｲﾄﾙ　

 　

<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

<!--　★　-----------　↓ この間をコピー＆ペーストします。 ------------　-->
<!--webbot bot="HTMLMarkup" startspan -->
<h2>Data Bind</h2>

====  この間､説明を省略｡  ====

//document.all.listTable.rows(1).cells(1).style.backgroundColor = "#FFFFA5";

====  この間､説明を省略｡  ====

element = element.parentElement;

if (!(element.style.backgroundColor == "#FFFFA5"))
element.style.backgroundColor = "#E3ECB2";

}

function mouseOut() {

var element = window.event.srcElement;

while (element.tagName != "TD")
element = element.parentElement;

if (!(element.style.backgroundColor == "#FFFFA5"))
element.style.backgroundColor = "white";
}

====  この間､説明を省略｡  ====

<!--webbot bot="HTMLMarkup" endspan -->

<!--webbot bot="HTMLMarkup" startspan -->
</p>
<table BORDER="0" WIDTH="100%" RULES="cols" FRAME="above" bgcolor="#48006F" cellspacing="1">
<tr>
<td ALIGN="middle" VALIGN="top" WIDTH="30%" bgcolor="#E4EAF8"><b>
　　ｸﾞﾙｰﾌﾟ、ﾒﾝﾊﾞｰの選択<br>
</b>　　　<table ID="listTable" DATASRC="#xmldso" BORDER="1" CELLPADDING="5" DATAPAGESIZE="5" BGCOLOR="#FFFFFF" WIDTH="220" cellspacing="0" height="200">
<colgroup>
<col WIDTH="60"><col WIDTH="160">
</colgroup>
<thead>
<tr>
<th bgcolor="#DED9D3">＼^o^／　</th>
<th bgcolor="="#F3F1F5">ﾒﾝﾊﾞｰ (^ ^)</</th>
</tr>
</thead>
<tbody onclick=rowclick()>
<tr>
<td bgcolor="#F0EAEB"><font>
<input id="SelectB" Type="button" value="ﾃﾞｰﾀ表示" style="background:#4C8700;color:#FFFFFF;"></font> </td>
<td onMouseOver=mouseOver() onMouseOut=mouseOut()>
<span DATAFLD="LNAME"></span>, <span DATAFLD="FNAME"></span></td>
</tr>
</table>
<p><br>
<input ID="first" TYPE="button" VALUE="はじめ" onClick="firstPage();" style="background:#008A9F;color:#FFFFFF;">
<input ID="prev" TYPE="button" VALUE="← 前ﾍﾟｰｼ" onClick="prevPage();" style="background:#65009F;color:#FFE4EC;" >
<input ID="next" TYPE="button" VALUE="次ﾍﾟｰｼﾞ →" onClick="nextPage();" style="background:#622C81;color:#FFE4EC;">
<input ID="last" TYPE="button" VALUE="おしまい" onClick="lastPage();" style="background:#692968;color:#FFFFFF;"> </td>
<td ALIGN="middle" VALIGN="top" WIDTH="70%" bgcolor="#F2EAFF">
<h4>ﾒﾝﾊﾞｰ名: <span DATASRC="#xmldso" DATAFLD="LNAME"></span>,
<span DATASRC="#xmldso" DATAFLD="FNAME"></span></h4>
<table DATAFLD="COURSE" DATASRC="#xmldso" BORDER="1" CELLPADDING="5" BGCOLOR="#FFFFFF" WIDTH="530" cellspacing="0" height="450">
<colgroup>
<col WIDTH="40"><col WIDTH="100"><col WIDTH="100"><col WIDTH="100">
</colgroup>
<thead>
<tr>
<th bgcolor="#E0DAD3">項目</th>

====  この間､説明を省略｡  ====

</td>
</tr>
</table>
<!--webbot bot="HTMLMarkup" endspan -->
<!--　★　-----------　↑ この間をコピー＆ペーストします。 ------------　-->

　

(*3) ：　data_bind.xml （例）　　　　　　　　ﾃﾞｰﾀの記述用のﾃｷｽﾄﾌｧｲﾙ。　　Wordpad などのﾃｷｽﾄｴﾃﾞｨﾀｰなどで編集します。　

　ＸMLの編集方法　  (*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

　

　

1ﾒﾝﾊﾞｰﾃﾞｰﾀ範囲 ：<STUDENT> から </STUDENT> まで。

氏名

　

ﾃﾞｰﾀ 1（朝食）

ﾃﾞｰﾀ 2（昼食）

ﾃﾞｰﾀ 3（夕食）

項目

ﾃﾞｰﾀ数は任意。 列数の変更は、data_bind.dtd　の編集も。

以下、同様に追加、削除、変更します。

太字表示での省略あり。

 <?xml version="1.0" encoding="shift_jis"?>

<!DOCTYPE REPORTCARD SYSTEM "data_bind.dtd">

<REPORTCARD>

<STUDENT>

<FNAME>奈美恵</FNAME>

<LNAME>安室</LNAME>

<COURSE>

<data1>藪蕎麦、ｺﾞｰﾔﾁｬﾝﾌﾟﾙｰ、蕗炊き合わせ</data1>

<data2>鱧梅酢添え、梭子魚一夜干し、越の寒梅 1本</data2>

<data3>ﾄﾞﾗｲﾏﾃｨｰﾆ、焼き茄子、ﾒﾊﾞﾙ 一夜干し</data3>

<item>日曜日</item>

</COURSE>

<COURSE>

<data1>焼き海苔、素麺、ｺﾞｰﾔﾁｬﾝﾌﾟﾙｰ 1皿</data1>

<data2>鶏魚一夜干し、水餃子、ｻﾝﾃﾐﾘｵﾝ</data2>

====  この間､説明を省略｡  ====

</STUDENT>

</REPORTCARD>　

< 補足 >　　　　適時参照あれ！。

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。