跳转到内容

XForms/使用Load进行搜索

来自维基教科书,开放世界中的开放书籍

您想构建一个使用 xf:load 元素进行搜索的 Web 表单。这允许您将 URL 重写为搜索应用程序。

源代码

[编辑 | 编辑源代码]
<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" >
    <title>Example of XForms Search with xf:load</title>
    <style type="text/css">  
        body {font-family: Helvetica, sans-serif}    
    </style>
    <xf:model>
        <xf:instance xmlns="" id="search-params">
            <data>
                <url>http://www.example.com/search?q=</url>
                <q></q>
            </data>
        </xf:instance>
        
        <!-- 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>Example of XForms Search with xf:load</h1>
        <xf:input ref="q" id="search-field" incremental="true">
            <xf:label>Enter search string:</xf:label>
            <xf:action ev:event="DOMActivate">
                <xf:load show="replace">
                    <xf:resource value="concat(url, q)"/>
                </xf:load>
            </xf:action>
        </xf:input>
        
        <xf:trigger>
            <xf:label>Execute Search</xf:label>
            <xf:action ev:event="DOMActivate">
                <xf:load show="replace">
                    <xf:resource value="concat(url, q)"/>
                </xf:load>
            </xf:action>
        </xf:trigger>
        
    </body>
</html>

请注意,您必须使用资源元素的 xf:value 属性。

华夏公益教科书