使用 JavaScript 让 XForms 变得更健壮
2010-09-14 13:05:10 来源:WEB开发网本文示例源代码或素材下载
先决条件
本文只基于 XForms 和 JavaScript。针对安装在 Mozilla Firefox 2.0 之上的 Mozilla XForms 插件 进行测试。使用的是标准的 XForms 和 JavaScript,因此应该在这两个标准技术的其他实现上运行。没有使用服务器端的技术。
典型的表示例
我们来看一个典型的 XForms 示例。它展示了如何创建表示 XML 文档中重复节点的表。尤其展示了如何使用 XForms 执行聚集计算以及如何使用 XForms 添加或删除模型数据的节点,同步地自动保存视图。查看清单 1 中的完整源代码。
清单 1. 典型的 XForms 表示例<?xml version="1.0" encoding="UTF-8"?>
<xhtml:html xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<xhtml:head>
<xhtml:title>Demonstration of table with
column total</xhtml:title>
<xf:model id="my-model" xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
<xf:instance id="my-data" src="my-data.xml" xmlns=""/>
<xf:bind calculate="sum(../Item/Amount)" nodeset="/Data/Total"/>
<xf:submission action="my-data.xml" id="update-from-local-file"
instance="my-data" method="get" replace="instance"/>
<xf:submission action="my-data.xml" id="view-xml-instance"
method="get"/>
<xf:submission action="my-data.xml" id="save-to-local-file"
method="put"/>
</xf:model>
</xhtml:head>
<xhtml:body>
<xf:group ref="/Data" xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
<xf:label/>
<xf:repeat id="repeatItem" nodeset="Item"
xmlns="http://www.w3.org/1999/xhtml">
<xf:input class="item-description" id="description-input"
ref="Description" xmlns="http://www.w3.org/1999/xhtml">
<xf:label/>
</xf:input>
<xf:input class="item-amount" ref="Amount"
xmlns="http://www.w3.org/1999/xhtml">
<xf:label/>
</xf:input>
</xf:repeat>
<xhtml:div id="sum">
<xf:output ref="/Data/Total" xmlns="http://www.w3.org/1999/xhtml">
<xf:label/>
</xf:output>
</xhtml:div>
<xf:trigger id="insertbutton" xmlns="http://www.w3.org/1999/xhtml">
<xf:label>Add Item</xf:label>
<xf:action ev:event="DOMActivate">
<xf:insert at="last()" nodeset="Item[last()]"
position="after"/>
<xf:setvalue ref="Item[last()]/Description" value="''"/>
<xf:setvalue ref="Item[last()]/Amount" value="0"/>
<xf:setfocus control="description-input"/>
</xf:action>
</xf:trigger>
<xf:trigger id="delete" xmlns="http://www.w3.org/1999/xhtml">
<xf:label>Delete Item</xf:label>
<xf:delete at="index('repeatItem')" ev:event="DOMActivate"
nodeset="Item[index('repeatItem')]"/>
</xf:trigger>
<xf:submit submission="update-from-local-file"
xmlns="http://www.w3.org/1999/xhtml">
<xf:label>Reload</xf:label>
</xf:submit>
<xf:submit submission="save-to-local-file"
xmlns="http://www.w3.org/1999/xhtml">
<xf:label>Save</xf:label>
</xf:submit>
<xf:submit submission="view-xml-instance"
xmlns="http://www.w3.org/1999/xhtml">
<xf:label>View XML Instance</xf:label>
</xf:submit>
</xf:group>
</xhtml:body>
</xhtml:html>
Tags:使用 JavaScript XForms
编辑录入:爽爽 [复制链接] [打 印]- ››JavaScript拖拽原理的实现
- ››javascript事件列表解说
- ››Javascript代码优化工具UglifyJS
- ››使用脚本恢复WinXP系统的用户登录密码
- ››JavaScript Confirm 失效的解决办法
- ››使用phpMyadmin创建数据库及独立数据库帐号
- ››使用Zend Framework框架中的Zend_Mail模块发送邮件...
- ››JavaScript页面内拖拽原理分析
- ››使用cout标准输出如何控制小数点后位数
- ››使用nofollow标签做SEO的技巧
- ››javascript中select的常用操作
- ››javascript+css无刷新实现页面样式的更换
更多精彩
赞助商链接