XForms/控制按钮外观

本示例演示了如何使用标签、提示文本和图像来控制按钮外观。要查看按钮图像，您需要在执行此程序的文件夹中创建一个名为 XForms-button.jpg 的文件。

本示例需要在程序中使用图像。

您可以从此处下载此图像：.

程序

<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>XForms Trigger Appearances</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <label>Label text from the model</label>
               <message>Message text from the model</message>
               <hint>Hint text from the model</hint>
            </data>
         </xf:instance>
         <xf:submission method="post" id="submission" />
      </xf:model>
   </head>
   <body>
      <h1>Test of Trigger Appearances</h1>
      <p>A simple model button that brings up a message in a window:
      <br/>
         <xf:trigger>
            <xf:label>Simple Button</xf:label>
            <xf:message level="modal" ev:event="DOMActivate">Button clicked</xf:message>
         </xf:trigger>
         <br/>
      </p>
      <p>A model button that also displays "hint text" when you hover over the button:
			<br />
         <xf:trigger>
            <xf:label>Button With Hint Text On Hover</xf:label>
            <xf:message level="modal" ev:event="DOMActivate">Button clicked</xf:message>
            <xf:hint>This is the hint text.</xf:hint>
         </xf:trigger>
         <br />
      </p>
      <p>A button that includes an image and hint text:
			<br />
         <xf:trigger appearance="xf:image">
            <img src="XForms-button.jpg" />
            <xf:message level="modal" ev:event="DOMActivate">Image 
clicked</xf:message>
            <xf:hint>This hint text comes up if you hover over a button.</xf:hint>
         </xf:trigger>
         <br />
      </p>
      <p>A button that includes text, and image and text:
			<br />
         <xf:trigger appearance="xf:image">
            <xf:label>Text before the image... <img src="XForms-button.jpg" /> ...text after the image.</xf:label>
            <xf:message level="modal" ref="message" ev:event="DOMActivate" />
            <xf:hint>Hints work with labels and images.</xf:hint>
         </xf:trigger>
         <br />
      </p>
      <p>A trigger that extracts the label, hint and message text from the model:
			<br />
         <xf:trigger>
            <xf:label ref="label" />
            <xf:message level="modal" ref="message" ev:event="DOMActivate" />
            <xf:hint ref="hint" />
         </xf:trigger>
         <br />
      </p>
   </body>
</html>

讨论

XForm 规范还使用 xf:help 标签，允许上下文相关的帮助。此标签的工作方式与 hint 标签相同，但会由浏览器的帮助功能或系统帮助功能激活。您也可以使用样式表来使用 help 标签。

下一页：范围 | 上一页：触发
首页： XForms