XForms/消息类型
外观
< XForms
使用 JavaScript,您在如何侵入性地提醒用户方面没有太多选择。JavaScript alert() 函数要求用户在继续填写表单之前确认消息。使用 XForms,现在有三种方法可以继续。每种方法都有不同的侵入性级别。有三种消息选项
- 短暂 - 一条只短暂出现并自动消失的消息
- 非模态 - 一条您可以暂时忽略的消息
- 模态 - 用户必须确认的消息,才能继续
这是一个显示短暂消息的屏幕[检查拼写]图像
<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
事件,该事件发生在您在第二个示例中输入回车并在最后一个示例中按下按钮时。