- 浏览: 327647 次
- 性别:
- 来自: 上海
文章分类
最新评论
在构建功能型表单(一) 中介绍了一些适用于用户进行文本性输入的表单功能。
然而,有时候表单中的内容也会以数字为主。
当处理作为表单内容的数字值时,也可以实现另外几种表单增强功能。
数字表单的典型代表就是购物车。在购物车表单中,应该允许用户更新购买的商品数量,同时,也要为用户提供价格和总金额的数字反馈。
构建功能行表单(二)
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 2038一般国外的网站很注重细节,他们会把菜单或者button做成图片 ... -
简单的新闻滚动
2010-11-09 23:07 1462这里直接用jquey的animate函数做的滚动效果 ... -
上一张下一张
2010-11-09 22:12 3421预览照片的常用功能:上一张下一张 效果图(很喜欢的蒙奇 ... -
自动播放的jQuery幻灯片
2010-10-29 22:23 3166来看下效果图: <script src ... -
EasySlider
2009-11-16 21:58 1642Easy Slider 1.5 - The Easiest j ... -
Cookie Plugin for jQuery
2009-08-09 23:30 1993Cookie Plugin for jQuery ... -
价格过滤条
2009-04-03 10:18 1232写了一个价格过滤条: 重点是按钮的css定位要算好。 只能 ... -
js图片轮换效果(二)
2009-03-13 15:23 4830结构: <ul id="picture& ... -
jquery ui 日历插件(换色+类型)
2009-03-10 16:59 5662抽空把jquery ui 里的日历做了个整理,整合了换色和几 ... -
二级菜单效果(3)
2009-03-07 16:05 1595html代码结构: <li class=&quo ... -
jquery之Image Scroller插件
2009-02-23 21:10 2278jquery之Image Scroller插件 图片滚动插 ... -
很炫的图片循环效果(jquery改写版)
2009-02-08 21:18 3391以前我在博客中发表过这个图片循环效果,是用javascript ... -
用animate方法展示大图
2009-02-06 15:44 1318demo中点击按钮后div元素的几个不同属性一同变化 ... -
菜单伸缩动画
2009-02-06 13:41 1565方法: $(document).ready(funct ... -
sexy curls插件
2009-02-06 12:14 1253The sexy curls jquery plugin ... -
facebox插件
2009-01-19 14:03 3282在网上down下facebox1.2版的源码, 重新整理了下( ... -
lightbox插件
2009-01-16 16:58 2244lightbox基于jquery1.3版(附件1) 具 ... -
thickbox插件用法
2009-01-13 22:47 1624最近发现一个不错的基于jquery的插件thickBox ,感 ... -
动态过滤填充input框和用弹出层替换select框
2008-12-23 23:21 3183左图是用keydown事件写的动态过滤填充input框 $ ... -
js图片轮换效果(一)
2008-12-15 21:39 7702常常在各大网站上看到如下图所示的图片轮换效果,有的是用flas ...
相关推荐
jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...
在IT行业中,jQuery是一个广泛使用...综上所述,"功能强大的jquery表单特效"涵盖了jQuery在表单交互、数据展示和用户体验优化方面的广泛应用,通过学习和实践这些技术,开发者可以创建出更加动态、易于使用的Web应用。
**jQuery拖拽式表单设计器——Formbuild** Formbuild是一款基于jQuery技术...在“强大的jQuery拖拽式表单设计器特效”这个文件中,我们可以深入研究和学习Formbuild的各种特效和实现方式,进一步优化我们的表单设计。
jQuery作为一种强大的JavaScript库,能够简化网页动态交互和DOM操作,是实现分步骤用户注册表单的理想工具。本文将深入探讨如何利用jQuery实现这种功能,以及相关文件结构的作用。 首先,我们来看"jQuery分步骤用户...
2. **jQuery选择器**:jQuery提供了丰富的DOM选择器,可以方便地选取页面上的元素,例如`$("#id")`选择ID为特定值的元素,`$(".class")`选择所有具有特定类名的元素,这些在构建步骤导航中非常有用。 3. **事件处理...
jQuery EasyValidator是一款强大的JavaScript表单验证插件,它基于jQuery库构建,专为简化和增强网页表单数据验证而设计。这款插件提供了一系列灵活且易于使用的API,帮助开发者快速实现对用户输入的有效性检查,...
5. **插件系统**:jQuery 社区提供了大量插件,涵盖了表单验证、图像轮播、图表绘制等各个领域,大大扩展了其功能。 **三、jQuery 学习路径** 学习 jQuery,首先需要熟悉 JavaScript 的基础知识,包括变量、数据...
在网页设计和开发中,表单向导是一种增强用户体验、引导用户逐步完成复杂表单填写的工具。本示例是基于jQuery库实现的,jQuery是一个...通过学习和实践这个示例,开发者可以提升自己在构建动态、交互性表单方面的技能。
"jQuery+Ajax实现的表单分页,页面复杂表单数据的加载"是一种高效且用户友好的解决方案,能够提高网页性能,优化用户体验。本知识点主要围绕jQuery、Ajax、分页以及复杂表单的数据加载进行深入探讨。 首先,jQuery...
随后3章从理论到实践,通过表格操作、构建功能型表单、实现滑移和翻转效果等实例,深入浅出地讲解了如何创造性地运用jQuery提供的丰富而强大的API。《jQuery基础教程(第2版)》最后两章专门介绍了如何使用和编写...
通过这个压缩包,我们可以学习如何使用jQuery来构建一个引导用户逐步完成复杂表单填写的交互式界面。 首先,让我们了解表单步骤流程导航的基本概念。在大型或复杂的在线表单中,为了提高用户体验,通常会将表单拆分...
6. **插件和扩展**: jQuery社区提供了大量的插件,如表单验证、轮播图、时间选择器等,它们极大地扩展了jQuery的功能。 **Apache POI处理Excel** Apache POI是Java库,用于读写Microsoft Office格式的文件,包括...
对于进阶开发者,可以研究源码,了解其内部工作原理,以及如何利用jQuery构建高效的应用。 总结,jQuery 1.5.1作为一款经典版本,其强大的功能和易用性使其在Web开发中占有重要地位。理解并掌握这一版本,将有助于...
在实际开发中,结合jQuery 1.12.4.min.js的高效性能和jQuery库的强大功能,开发者可以快速构建交互性强、用户体验优秀的Web应用。不过,随着前端技术的发展,现代框架如React、Vue和Angular等也逐渐流行,jQuery的...
通过学习这个资源包,你可以全面掌握JavaScript和jQuery的基础知识,并有能力运用它们构建具有丰富交互性的网页应用。同时,了解CSS将帮助你更好地控制网页的外观和布局,从而成为一名全面的前端开发者。
jQuery formValidator表单校验插件支持的验证功能: 支持所有类型客户端控件的校验 支持jQuery所有的选择器语法,只要控件有唯一ID和type属性。 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你...
在找回密码的表单中,jQuery可以用于实时验证用户输入,比如检查邮箱格式是否正确,或者在用户提交请求后显示加载指示器。它还可以用于发送异步AJAX请求,使用户无需刷新页面就能完成密码重置请求。 具体实现步骤...
本教程将深入探讨Jquery、YUI和ExtJs这三大JavaScript框架在表单验证和提示功能方面的应用。 **jQuery** jQuery是一款轻量级、高性能的JavaScript库,以其简洁的API和跨浏览器兼容性闻名。在表单验证方面,jQuery...
它为网页增加了动态功能,如表单验证、动态内容更新等。在浏览器环境中,JavaScript可以操作DOM(文档对象模型),改变HTML元素,响应用户事件,以及与服务器进行异步通信。 jQuery是一个JavaScript库,它的出现...
### jQuery表单验证详解 #### 一、jQueryformValidator是什么? **jQueryformValidator**是一款专为简化客户端表单验证流程而设计的插件。在Web应用开发中,表单验证是一项常见但繁琐的任务,涉及对用户输入数据的...