Data Bind


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

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


ﾒﾝﾊﾞｰ名: ,

項目 朝食 昼食 夕食

　

　

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

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

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

　

　

< ご使用方法 >

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

　・　このVBScript、XMLの実装方法は、data_bind.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.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">

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<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}
H2 {color:#0094BF; background: #D4D0C8 url('bg_slva2r.jpg'); font-family:MS PGothic,MS Gothic; width:100%;}

 --></style>

<base target="_blank">

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

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

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

　

　

ﾀｲﾄﾙﾊﾞｰ 

　

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

　

背景色　

　

　

　

　

表幅　罫線色

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

内表ｻｲｽﾞ左　右

　

背景色　列ﾀｲﾄﾙ

　

　

背景色　ﾎﾞﾀﾝ文字列 　背景色　文字色

　

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

　

内表ｻｲｽﾞ

　

背景色　　列ﾀｲﾄﾙ

　

 　

<body>

<!--　★　-----------　↓ この間をコピー＆ペーストします。 ------------　-->
<!--webbot bot="HTMLMarkup" startspan -->
<h2>　Data Bind</h2>
<a href="#" onclick="self.close()"></a>
<script LANGUAGE="VBScript">

=========　この間、説明を省略　　　　========

if (element.style.backgroundColor <> "#FFFFA5") then
element.style.backgroundColor = "#E3ECB2"

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

if (element.style.backgroundColor <> "#FFFFA5") then
element.style.backgroundColor = "white"
end if
end sub

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

</script>
<!--webbot bot="HTMLMarkup" endspan i-checksum="25033" -->

<!--webbot bot="HTMLMarkup" startspan -->
<xml ID="xmldso" SRC="data_bind.xml" LANGUAGE="VBScript" onload="getState"></xml>
<table BORDER="0" WIDTH="820" RULES="cols" FRAME="above" bgcolor="#48006F" cellspacing="1">
<tr>
<td ALIGN="middle" VALIGN="top" WIDTH="30%" bgcolor="#EFEDF0">
<br><p><b>ｸﾞﾙｰﾌﾟ、ﾒﾝﾊﾞｰの選択</b></p>
<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:#674B7E; color:#BC9BFF;"></font> </td>

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

<td ALIGN="middle" VALIGN="top" WIDTH="70%" bgcolor="#F6F9E6">
<br><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>

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

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

　

(*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>

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

</REPORTCARD>

　

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

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