使用 JavaScript 让 XForms 变得更健壮
2010-09-14 13:05:10 来源:WEB开发网触发 JavaScript
既然已经编写了智能的 JavaScript 函数处理删除,只需修改 XForm,使它在调用到 Delete Item 按钮时调用此 JavaScript 就可大功告成了。为此,只需修改 Delete Item 的 XForms 声明,如清单 4 所示。
清单 4. 新的 XForm delete item 控件<xf:trigger id="delete" xmlns="http://www.w3.org/1999/xhtml">
<xf:label>Delete Item</xf:label>
<xf:load ev:event="DOMActivate"
resource="javascript:deleteItem()"/>
</xf:trigger>
注意,您只是将 XForms delete 命令替换为引用 deleteItem() JavaScript 函数的 load 命令。这是最后一个需要修改的地方。现在我们来运行一下修改后的示例。
运行修改后的示例
简单地将示例加载到浏览器中。显示的内容与 图 1 中原来显示的一样。但是,当您删除至最后一行并单击 Delete Item 后,您应看到图 4 所示的结果。
图 4. 删除最后一行
现在最后一行没有消失。而是变为默认值。如果单击 Add Item 按钮,您将看见类似图 5 的内容。
图 5. 删除最后一个 Item 后添加 Item
Add Item 按钮仍然有效,没有什么变化。
您已经了解了如何使用 JavaScript 创建更智能的 delete item 动作。更重要的是,您了解了如何使用 JavaScript 访问和修改 XForms 模型数据,重新计算 XForms 绑定的计算,以及刷新 XForms 视图。您可以想像几种其他方法,使 Add Item 和 Delete Item 动作提供越来越复杂的功能。希望您也能够发现如何使用这些技术改进您自己的基于 XForms 的应用程序。
Tags:使用 JavaScript XForms
编辑录入:爽爽 [复制链接] [打 印]- ››JavaScript拖拽原理的实现
- ››javascript事件列表解说
- ››Javascript代码优化工具UglifyJS
- ››使用脚本恢复WinXP系统的用户登录密码
- ››JavaScript Confirm 失效的解决办法
- ››使用phpMyadmin创建数据库及独立数据库帐号
- ››使用Zend Framework框架中的Zend_Mail模块发送邮件...
- ››JavaScript页面内拖拽原理分析
- ››使用cout标准输出如何控制小数点后位数
- ››使用nofollow标签做SEO的技巧
- ››javascript中select的常用操作
- ››javascript+css无刷新实现页面样式的更换
更多精彩
赞助商链接