XForms/高级搜索
< XForms
您想要一个简单的搜索功能和一个单独的高级搜索选项标签。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ev="http://www.w3.org/2001/xml-events">
<title>Google Search Example</title>
<style type="text/css">
body {font-family: Helvetica, sans-serif; }
</style>
<style>
@namespace xf url("http://www.w3.org/2002/xforms");
/* all the attributes of each tab, except the background color */
#horiz-tab-menu xf|trigger {
border-left: black solid 1px;
border-top: black solid 1px;
border-right: black solid 1px;
border-bottom: 0px;
font-weight: bold;
font-family: Helvetica, sans-serif;
font-size: .9em;
margin-right: 5px;
padding: 3px;
/* the following only works under FireFox */
-moz-border-radius: .5em .5em 0em 0em;
border-radius-topright: .5em;
border-radius-topleft: .5em;
}
/* the attributes of each div inside of a case */
xf|switch xf|case {
position: relative;
width: 400;
border: solid black 1px;
border-top: solid black 0px;
border-right: solid black 1px;
border-bottom: solid black 1px;
padding: 5px;
background-color: silver;
}
</style>
<xf:model>
<xf:instance xmlns="" id="search-params">
<data>
<hl>en</hl>
<q />
</data>
</xf:instance>
<xf:instance xmlns="" id="adv-search-input-params">
<data>
<hl>en</hl>
<q>Xforms</q>
<site>https://wikibooks.cn/wiki/XForms</site>
</data>
</xf:instance>
<xf:instance xmlns="" id="adv-output-input-params">
<data>
<hl>en</hl>
<q />
</data>
</xf:instance>
<xf:bind nodeset="instance('adv-output-input-params')/q"
calculate="concat(
instance('adv-search-input-params')/q, '+', instance('adv-search-input-params')/site)" />
<xf:bind nodeset="instance('adv-output-input-params')/hl"
calculate="instance('adv-search-input-params')/hl"/>
<!-- Send the search parameters to the Google search engine and replace this entire form with the results -->
<xf:submission id="search-google" method="get" action="http://www.google.com/search"
replace="all" ref="instance('search-params')" separator="&" />
<xf:submission id="adv-search-google" method="get" action="http://www.google.com/search"
replace="all" ref="instance('adv-output-input-params')" separator="&" />
<!-- put the cursor in the first field when the form becomes ready -->
<xf:action ev:event="xforms-ready">
<xf:setfocus control="search-field" />
</xf:action>
</xf:model>
<body>
<h1>Google Search Example</h1>
<div id="horiz-tab-menu">
<xf:trigger appearance="minimal" class="tab">
<xf:label>Simple</xf:label>
<xf:toggle case="simple-search" ev:event="DOMActivate" />
</xf:trigger>
<xf:trigger appearance="minimal" class="tab">
<xf:label>Complex</xf:label>
<xf:toggle case="advanced-search" ev:event="DOMActivate" />
</xf:trigger>
</div>
<xf:switch>
<xf:case id="simple-search">
<xf:input ref="instance('search-params')/q" id="search-field">
<xf:label>Search string:</xf:label>
<xf:action ev:event="DOMActivate">
<xf:send submission="search-google" />
</xf:action>
</xf:input>
<xf:submit submission="search-google">
<xf:label>Search</xf:label>
</xf:submit>
</xf:case>
<xf:case id="advanced-search">
<xf:input ref="instance('adv-search-input-params')/q" id="adv-search-field">
<xf:label>Search string:</xf:label>
<xf:action ev:event="DOMActivate">
<xf:send submission="adv-search-google" />
</xf:action>
</xf:input>
<br />
<xf:input ref="instance('adv-search-input-params')/site" id="site-field">
<xf:label>Site URL:</xf:label>
<xf:action ev:event="DOMActivate">
<xf:send submission="adv-search-google" />
</xf:action>
</xf:input>
<br />
<xf:submit submission="adv-search-google">
<xf:label>Search</xf:label>
</xf:submit>
</xf:case>
</xf:switch>
</body>
</html>