XML Ne pas
Voici quelques techniques que vous devriez essayer d'éviter lors de l'utilisation XML.
Internet Explorer - XML Data Islands
Qu'est-ce que c'est? Un îlot de données XML est données XML incorporées dans une page HTML.
Pourquoi éviter cela? de données XML îles ne fonctionne qu'avec les navigateurs Internet Explorer.
Qu'est-ce à utiliser à la place? Vous devez utiliser JavaScript et XML DOM pour parser et afficher XML en HTML.
Pour plus d'informations sur JavaScript et DOM XML, visitez notre tutoriel XML DOM.
Îlot de données XML Exemple
Cet exemple utilise le document XML " cd_catalog.xml ".
Lier le document XML à un tag <xml> dans le document HTML. L'attribut id définit un id pour l'îlot de données, et les points d'attribut src dans le fichier XML:
Exemple
Cet exemple ne fonctionne que sous 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>
<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>
Essayez vous-même »
L'attribut de la balise datasrc <table> lie la table HTML à l'îlot de données XML.
Les balises <span> permettre l'attribut datafld de se référer à l'élément XML doit être affiché. Dans ce cas, "artiste" et "TITLE". Comme le XML est lu, des lignes supplémentaires sont créés pour chaque élément <CD>.
Internet Explorer - Comportements
Qu'est-ce que c'est? Internet Explorer 5 comportements introduits. Les comportements sont une façon d'ajouter des comportements à XML (ou HTML) les éléments avec l'utilisation de styles CSS.
Pourquoi éviter cela? L'attribut comportement est uniquement pris en charge par Internet Explorer.
Qu'est-ce à utiliser à la place? Utilisez JavaScript and XML DOM (ou DOM HTML) à la place.
Exemple 1 - Highlight Mouseover
Le fichier HTML suivant présente un élément de <style> qui définit un comportement de l'élément <h1>:<html>
<head>
<style type="text/css">
h1 { behavior: url(behave.htc) }
</style>
</head>
<body>
<h1>Mouse over me!!!</h1>
</body>
</html>
Le document XML "behave.htc" est illustré ci-dessous (Le fichier contient un script JavaScript et gestionnaires d'événements pour les éléments):<head>
<style type="text/css">
h1 { behavior: url(behave.htc) }
</style>
</head>
<body>
<h1>Mouse over me!!!</h1>
</body>
</html>
<attach for="element" event="onmouseover" handler="hig_lite" />
<attach for="element" event="onmouseout" handler="low_lite" />
<script type="text/javascript">
function hig_lite()
{
element.style.color='red';
}
function low_lite()
{
element.style.color='blue';
}
</script>
<attach for="element" event="onmouseout" handler="low_lite" />
<script type="text/javascript">
function hig_lite()
{
element.style.color='red';
}
function low_lite()
{
element.style.color='blue';
}
</script>
Essayez vous-même »
Exemple 2 - Simulation de machine à écrire
Le fichier HTML suivant présente un élément de <style> qui définit un comportement pour les éléments avec un id de "typage":<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>
Le document XML "typing.htc" est illustré ci-dessous:<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>
<attach for="window" event="onload" handler="beginTyping" />
<method name="type" />
<script type="text/javascript">
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>
<method name="type" />
<script type="text/javascript">
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>
Essayez vous-même »
0 commentaires:
Post a Comment
HELLO VISITORS THANKS FOR YOUR VISIT AND COMMENT