XForms/Switch 和 Case
< XForms
您希望根据静态 ID 有条件地显示屏幕的不同区域。
当您点击顶行上的三个按钮中的一个时，下面显示的视图将发生变化。
<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>Switch, case and toggle</title>
<!-- Demonstration of switch/case and toggle -->
<style type="text/css">
<![CDATA[
@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>
<xf:model />
</head>
<body>
<xf:trigger>
<xf:label>View One</xf:label>
<xf:toggle case="case-1" ev:event="DOMActivate" />
</xf:trigger>
<xf:trigger>
<xf:label>View Two</xf:label>
<xf:toggle case="case-2" ev:event="DOMActivate" />
</xf:trigger>
<xf:trigger>
<xf:label>View Three</xf:label>
<xf:toggle case="case-3" ev:event="DOMActivate" />
</xf:trigger>
<br />
<br />
<!-- only a single group will be displayed at any time -->
<xf:switch>
<xf:case id="case-1">
<xf:group>
<xf:label>View One</xf:label>
<p>One One One One One One One One One One One One One One One One One One</p>
</xf:group>
</xf:case>
<xf:case id="case-2">
<xf:group>
<xf:label>View Two</xf:label>
<p>Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</p>
</xf:group>
</xf:case>
<xf:case id="case-3">
<xf:group>
<xf:label>View Three</xf:label>
<p>Three Three Three Three Three Three Three Three Three Three Three Three Three Three Three Three Three</p>
</xf:group>
</xf:case>
</xf:switch>
</body>
</html>
XForms 提供了一种在视图之间轻松切换的方法。这也显示了 XForms 组和标签如何像 HTML fieldset 和 legend 一样使用。