ホーム へ サンプルページ XML/XSL-Views xml_xsl_views.htm
XML、XSLの構造、ソースサンプル、ブラウザーでのマルチビュー。 XML、XSL。 データなどのカスタマイズはテキストエディターなどで可。 Internet Explorer5.x〜 対応。 コピー、編集し、簡単にWebで応用できまっ、(^ ^)。
デモは、multiple_js.htm multiple_vbs.htm で、絵画の入札(例)、3点。 データは、全て架空値。
< ご使用方法 >
・ ローカル(=PC)への保存は、xml_xsl/ をクリック開いたホルダーで、23個のファイルを個別に、 [対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。 ※: 変わってしまったファイル名や、*.html 中のパスは要修正。
・ このDHTMLの実装方法は、*.htm、*.xml、*.xsl をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。
・ 編集方法は、*.htm、*.xml、*.xsl をテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。 下記の(例) (*1) と、(*2)〜 を参考に太字部分の編集を任意に行います。 ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。
・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。 更新の確認は [F5]キー を押し、サーバーやブラウザーのキャッシュクリアー、最新データ読み込み(≠再アクセス)で行います。
・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.htm、*.xml、*.xsl なども転送/配置し実施。 ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。 FTPなどで変わったファイル名は要修正。 スクリプト構文中への改行混入は非作動原因。
・ 関連情報 : 色記号6、2、スタイルシートリファレンス、ホームページ開設入門が便利!。 Web Development、Web開発、MSDN IE8 HTMLとCSS、開発ツールでサイトを修正、スクリプト デバッグの概要、HTMLとCSSのサポート、CSSの改良点、IE7、IE6、XML、DHTML。
(*1) : auction1.xml (例) データ Wordpadなどのテキストエディターで編集します。
HTMLの編集方法 | (*1) をテキストエディターで開き、下記↓の太字部分を編集し使用。 |
〔この列ペースト不要〕
|
<?xml version="1.0" encoding="shift_jis"?> <AUCTIONBLOCK> <ITEM> <TITLE>作品 XX0009</TITLE> <ARTIST>F A W ギヨーム</ARTIST> <DIMENSIONS>450x700 mm</DIMENSIONS> <MATERIALS>油絵</MATERIALS> <YEAR>2010</YEAR> <DESCRIPTION>Still Life</DESCRIPTION> <PREVIEW-SMALL src="burl-s.jpg" width="300" height="194" alt="作品 XX0009"/> <BIDS> <BID> <PRICE>6000</PRICE> <TIME>3:02:22 PM</TIME> <BIDDER>安室 奈美恵</BIDDER> <TIMESTAMP>1317</TIMESTAMP> </BID> ==== この間、説明を省略。 ==== <TIMESTAMP>1317</TIMESTAMP> </ITEM> </AUCTIONBLOCK> |
(*2) : controls_js.htm (例) 左フレーム - メニュー Wordpadなどのテキストエディターで編集します。
HTMLの編集方法 | (*2) をテキストエディターで開き、下記↓の太字部分を編集し使用。 |
〔この列ペースト不要〕
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>サンプルページ XML/XSL-Views</title> <STYLE> ==== この間、説明を省略。 ==== </STYLE> </head> <SCRIPT> ==== この間、説明を省略。 ==== { if (!viewingSrc) { changeXML(styleURL); changeXSL("raw-xml.xsl"); viewingSrc = true; } } </SCRIPT> <SCRIPT> // ----- Scripts to activate buttons ------ ==== この間、説明を省略。 ==== changeXML("auction1.xml"); changeXSL("raw-xml.xsl"); } </SCRIPT> <body bgcolor="#F4EEFB" link="#54006C" vlink="#62000D" alink="#00FFFF"> <!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END --> <DIV CLASS="headline"><b>XML/XSL 構造一覧</b></DIV> <DIV CLASS="instructions"> <B>XML データファイル、XSL スタイルシート</B> <br> <br> </DIV> <DIV CLASS="group"><b>XML データファイル</b><DIV CLASS="button" ID="first-XML-item" onMouseOver="over(this)" onMouseOut="out(this)" onClick='changeXML("auction1.xml"); select("xml",this)'> auction1.xml<SPAN CLASS="arrow">4</SPAN> </DIV> <DIV CLASS="button" onMouseOver="over(this)" onMouseOut="out(this)" onClick='changeXML("auction2.xml"); select("xml",this)'> auction2.xml<SPAN CLASS="arrow">4</SPAN> </DIV> <DIV CLASS="button" onMouseOver="over(this)" onMouseOut="out(this)" onClick='changeXML("auction3.xml"); select("xml",this)'> auction3.xml<SPAN CLASS="arrow">4</SPAN> </DIV> </DIV> <p> </p> <DIV CLASS="instructions"> XMLデータを MSXML Parser で表示。 </DIV> <DIV CLASS="group"><b>XSL スタイルシート</b><DIV CLASS="button" ID="first-XSL-item" onMouseOver="over(this)" onMouseOut="out(this)" onClick='changeXSL("raw-xml.xsl"); select("xsl",this)'> XMLソース: raw-xml.xsl<SPAN CLASS="arrow">4</SPAN> </DIV> <DIV CLASS="button" onMouseOver="over(this)" onMouseOut="out(this)" onClick='changeXSL("bids-table.xsl"); select("xsl",this)'> 基本1: bids-table.xsl<SPAN CLASS="arrow">4</SPAN> </DIV> ==== この間、説明を省略。 ==== onMouseOver="over(this)" onMouseOut="out(this)" onClick='viewXSL(); select("xml",this)'> view xsl stylesheet<SPAN CLASS="arrow">4</SPAN> </DIV> </DIV> <p> </p> <p> </p> <P><HR><font color="black" face="ms sans serif" size="1">©<a href="http://www./……/xxx.html" target="_blank"> hogehoge All rights reserved.</a></font> </body> </html> |
(*3) : multiple_js.htm (例) フレーム Wordpadなどのテキストエディターで編集します。
HTMLの編集方法 | (*3) をテキストエディターで開き、下記↓の太字部分を編集し使用。 |
〔この列ペースト不要〕
|
<!--TOOLBAR_START--><!--TOOLBAR_EXEMPT--><!--TOOLBAR_END--> <HTML> <HEAD> <TITLE>XML/XSL Viewer Demo</TITLE> </HEAD> <SCRIPT FOR="window" EVENT="onload"> controls.init(); </SCRIPT> <FRAMESET COLS="200,*" FRAMEBORDER="0" BORDER="no" FRAMESPACING="0"> <FRAME ID="controls" SRC="controls_js.htm" SCROLLING="no"> <FRAME ID="results" SRC="results_js.htm"> </FRAMESET> </HTML> |
(*4) : results_js.htm (例) 右フレーム Wordpadなどのテキストエディターで編集します。
HTMLの編集方法 | (*4) をテキストエディターで開き、下記↓の太字部分を編集し使用。 |
〔この列ペースト不要〕
|
<!--TOOLBAR_START--><!--TOOLBAR_EXEMPT--><!--TOOLBAR_END--> <HTML> <SCRIPT> ==== この間、説明を省略。 ==== </SCRIPT> <body bgcolor="#F4EEFB" link="#54006C" vlink="#62000D" alink="#00FFFF"> <DIV id="xslresult"> <!-- resulting HTML will be inserted here --> </DIV> <DIV id="xsldebug"> <!-- resulting HTML source will be inserted here --> </DIV> <p> </p> <p> </p> <p> </p> <HR> <font color="black" face="ms sans serif" size="1">©<a href="http://www./……/xxx.html" target="_blank"> hogehoge All rights reserved.</a></font> </body> </html> |
(*5) : bids-table.xsl (例) Wordpadなどのテキストエディターで編集します。
HTMLの編集方法 | (*5) をテキストエディターで開き、下記↓の太字部分を編集し使用。 |
〔この列ペースト不要〕
|
<?xml version="1.0" encoding="shift_jis"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> ==== この間、説明を省略。 ==== </xsl:template> </xsl:stylesheet> |
(*6) : summary.xsl (例) Wordpadなどのテキストエディターで編集します。
HTMLの編集方法 | (*6) をテキストエディターで開き、下記↓の太字部分を編集し使用。 |
〔この列ペースト不要〕
|
<?xml version="1.0" encoding="shift_jis"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> ==== この間、説明を省略。 ==== <xsl:attribute name="src"><xsl:value-of select="PREVIEW-SMALL/@src"/></xsl:attribute> <xsl:attribute name="width"><xsl:value-of select="PREVIEW-SMALL/@width"/></xsl:attribute> <xsl:attribute name="height"><xsl:value-of select="PREVIEW-SMALL/@height"/></xsl:attribute> <xsl:attribute name="alt"><xsl:value-of select="PREVIEW-SMALL/@alt"/></xsl:attribute> </IMG> </TD> ==== この間、説明を省略。 ==== </DIV> </TD> </TR> </TABLE> </xsl:for-each> </DIV> </xsl:template> </xsl:stylesheet> |
< 補足 > 適時参照あれ!。