XForms/三文档加载
< XForms
您希望允许用户通过以下三种方式之一处理文档：
- 从文本文档中复制粘贴
- 从本地文件系统上传文件
- 引用 URL
我们将使用 switch/case 与三个选项卡的组合。第一个选项卡将用于文本区域，第二个用于上传控件，第三个用于 URL。
第一个选项卡上的第一个控件使用 XForms 的 "textarea" 控件。这允许用户将文本复制并粘贴到文档中。第二个选项卡使用上传控件。上传控件将接收任何文件并将其转换为文本编码的 XML 文件。最后一个选项卡允许用户仅提交 URL。此 URL 可以直接存储到数据库中，或者可以使用其他工具提取其内容。
根据不同的条件，您可能希望使用其中一个或多个控件。如果需要搜索文档内容，文本区域可能最有用。其他两个控件可能需要服务器端过程来提取用于搜索的文本。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<head>
<title>TriDoc - 3 ways to store text documents</title>
<link rel="stylesheet" type="text/css" href="tri-doc.css"/>
<xf:model>
<xf:instance xmlns="">
<data>
<text/>
<binary xsi:type="xs:base64Binary"/>
<url/>
</data>
</xf:instance>
<xf:submission id="save" action="echo.xq" method="post"/>
</xf:model>
</head>
<body>
<div class="horiz-tabs-menu">
<div id="tab1">
<a href="#tab1">Text
<xf:toggle case="case-1" ev:event="DOMActivate"/>
</a>
</div>
<div id="tab2">
<a href="#tab2">Upload
<xf:toggle case="case-2" ev:event="DOMActivate"/>
</a>
</div>
<div id="tab3">
<a href="#tab3">URL
<xf:toggle case="case-3" ev:event="DOMActivate"/>
</a>
</div>
</div>
<xf:switch>
<xf:case id="case-1" selected="true()">
<xf:label>Text: </xf:label>
<br/>
<xf:textarea ref="text" class="textarea-big"/>
</xf:case>
<xf:case id="case-2">
<xf:upload ref="binary">
<xf:label>Upload: </xf:label>
<xf:filename>file:///C:/tmp/*.xml</xf:filename>
<xf:mediatype>text/xml</xf:mediatype>
</xf:upload>
</xf:case>
<xf:case id="case-3">
<xf:input ref="url" class="url">
<xf:label>URL: </xf:label>
</xf:input>
</xf:case>
</xf:switch>
<div class="test">
<xf:output ref="text">
<xf:label>Text: </xf:label>
</xf:output>
<br/>
<xf:output ref="binary">
<xf:label>Binary: </xf:label>
</xf:output>
<br/>
<xf:output ref="url">
<xf:label>URL: </xf:label>
</xf:output>
</div>
<xf:submit submission="save">
<xf:label>Save</xf:label>
</xf:submit>
</body>
</html>
@namespace xf url("http://www.w3.org/2002/xforms");
/* Put the tab divs all on one line */
div.horiz-tabs-menu div {
display: inline;
}
/* style each individual tab */
div.horiz-tabs-menu div a {
color: black;
border: 0.1em outset #BBB; /* Make it look like a button */
border-bottom: 0.1em solid #CCC;
font-weight: bold;
font-family: Helvetica, sans-serif;
text-decoration: none;
margin-right: 5px;
padding: 0.2em;
/* round the top corners - works under FireFox */
-moz-border-radius: .5em .5em 0em 0em;
}
/* Make non-selected tabs appear in the background */
div.horiz-tabs-menu div:not(:target) a {
border-bottom: none; /* Make the bottom border disappear */
background: #999;
}
/* Make the selected (targeted) item or default selection to appear on top */
div.horiz-tabs-menu div:target a {
border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */
background: #CCC; /* Set active tab to light gray */
}
/* the sylying of the divs below each tab */
xf|switch xf|case div {
background: #CCC; /* Light gray */
padding: 0.3em; /* Looks better */
width: 500px;
height: 150px;
-moz-border-radius: 0;
}
.textarea-big textarea {
width: 490px;
height: 120px;
}
.url .xf-value {
width: 450px;
}