- 浏览: 319506 次
- 性别:
- 来自: 上海
文章分类
最新评论
在构建功能型表单(一) 中介绍了一些适用于用户进行文本性输入的表单功能。
然而,有时候表单中的内容也会以数字为主。
当处理作为表单内容的数字值时,也可以实现另外几种表单增强功能。
数字表单的典型代表就是购物车。在购物车表单中,应该允许用户更新购买的商品数量,同时,也要为用户提供价格和总金额的数字反馈。
构建功能行表单(二)
1.在操作表单前先为表格应用标准的行条纹效果,美化一下表格的外观
var stripe = function(){ $("#cart tbody tr:visible:even").removeClass("odd").addClass("even"); $("#cart tbody tr:visible:odd").removeClass("even").addClass("odd"); }
2.拒绝非数字输入
通过javascript,可以检查用户输入的内容是否符合我们的要求,以便在将表单发送到服务器之前对用户给出反馈,这种技术叫做输入掩码。
输入验证是根据某些有效输入的标准来检查用户输入的过程。输入掩码会在用户填写内容的同时应用标准,并简单地禁止无效的按键操作。
比如,在这个购物车表单的例子中,必须在输入字段中填写数字。通过使用输入掩码验证,可以在这些字段获得焦点时,让非数字按键操作不起作用
$(".quantity input").keypress(function(event){ if(event.charCode && (event.charCode < 48 || event.charCode > 57)){ event.preventDefault(); } });
在这里我们要观察的是keypress事件,这个事件不提供keyCode属性,但提供了charCode属性。
调用preventDefault()方法会阻止浏览器响应相应的事件。
3.数字计算
表单中有个recalculate按钮,单击这个按钮会把表单提交到服务器,重新计算总金额再把表单展示给用户。但是这个往返过程是不必要的,所有工作都可以在浏览器中通过jquery来完成。
在shipping行中显示订购商品的数量。但用户修改了其中一行的数量时,我们要合计所有输入值以得到新的数量,然后将总数显示在相应的单元格中。
$(".quantity input").change(function(){ var totalQuantity = 0; $("#cart tbody tr").each(function(){ var quantity = parseInt($(".quantity input",this).val()); totalQuantity += quantity; }); $(".shipping .quantity").text(String(totalQuantity)); });
我们只有在change事件发生时执行计算。这样,只有当用户离开字段并填写了同以前不一样的值时,才会导致重新计算总数量。
a.解析和格式化货币值
var price = parseFloat($(".price",this).text().replace(/^[^\d.]*/,"")); price = isNaN(price) ? 0 : price; var cost = quantity * price; $(".cost",this).text("$"+cost);
用正则表达式去掉价格前的货币符号,然后把得到的字符传递给parseFloat(),把价格转成浮点数。
我们必须确保找到了数字值,如果没有则将其设置为0。最后,用价格乘以数量,再与$连接放到总费列中
b.处理小数位
用toFixed方法返回一个舍入到相应小数位后的浮点数的字符串
c.其他计算
1.合计subtotal行最后一列的总费用。
$(".quantity input").change(function(){ var totalQuantity = 0; var totalCost = 0; $("#cart tbody tr").each(function(){ var price = parseFloat($(".price",this).text().replace(/^[^\d.]*/,"")); price = isNaN(price) ? 0 : price; var quantity = parseInt($(".quantity input",this).val()); var cost = quantity * price; $(".cost",this).text("$"+cost.toFixed(2)); totalQuantity += quantity; totalCost += cost; }); $(".shipping .quantity").text(String(totalQuantity)); $(".subtotal .cost").text("$" + totalCost.toFixed(2)); });
2.计算税金
为了计算税金,需要用相应的数字除以100得到税率,再用合计金额乘以税率。不过,计算税金时总要向上舍入的,因此必须保证在显示和计算时使用正确的值。
在这里,我们用税金乘以100会使它变成一个以分而不是元表示的值,通过Math.ceil()舍入这个值是安全的。舍入之后,再除以100就可以将这个值转换回以元表示的值。
var taxRate = parseFloat($(".tax .price").text())/100; var tax = Math.ceil(totalCost * taxRate * 100)/100; $(".tax .cost").text("$" + tax.toFixed(2)); totalCost += tax;
3.计算运费
用商品数量乘以单件商品的运输费率就可以得到总运费
var shippingRate = parseFloat($(".shipping .price").text().replace(/^[^\d.]*/,"")); var shipping = totalQuantity * shippingRate; $(".shipping .cost").text("$" + shipping.toFixed(2)); totalCost += shipping;
现在我们已经完全重写了可能发生的任何服务器计算。因此,可以安全的隐藏recalculate按钮了
4.删除商品
如果购物者在把商品放到购物车中之后改变了注意,可以将相应商品的quantity字段修改为0。然而,我们还可以提供一种更可靠的行为,即为每件 商品都添加一个明确的delete按钮。虽然单击这个按钮的实际效果与修改quantity字段相同,但这种视觉上的反馈可以强化不会购买相应商品的事 实。
$("<th> </th>").insertAfter("#cart thead th:nth-child(2)"); $deleteButton = '<img src="images/delete.gif" width="16" height="16" title="remove from cart" alt="remove from cart" class="clickable" />'; $("<td></td>").append($deleteButton).insertAfter("#cart tbody td:nth-child(2)"); $("img.clickable").click(function(){ $(this).parents("tr").hide().find(".quantity").children("input").val(0).trigger("change"); }); $("<td> </td>").insertAfter("#cart tfoot td:nth-child(2)");
- table.zip (40.1 KB)
- 下载次数: 265
发表评论
-
遍历class
2010-11-14 22:03 1967一般国外的网站很注重细节,他们会把菜单或者button做成图片 ... -
简单的新闻滚动
2010-11-09 23:07 1399这里直接用jquey的animate函数做的滚动效果 ... -
上一张下一张
2010-11-09 22:12 3333预览照片的常用功能:上一张下一张 效果图(很喜欢的蒙奇 ... -
自动播放的jQuery幻灯片
2010-10-29 22:23 3115来看下效果图: <script src ... -
EasySlider
2009-11-16 21:58 1593Easy Slider 1.5 - The Easiest j ... -
Cookie Plugin for jQuery
2009-08-09 23:30 1941Cookie Plugin for jQuery ... -
价格过滤条
2009-04-03 10:18 1181写了一个价格过滤条: 重点是按钮的css定位要算好。 只能 ... -
js图片轮换效果(二)
2009-03-13 15:23 4781结构: <ul id="picture& ... -
jquery ui 日历插件(换色+类型)
2009-03-10 16:59 5594抽空把jquery ui 里的日历做了个整理,整合了换色和几 ... -
二级菜单效果(3)
2009-03-07 16:05 1539html代码结构: <li class=&quo ... -
jquery之Image Scroller插件
2009-02-23 21:10 2232jquery之Image Scroller插件 图片滚动插 ... -
很炫的图片循环效果(jquery改写版)
2009-02-08 21:18 3343以前我在博客中发表过这个图片循环效果,是用javascript ... -
用animate方法展示大图
2009-02-06 15:44 1271demo中点击按钮后div元素的几个不同属性一同变化 ... -
菜单伸缩动画
2009-02-06 13:41 1503方法: $(document).ready(funct ... -
sexy curls插件
2009-02-06 12:14 1208The sexy curls jquery plugin ... -
facebox插件
2009-01-19 14:03 3221在网上down下facebox1.2版的源码, 重新整理了下( ... -
lightbox插件
2009-01-16 16:58 2192lightbox基于jquery1.3版(附件1) 具 ... -
thickbox插件用法
2009-01-13 22:47 1582最近发现一个不错的基于jquery的插件thickBox ,感 ... -
动态过滤填充input框和用弹出层替换select框
2008-12-23 23:21 3121左图是用keydown事件写的动态过滤填充input框 $ ... -
js图片轮换效果(一)
2008-12-15 21:39 7649常常在各大网站上看到如下图所示的图片轮换效果,有的是用flas ...
相关推荐
jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...
随后3章从理论到实践,通过表格操作、构建功能型表单、实现滑移和翻转效果等实例,深入浅出地讲解了如何创造性地运用jQuery提供的丰富而强大的API。《jQuery基础教程(第2版)》最后两章专门介绍了如何使用和编写...
jQuery formValidator表单校验插件支持的验证功能: 支持所有类型客户端控件的校验 支持jQuery所有的选择器语法,只要控件有唯一ID和type属性。 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你...
jQuery formValidator表单验证插件示例源码 jQuery formValidator表单验证插件是什么? jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的...
jQuery基础教程.中文.带目录。需要下载2个部分压缩包,这是第1个,其它1个请到我的资源里查找。 目录 第1章 jQuery入门 第2章 选择符-取得你想要的一切 ...第8章 构建功能型表单 第9章 滑移和翻转 第10章 插件 ……
随后3章从理论到实践,通过表格操作、构建功能型表单、实现滑移和翻转效果等实例,深入浅出地讲解了如何创造性地运用 jQuery提供的丰富而强大的API。本书最后两章专门介绍了如何使用和编写jQuery插件。值得一提的是...
jQuery基础教程.中文.带目录。需要下载2个部分压缩包,这是第1个,其它1个请到我的资源里查找。 目录 第1章 jQuery入门 第2章 选择符-取得你想要的一切 ...第8章 构建功能型表单 第9章 滑移和翻转 第10章 插件 ……
jQuery formValidator表单插件致力于改善重复编程、考虑浏览器兼容性等情况;你只关心业务逻辑,而无需关心实现过程,只需简单的配置,无需写代码就能实现表单的检验。 jQuery formValidator表单校验插件 4.1.0 ...
支持jQuery所有的选择器语法,只要控件有唯一ID和type属性 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。 支持2种校验模式。第一种:文字提示(showword模式);...
第8章 构建功能型表单 8.1 渐进增强的表单设计 8.1.1 图标符号 8.1.2 必填字段的提示信息 8.1.3 根据条件显示的字段 8.2 表单验证 8.2.1 即时反馈 8.2.2 最终检查 8.3 复...
第8章 构建功能型表单 8.1 改进基本的表单 8.1.1 渐进增强表单样式 8.1.2 根据条件显示的字段 8.1.3 表单验证 8.1.4 复选框操作 8.1.5 完成的代码 8.2 提升紧凑的表单 8.2.1 字段的占位符文本 8.2.2 AJAX...
Krajee 的增强型树管理模块,使用嵌套集选择和操作树节点。 下面列出了扩展功能: 一个完整的树管理解决方案,提供管理使用嵌套集存储的分层数据的能力。 利用扩展来管理数据库中的树结构。 在开始使用此模块之前...
2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性...
笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!此时此...