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;
}