XMLの考慮事項2024 年の最新の入門チュートリアル。このコースでは Internet Explorerの - XMLデータアイランド,XMLデータアイランドインスタンス,例,Internet Explorerの - 行動,例1 - マウスホバーハイライト,例2 - タイプライターシミュレーション, について学習できます。
XMLの考慮事項
ここでは、XML技術を使用する際に利用するのは避けるべきリストです。
Internet Explorerの - XMLデータアイランド
何それ?HTMLページのXMLデータに埋め込まれたXMLデータアイランド。
なぜあなたはそれを避ける必要がありますか?XMLデータアイランドは、Internet Explorerブラウザでのみ有効です。
何がそれを置き換えますか?あなたは、XMLを解析して表示するHTML、JavaScriptとXMLのDOMを使用する必要があります。
JavaScriptとXML DOMの詳細については、私たちの訪問XML DOMチュートリアルを 。
XMLデータアイランドインスタンス
この例では、「XML文書を使用していますcd_catalog.xml 。」
XML文書は、<XML>タグ内のHTML文書にバインドされています。 id属性は、XMLファイルにデータアイランドの識別子と、src属性を定義します。
例
この例では、IEブラウザにのみ適用されます
<html>
<body>
<xml id="cdcat" src="cd_catalog.xml"></xml>
<table border="1" datasrc="#cdcat">
<tr>
<td><span datafld="ARTIST"></span></td>
<td><span datafld="TITLE"></span></td>
</tr>
</table>
</body>
</html>
»をお試しください DATASRC属性XMLデータアイランドにバインドされたHTMLテーブルの<表>タグ。
<スパン>タグがDATAFLD属性が表示されるXML要素を参照することができます。 この例では、「ARTIST」と「TITLE」を参照することができます。 XMLを読み込むとき、各<CD>要素に対応するテーブルの行を作成します。
Internet Explorerの - 行動
何それ?Internet Explorer 5が動作を導入しました。 動作は、XML(またはHTML)の要素にCSSスタイルを使用して動作を追加する方法です。
なぜあなたはそれを避ける必要がありますか?唯一のInternet Explorerは動作プロパティをサポートしています。
何がそれを置き換えますか?それを置き換えるためにJavaScriptとXML DOM(またはHTML DOM)を使用しました。
例1 - マウスホバーハイライト
<H1>要素の次のHTMLファイルの<style>要素には、動作を定義します:
<html>
<head>
<style type="text/css">
h1 { behavior: url(behave.htc) }
</style>
</head>
<body>
<h1>Mouse over me!!!</h1>
</body>
</html>
以下に示す(このファイルには、要素のいくつかのJavaScriptとイベントハンドラが含まれている)は、XML文書「behave.htc」です。
<attach for="element" event="onmouseover" handler="hig_lite" />
<attach for="element" event="onmouseout" handler="low_lite" />
<script>
function hig_lite()
{
element.style.color='red';
}
function low_lite()
{
element.style.color='blue';
}
</script>
»をお試しください 例2 - タイプライターシミュレーション
次のHTMLファイルの<style>要素のidは、要素の「タイピング」のためのアクションを定義しています。
<html>
<head>
<style type="text/css">
#typing
{
behavior:url(typing.htc);
font-family:'courier new';
}
</style>
</head>
<body>
<span id="typing" speed="100">IE5 introduced DHTML behaviors.
Behaviors are a way to add DHTML functionality to HTML elements
with the ease of CSS.<br /><br />How do behaviors work?<br />
By using XML we can link behaviors to any element in a web page
and manipulate that element.</p>v
</span>
</body>
</html>
XML文書「typing.htc」は下記に示します:
<attach for="window" event="onload" handler="beginTyping" />
<method name="type" />
<script>
var i,text1,text2,textLength,t;
function beginTyping()
{
i=0;
text1=element.innerText;
textLength=text1.length;
element.innerText="";
text2="";
t=window.setInterval(element.id+".type()",speed);
}
function type()
{
text2=text2+text1.substring(i,i+1);
element.innerText=text2;
i=i+1;
if (i==textLength)
{
clearInterval(t);
}
}
</script>
»をお試しください