跳轉至內容

XForms/訊息型別

來自華夏公益教科書,開放的書籍,開放的世界

使用 JavaScript,您在如何侵入性地提醒使用者方面沒有太多選擇。JavaScript alert() 函式要求使用者在繼續填寫表單之前確認訊息。使用 XForms,現在有三種方法可以繼續。每種方法都有不同的侵入性級別。有三種訊息選項

  1. 短暫 - 一條只短暫出現並自動消失的訊息
  2. 非模態 - 一條您可以暫時忽略的訊息
  3. 模態 - 使用者必須確認的訊息,才能繼續

螢幕影像

[編輯 | 編輯原始碼]

這是一個顯示短暫訊息的螢幕[檢查拼寫]影像

[編輯 | 編輯原始碼]

簡單訊息

示例程式

[編輯 | 編輯原始碼]
<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 Message</title>
      <xf:model id="myModel">
         <xf:instance>
            <MyMessage xmlns="">This is a modeless message stored directly in the model.
                Note you can drag me to the side and still proceed to the next task.
            </MyMessage>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <p>Put your cursor in the first input.  A message will appear for just a moment.</p>
         <xf:input>
            <xf:label>Ephemeral message: </xf:label>
            <xf:message level="ephemeral" ev:event="DOMFocusIn">This is an ephemeral message.
                Don't worry, I go away after a few seconds.</xf:message>
         </xf:input>
         <br/>
          <p>Press enter in the input field to get a modeless message:</p>
         <xf:input>
            <xf:label>Modeless message input: </xf:label>
            <xf:message level="modeless" model="myModel" ref="/MyMessage" ev:event="DOMActivate"/>
         </xf:input>
         <br/>
          <p>A standard and intrusive modal message that must be dismissed:</p>
         <xf:trigger>
            <xf:label>Press for a modal message</xf:label>
            <xf:message level="modal" ev:event="DOMActivate">This is a modal message.</xf:message>
         </xf:trigger>
   </body>
</html>

第一條和最後一條訊息的資料來自文件主體。非模態訊息透過使用指向模型的 XPath 表示式直接從主體獲取。

請注意,第一個事件發生在您開始在輸入欄位中輸入資料時。這是 DOMFocusIn 事件。另外兩個事件使用 DOMActivate 事件,該事件發生在您在第二個示例中輸入回車並在最後一個示例中按下按鈕時。

下一頁: Textarea | 上一頁: Secret
主頁: XForms
華夏公益教科書