ホーム へ サンプルページ データベース 13 database13.htm
フィルター抽出・ソート表、データ(名前・概要・数値・場所・生業など)はXMLファイルに記述。 DHTML、XML、XSL、HTC。 データ、表構造などのカスタマイズはテキストエディターなどで可。 all 対応。 コピー、編集し、簡単にWebで応用できまっ、(^ ^)。
デモは、分類キーワード(場所・Type・対象)でのフィルーター抽出や、列タイトルのクリックでの昇降順ソートなどで。 互換表示・設定で。
< ご使用方法 >
・ ローカル(=PC)への保存は、database13/をクリック開いたホルダーで、database13.htm、033021.xml、033021.css、033020.htc、033021.xsl、033022.xsl、dd_down.gifほかを右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。 ※: 変わってしまったファイル名や、*.html 中のパスは要修正。
・ このDHTMLの実装方法は、database13.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに
<body> 〜 </body>の任意の行間に (*2) をペーストします。
・ 編集方法は、hogehoge.html をテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。 下記の(例) (*1) と、(*2)〜 を参考に太字部分の編集を任意に行います。 ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。
・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。 更新の確認は [F5]キー を押し、サーバーやブラウザーのキャッシュクリアー、最新データ読み込み(≠再アクセス)で行います。
・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像
、*.xml、*.xsl、*.htc、*.css なども転送/配置し実施。 ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。 FTPなどで変わったファイル名は要修正。 スクリプト構文中への改行混入は非作動原因。
・ 関連情報 :
色記号5、〃6、スタイルシートリファレンス、ホームページ開設入門。 Web Development、Web開発、IE10
互換性クックブック、〃開発者向けガイド、IE
API リファレンス、IE 開発
> HTMLとCSS、開発ツールでサイトを修正、スクリプト デバッグの概要、HTMLとCSSのサポート、CSSの改良点、XML、〃リファレンス、DHTML。
(*1)
: database13.htm (例) 挿入先の <head> 〜 </head> の、〜 部分にペーストします。
|
HTMLの編集方法 |
(*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
〔この列ペースト不要〕
シフトJIS使用(削除不可)
互換表示
ieなどに表示するアイコンファイル名(削除可)
<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}
--></style>
<base target="_blank">
<!-- ☆ ----------- ↓ この間をコピー&ペーストします。
------------ -->
<!--
==== この間、説明を省略。 ====
<link href="033021.css" rel="stylesheet">
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5"></HEAD>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
|
(*2)
: database13.htm (例) 挿入先の <body> 〜
</body> の、〜
部分にペーストします。
|
HTMLの編集方法 |
(*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
〔この列ペースト不要〕
※:<body> 部の編集 背景 リンク 表示済みリンクンク アクティブリンクの各色(任意値)
表
フィルター
背景画像
背景画像
抽出フォーム 背景画像
|
<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">
<!-- ★ ----------- ↓ この間をコピー&ペーストします。
------------ -->
<form method="post" action="" name="frmData">
<div id="divHeader" style="Z-INDEX: 34; LEFT: 2px; WIDTH:
803px; POSITION:
absolute; TOP: 120px; HEIGHT: 149px">
==== この間、説明を省略。 ====
<th id="thdr" width="20" SortField="ID" class = "SortingGridUp">No.</th>
<th id="thdr" width="110" SortField="FullName" class =
"SortingGridUp">名前</th>
<th id="thdr" width="260" SortField="Description" class =
"SortingGridUp">概要</th>
<th id="thdr" width="60" SortField="Age" class = "SortingGridUp">数値</th>
<th id="thdr" width="77" SortField="Location" class =
"SortingGridUp">場所</th>
<th id="thdr" width="100" SortField="Occupation" class =
"SortingGridUp">対象</th>
<th id="thdr" width="150" SortField="Hobbies" class =
"SortingGridUp">生業</th>
==== この間、説明を省略。 ====
<div id="main" style="LEFT: 0px; WIDTH: 859px; POSITION: absolute; TOP:
410px; HEIGHT: 29px" tabIndex="11">
<div id="divSearch" style="LEFT: 2px; WIDTH: 804px; POSITION: absolute; TOP:
-408px; HEIGHT: 27px">
<table ID="tblSearchFields" border=1 bgcolor="menu" width="100%">
<tr>
<td
background="../tab_menu12/30tbsd1.gif">
場所 :
<SELECT ID="selLocation" NAME="selLocation" onchange="doFilter()">
<OPTION selected value="西海岸">西海岸</OPTION>
<OPTION value="外房海岸">外房海岸</OPTION>
<OPTION value="海部川">海部川</OPTION>
<OPTION value="庭">庭</OPTION>
</SELECT>
</td>
<td
background="../tab_menu12/30tbsd1.gif">
Type :
海 <INPUT type="radio" value="海" NAME="radType"onclick=doFilter() checked>
陸 <INPUT type="radio" value="陸" NAME="radType" onclick=doFilter()>
</td>
<td
background="../tab_menu12/30tbsd1.gif">
対象 :
<SELECT ID="selOccupation" NAME="selOccupation" onchange="doFilter()">
<OPTION selected value="Not Allowed">Not Allowed</OPTION>
<OPTION value="鮃・鱸・鰈">鮃・鱸・鰈</OPTION>
<OPTION value="渡り鳥・風">渡り鳥・風</OPTION>
<OPTION value="鮎・鰻・岩おやつ">鮎・鰻・岩おやつ</OPTION>
<OPTION value="おやつ">おやつ</OPTION>
<OPTION value="ミルク">ミルク</OPTION>
</SELECT>
</td>
<td background="../tab_menu12/30tbsd1.gif"
width="78">
<Input type=button value="全表示"id=btnShowAll0 name=btnShowAll0
onclick="doShowAll()"></td>
</tr>
</table>
</div>
<div id="divDataFields" style="LEFT: 2px; WIDTH: 804px; POSITION: absolute;
TOP: -379px; HEIGHT: 77px; background-image:
url('../wttec.gif'); border:1px
solid #E1DCEB">
<table >
<tr>
<td>
名前 : <input id="txtFullName" DATASRC="#xmlDSO" DATAFLD="FullName"
style="WIDTH: 100px">
数値 : <input id="txtAge" DATASRC="#xmlDSO" DATAFLD="Age" style="WIDTH: 20px"
NAME="txtAge">
概要 : <input id="txtDescription" DATASRC="#xmlDSO" DATAFLD="Description"
style="WIDTH: 250px">
</td>
</tr>
<tr>
<td>
場所 : <input id="txtLocation" DATASRC="#xmlDSO" DATAFLD="Location"
style="WIDTH: 67px">
対象 : <input id="txtOccupation" DATASRC="#xmlDSO" DATAFLD="Occupation"
style="WIDTH: 100px" NAME="txtOccupation">
生業 : <input id="txtZipCode" DATASRC="#xmlDSO" DATAFLD="Hobbies"
style="WIDTH: 75px" NAME="txtZipCode">
収穫 : <input id="Text3" DATASRC="#xmlDSO" DATAFLD="Income" style="WIDTH:
93px" NAME="Text3">
</td>
</tr>
</table>
<p> </div>
<!-- Last but not least are the buttons that basically do not do anything.
If you click on them, they will tell you. -->
<div id="divPhoto" style="LEFT: 639px; WIDTH: 150px; POSITION: absolute;
TOP: -372px; HEIGHT: 100px">
==== この間、説明を省略。 ====
<xml id="xslSorted" src="033022.xsl"></xml>
<xml id="xslFilter" src="033021.xsl"></xml>
<xml id="xmlDSO" src="033021.xml"></xml>
<!-- Note: the reason for the xmlDSOorig data island is that the xmlDSO data
island becomes repopulated after
a filtering is performed. If you try to filter a second time, you will need
to start from the original contents. -->
<xml id="xmlDSOorig" src="033021.xml"></xml>
==== この間、説明を省略。 ====
</script>
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
|
(*3)
: 033021.xml (例) テキストエディターで開き、編集しhogehoge.htmlと同ディレクトリーに転送・配置します。
|
*.xml の編集方法 |
(*3)をテキストエディターで開き、下記↓の太字部分を編集し使用。 |
|
〔この列ペースト不要〕
データ
画像
以下、同様。
|
<?xml version="1.0" encoding="shift_jis"?>
<root>
<data ID="01" FullName="砂浜 満ち潮1" Description="遙か彼方に、穏やかな水平線。" Age="10"
Location="外房海岸" Occupation="鮃・鱸・鰈" Income="100尾" Hobbies="早朝の散歩" Type="海"
EmpPhoto="http://xml-xsl.sakura.ne.jp/xp01159t.jpg"/>
==== この間、説明を省略。
====
<data ID="30" FullName="鼻白ちび2" Description="これは、なんだろう?" Age="1" Location="庭"
Occupation="ミルク" Income="1皿" Hobbies="寝る・食う・遊ぶ" Type="陸"
EmpPhoto="http://xml-xsl.sakura.ne.jp/Z17A1L_sl.jpg" />
</root>
|
< 補足 > 適時参照あれ!。
・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。