Sebastien
6088af4997
Le fichier de test n'était plus fonctionnel à cause d'un changement de nom dans GSDom
101 lines
3.5 KiB
HTML
101 lines
3.5 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>
|
|
Page de test de la bibliothèque GSDom
|
|
</title>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Page de test de la bibliothèque GSDom</h1>
|
|
<div id="main">
|
|
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
|
|
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
|
|
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
|
|
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
|
|
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
|
|
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
|
|
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
|
|
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
|
|
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
|
|
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
|
|
</div>
|
|
<a href="#" class="allgreen">Toutes les lignes en vert</a><br>
|
|
<a href="#" class="lastpurple">Dernière ligne en violet</a><br>
|
|
<a href="#" class="numerote">Numéroter les lignes</a><br>
|
|
<a href="#" class="bold">Texte en gras</a><br>
|
|
|
|
<div id="other">
|
|
<h3>2ème Div</h3>
|
|
|
|
<p>Un autre paragraphe</p>
|
|
</div>
|
|
<p>Version courte : <input type="text" id="shortVersion"></p>
|
|
<p>Version longue : <input type="text" id="longVersion"></p>
|
|
<p><button id="version">get versions</button></p>
|
|
<style>
|
|
.red {
|
|
color: red;
|
|
}
|
|
|
|
.blue {
|
|
color: blue;
|
|
}
|
|
|
|
.green {
|
|
color: green;
|
|
}
|
|
|
|
.purple {
|
|
color: purple;
|
|
}
|
|
</style>
|
|
<script src="../src/gsdom.js"></script>
|
|
<script>
|
|
$_('a.bleu').onClick((evt, el) => {
|
|
$_(el.parentElement).removeAllClasses().addClass("blue");
|
|
}, true);
|
|
$_('a.rouge').onClick((evt, el) => {
|
|
$_(el.parentElement).removeAllClasses().addClass("red");
|
|
}, true);
|
|
$_('a.swap').onClick((evt, el) => {
|
|
if (el.parentElement.classList.contains("blue")) {
|
|
$_(el.parentElement).replaceClass("blue", "red");
|
|
} else if (el.parentElement.classList.contains("red")) {
|
|
$_(el.parentElement).replaceClass("red", "blue");
|
|
}
|
|
}, true);
|
|
$_("a.allgreen").onClick((evt, el) => {
|
|
$_("p", "div").removeAllClasses().addClass("green");
|
|
}, false);
|
|
$_("a.lastpurple").onClick((evt, el) => {
|
|
$_("p", "div#main").last().removeAllClasses().addClass("purple");
|
|
}, false);
|
|
$_("a.bold").onClick(
|
|
(evt, el) => {
|
|
$_("p span.texte", "div#main").each(
|
|
(item, index) => {
|
|
item.style.fontWeight = "bold";
|
|
}
|
|
);
|
|
}, false
|
|
);
|
|
$_("a.numerote").onClick(
|
|
(evt, el) => {
|
|
$_("p span.number", "div#main").each(
|
|
(item, index) => {
|
|
item.textContent = index + 1;
|
|
}
|
|
);
|
|
}, false
|
|
);
|
|
$_('button#version').onClick((evt, elem) => {
|
|
|
|
// $_("input#shortVersion").first(true).value = $_().version();
|
|
$_("input#shortVersion").first().setAttr("value", $_().version());
|
|
$_("input#longVersion").first(true).value = $_().version(true);
|
|
}, false);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |