1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
|
<?xml version="1.0" encoding="UTF-8"?>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>D'une vue à l'autre</title>
<xf:model id="p1">
<xf:instance xmlns="">
<person>
<name></name>
<age></age>
</person>
</xf:instance>
</xf:model>
<!-- Démonstration de l'utilisation des instructions swtich, case et toggle -->
<style type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
xf|group {
border: solid black 2px;
background-color: silver;
height: 100px;
}
xf|group xf|label {
position: relative;
font-family: Helvetica, sans-serif;
font-weight: bold;
background-color: white;
padding: 2px;
top: -10px;
left: 10px;
}
xf|group p {
position: relative;
top: -30px;
padding: 5px;
}
</style>
</head>
<body>
<xf:trigger>
<xf:label>Premier onglet</xf:label>
<xf:toggle case="cas1" ev:event="DOMActivate" />
</xf:trigger>
<xf:trigger>
<xf:label>Deuxème onglet</xf:label>
<xf:toggle case="cas2" ev:event="DOMActivate" />
</xf:trigger>
<xf:trigger>
<xf:label>Troisième onglet</xf:label>
<xf:toggle case="cas3" ev:event="DOMActivate" />
</xf:trigger>
<br />
<br />
<!-- Un seul groupe sera affiché à la fois -->
<xf:switch>
<xf:case id="cas1">
<xf:group>
<xf:label>Premier onglet</xf:label>
<p>Un un un un un un un un un un un un un un un un un un un un un un un </p>
</xf:group>
</xf:case>
<xf:case id="cas2">
<xf:group>
<xf:label>Deuxème onglet</xf:label>
<p>Deux deux deux deux deux deux deux deux deux deux deux deux deux deux deux </p>
</xf:group>
</xf:case>
<xf:case id="cas3">
<xf:group>
<xf:label>Troisième onglet</xf:label>
<p>Trois trois trois trois trois trois trois trois trois trois trois trois trois trois trois</p>
</xf:group>
</xf:case>
</xf:switch>
</body>
</html> |
Partager