javascript、jQuery的扩展方法,扩展实例展示代码
$(function () {
var total = 0, height = $(window).height(), memberScroll, cartScroll, proScroll;
$.cart = {
succ: function (data, status, xhr) {
data.Status == 1 ?
$.dialog(data.Message, { header: { title: "添加商品", closebtn: "×" } }) :
data.Status == 0 ?
$.cart.set.apply(
data.Target.Product ?
$.cart.add(data.Target.Product) :
$(".ordBody01 tbody tr[data-ProductNo=" + data.Target.CartProduct.ProductNo + "]"),
[data.Target.CartProduct]
) :
$.cart.selpro(data.Target.Products);
},
add: function (pro) {
var tr = $("<tr></tr>").attr('data-ProductNo', pro.ProductNo).appendTo(".ordBody01 tbody");
$('<td width="38%" class="name"></td>').html(pro.Name).appendTo(tr);
$('<td width="20%" class="price"><input type="number" class="priTxt" readonly="readonly" value="' + pro.SalePrice + '"/></td>').appendTo(tr);
var td = $('<td width="30%" class="proAmount"></td>').appendTo(tr);
$('<p><button type="button" class="qtyDown disabled"></button><input type="tel" name="qty" value="1" class="qtyTxt"><button type="button" class="qtyUp"></button></p>').appendTo(td);
$('<td><button type="button" class="btnDelete"></button></td>').appendTo(tr);
tr.find(".priTxt").bind("change", $.cart.priceChange);
tr.find(".qtyTxt").bind("change", $.cart.qtyChange);
tr.find(".qtyDown,.qtyUp").bind("click", $.cart.qtyChange);
tr.find(".btnDelete").bind("click", $.cart.cartDelete);
return tr;
},
priceChange: function (e) {
e.preventDefault();
var that = $(this),
val = that.val();
val = /\d+/.test(val) && val > 0 ? parseFloat(val) : 0;
that.val(val);
$.post("/Order/SetPrice", { ProductNo: that.closest("tr").attr("data-ProductNo"), Price: val });
$.cart.cartCalc();
},
qtyChange: function (e) {
e.preventDefault();
var that = $(this), inp = that.closest("p").find(".qtyTxt");
!that.hasClass("disabled") && inp.cartChange(e, that.hasClass("qtyDown") ? -1 : that.hasClass("qtyUp") ? 1 : 0);
$.cart.cartCalc();
},
set: function (cpro) {
$("#word").val("");
$(this).find(".qtyTxt").val(cpro.Quantity).change();
},
pay: function (data, status, xhr) {
$.dialog(data, { header: { title: "订单确认", closebtn: '×' }, footer: { closebtn: '取消', okbtn: '确定', } }, function () {
var pay = this.$element.find("input.pay").val();
$.post("/Order/BuildOrder", { Payment: pay }, function (res) {
$.dialog(res.Message, { header: { title: "支付成功", closebtn: '×' }, close: res.Status ? null : function () { location.reload() } })
.$element
.dialogLoaded()
});
});
},
dialogLoaded: function () {
var that = $(this);
that.find("[data-page=true]").click(function (e) {
e.preventDefault(), $(this).navigate({
callback: function () {
var $that = $(this);
$that.find(".ordDetListBody").height($(window).height() - 240);
$that.find(".btnClose").click(function () { location.reload() })
}
})
});
},
selpro: function (pros) {
var div = $('<div style="width:100%;height:100%;overflow:scroll"></div>');
var ul = $('<ul class="productList"></ul>').appendTo(div);
for (var i in pros) {
$("<li class='clearfix' data-productno='" + pros[i].ProductNo + "'><span class='floatL'>" + pros[i].Name + "</span><span class='floatR'>" + pros[i].SalePrice + "</span></li>").appendTo(ul).bind("click", $.cart.addpro);
}
var d = $.dialog(div, { header: { title: "选择商品", closebtn: "×" } });
if (proScroll) proScroll.destroy();
proScroll = new iScroll(d.find(".productList")[0], { desktopCompatibility: true });
},
addpro: function (e) {
e = e || event;
var that = $(e.target).closest("li"), no = that.attr("data-productno");
$.post('/Order/AddCart', { ProductNo: no }, $.cart.succ);
var el = $(that).closest(".modal"), wr = el.prev();
el.remove(), wr.remove();
},
cartChange: function (e, i) {
i = i || 0;
var that = $(this),
val = that.val(),
init = that.attr("data-init") || 0,
dbtn = that.prev(".qtyDown"),
ubtn = that.next(".qtyUp");
oval = that.attr("oval") || val;
val = (/\d+/.test(val) && val > 1 ? parseInt(val) : 1) + i;
that.val(val), dbtn.toggleClass("disabled", val <= 1);
init && $.post("/Order/SetCart", { ProductNo: that.closest("tr").attr("data-ProductNo"), Amount: val });
that.attr("data-init", 1)
},
cartAdd: function (e) {
var that = $(e.currentTarget).closest("li"), no = that.attr("data-productno");
$.post('/Order/AddCart', { ProductNo: no }, $.cart.succ);
var el = $(that).closest(".modal"), wr = el.prev();
el.remove(), wr.remove();
},
cartClear: function () {
$.post("/Order/ClsCart")
},
cartDelete: function (e) {
e.preventDefault();
var that = $(this).closest("tr");
$.post("/Order/DelCart", { ProductNo: that.attr("data-ProductNo") });
that.remove();
$.cart.cartCalc();
},
cartCalc: function () {
var sum = 0;
$(".ordBody01 tr").each(function () {
var pri = $(".priTxt", this).val(), qty = $(".qtyTxt", this).val();
sum += pri * qty;
});
$(".ordTotal span").html(sum.toString().replace(/(\d+)(\.)(\d{0,2}).*$/, "$1$2$3"));
},
loadmem: function (data) {
$(".memList").html(data).memberLoaded()
},
memberRemove: function (e) {
e.preventDefault();
var ord = $('.ordMember'), $btn = $('.btnAddMember')
ord.remove(), $btn.show();
$("#word").attr({ "disabled": "disabled", "placeholder": "请先添加会员" });
$.post("/Order/EmptyMember")
},
memberSick: function (e) {
e.preventDefault();
var ord = $(this).closest('.ordMember');
$.post("/Order/MemberSick", { Id: ord.attr('data-MemberId') }, function (d) {
$.dialog(d, { header: { title: '会员病史', closebtn: '×' } })
})
},
memberLoaded: function () {
var that = $(this);
that.find("li[data-memberid]").click(function (e) {
var $that = $(this), ord = $('.ordMember'), memberId = $that.attr("data-MemberId"), memberLevel = $that.attr('data-MemberLevel'), $btn = $('.btnAddMember'), page = that.closest(".page"), linka = $that.find('.link a');
if (linka.size()) return (location.href = linka.attr('href'));
if (!ord.size()) ord = $('<div class="ordMember clearfix"></div>').insertAfter($btn);
ord.attr("data-MemberId", memberId).html(''),
$('<h2></h2>').text($('.name', $that).text()).appendTo(ord),
$('<button type="button" class="btnCancelMem"></button>').appendTo(ord).bind("click", $.cart.memberRemove),
$('<button type="button" class="btnStyle02 floatR btnMedRec">查看病历</button>').appendTo(ord).bind("click", $.cart.memberSick),
$('<span></span>').text(memberLevel).appendTo(ord),
$btn.hide(),
$("#word").attr({ "disabled": null, "placeholder": "请输入商品代码" }),
$.post("/Order/SetMember", { MemberId: memberId });
setTimeout(function () { page.remove() });
});
},
goBack: function () {
$(this).click(function (e) {
e.preventDefault();
var that = $(this).closest(".page").removeClass("active");
setTimeout(function () { that.remove() }, 300);
})
},
navigate: function (options) {
$(".modal,.modal-backdrop").remove();
var remote = $(this).attr("data-toggle") || $(this).attr("href");
$.get(remote, function (data) {
var p = $('<div class="page"></div>').html(data).appendTo("#dvContent").addClass("active");
options && options.callback && options.callback.apply(p);
})
},
}
$.fn.goBack = $.cart.goBack;
$.fn.navigate = $.cart.navigate;
$.fn.memberLoaded = $.cart.memberLoaded;
$.fn.cartChange = $.cart.cartChange;
$.fn.dialogLoaded = $.cart.dialogLoaded;
$(".ordBody01").height(height - 240);
$(".ordBody01 .priTxt").bind("change", $.cart.priceChange).change();
$(".ordBody01 .qtyTxt").bind("change", $.cart.qtyChange).change();
$(".btnEmpty").click(function (e) {
e.preventDefault();
var t = $(".ordBody01 tr");
!t.size() ?
$.dialog("订单还不没有商品呢", { header: { title: "清空订单", closebtn: "×" } }) :
$.dialog("清空订单商品?", { footer: { okbtn: "确定", closebtn: "取消" }, header: { title: "清空订单", closebtn: "×" } }, function () {
$.cart.cartClear(), t.remove(), $.cart.cartCalc()
});
});
$(".btnAddMember").click(function (e) {
e.preventDefault(); $(this).navigate({
callback: function () {
var that = $(this);
that.find(".btnBack").goBack();
that.find(".wraper").height(height - 110);
that.find(".memPhoneSearch input")
.keypress(function (e) {
var chars = "0123456789";
var chr = String.fromCharCode(e.charCode == undefined ? e.keyCode : e.charCode);
return e.ctrlKey || e.metaKey || (chr < ' ' || chars.indexOf(chr) > -1);
})
.bind('keyup change', function (e) {
var val = this.value, len = val.length, mem = that.find(".memPhoneSearch");
mem.toggleClass('cur', len > 0);
this.maxLength = /^1/i.test(val) ? 11 : 12;
});
that.find(".btnMemPhoClear").click(function () {
that.find(".memPhoneSearch input").val('').focus();
that.find(".memPhoneSearch").removeClass("cur");
})
that.find(".btnMemSearch").click(function (e) { e.preventDefault(), $(".memPhoneSearch form").submit() });
if (memberScroll) memberScroll.destroy();
memberScroll = new iScroll(that.find(".scroll")[0], { checkDOMChanges: true });
}
});
});
$(".btnSubmitOrder").click(function (e) {
e.preventDefault();
var procnt = $(".ordBody01 tr").size(), mem = $(".ordMember").size();
if (!mem) {
return $.dialog("您没有选择会员", { header: { title: "提交订单", closebtn: "×" } });
}
if (!procnt) {
return $.dialog("您没有添加商品", { header: { title: "提交订单", closebtn: "×" } });
}
$(".ordTotal form").submit();
});
$(".btnCancelMem").bind("click", $.cart.memberRemove);
$(".btnMedRec").bind("click", $.cart.memberSick);
$(".btnDelete").bind("click", $.cart.cartDelete);
$(".qtyDown,.qtyUp").bind("click", $.cart.qtyChange);
$("#word").keyup(function (e) {
var val = this.value, len = val.length;
$(".searchTxt").toggleClass('cur', len > 0);
});
$(document).on("submit", "form", function () {
$(":focus").blur();
})
cartScroll = new iScroll($(".ordBody01 table")[0], { checkDOMChanges: true });
})
javascript、jQuery的扩展方法,扩展实例展示代码相关推荐
- 【错误记录】Groovy 扩展方法调用报错 ( 静态扩展方法 或 实例扩展方法 需要分别配置 | 没有配置调用会报错 groovy.lang.MissingMethodException )
文章目录 一.报错信息 二.解决方案 一.报错信息 定义 Thread 扩展方法 , 下面的扩展方法 class ThreadExt {public static Thread hello(Threa ...
- ES6 class-数值扩展-方法扩展
目录 class 类 ES6 声明类 class 类静态成员 ES5 构造函数继承 ES6 类继承 子类对父类方法的重写 class 中 getter 和 setter 设置 数值扩展 Number. ...
- 【Groovy】Groovy 扩展方法 ( 扩展静态方法示例 | 扩展实例方法示例 | 扩展实例方法与扩展静态方法代码相同 )
文章目录 一.扩展静态方法示例 二.扩展实例方法示例 三.扩展实例方法与扩展静态方法代码相同 一.扩展静态方法示例 在上一篇博客 [Groovy]Groovy 扩展方法 ( Groovy 扩展方法引入 ...
- jQuery中slice()方法用法实例
本文实例讲述了jQuery中slice()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以选取匹配元素集的子集. 语法结构: 复制代码 代码如下: $(selector).slice(sta ...
- css()用法,jQuery的css()方法用法实例
本文实例讲述了jQuery的css()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的一个或多个样式属性. 语法结构: 语法一: 取得指定样式属性的属性值.以样式属性名称作为 ...
- javascript取随机数_js随机数生成方法和实例,生成[n,m]的随机整数,获取1-10之间的随机数...
随机数在实际中使用很广泛,比如要随即生成一个固定长度的字符串.数字.或者像js-task1中一样随机选择一个盒子,随机一个颜色等等.这个时候我们就要知道用js应该如何获取一个随机数. 一.js随机数知 ...
- C#中的扩展方法,Linq,IO和多线程的定义和实例
前段时间学C#的上转型,泛型,lambda表达式这些应用的理解很费劲.学过之后我多多的练习了几天,接下来继续复习C#的其他一些概念,说实在的这些知识点学过之后很容易忘,但是都是很重要的,所以发表在博客 ...
- php timespan,C#_C#基于TimeSpan实现倒计时效果的方法,本文实例展示了C#基于TimeSpan实 - phpStudy...
C#基于TimeSpan实现倒计时效果的方法 本文实例展示了C#基于TimeSpan实现倒计时效果的方法,比较实用的功能,对于初学者来说有一定的学习参考价值.具体实现方法如下: 示例代码如下: usi ...
- 【Groovy】Groovy 扩展方法 ( Groovy 扩展方法引入 | 分析 Groovy 中 Thread 类的 start 扩展方法 )
文章目录 一.Groovy 扩展方法引入 二. 分析 Groovy 中 Thread 类的 start 扩展方法 一.Groovy 扩展方法引入 Groovy 可以对 JDK 中的一些类进行 方法扩展 ...
最新文章
- Google Map API V3调用arcgis发布的瓦片地图服务
- R语言入门学习笔记 - 对R软件的认识
- 谷歌云使用账号密码_如何使用Google密码检查
- snipaste截图软件滚动截图_截图工具的逆袭,Snipaste 还可以这么玩
- 「递归算法」看这一篇就够了|多图
- Xamarin中使用DatePickerDialog的相关问题
- 沐猿而冠 -教育-读书笔记(一)
- 转载自(梦想天空)【必备】史上最全的浏览器 CSS JS Hack 手册
- 初学数模-MATLAB Quick Start! Part I
- java web 中的乱码
- 43岁的微软大重组:肢解Windows,拥抱AI,20年功臣离职
- PostgreSQL 锁等待跟踪
- ajax请求出错_学习笔记:Ajax总结
- Ant Design UI 框架的的安装及使用
- JavaMaven【三、常用指令】
- 如何用计算机装手机系统,如何使用手机给电脑安装Windows10系统?
- 计算机毕业设计SSM常见病辅助食疗系统【附源码数据库】
- 综述(十六)北京智慧城市发展规划的政策分析
- 中国科学报:吴文俊的数字之舞
- Toony Colors Pro 2项目分析——身体其他部位shader
热门文章
- Teched 2010
- 号外号外 你和python大牛的差距有多少?
- 为什么颜值越来越重要_看脸时代来了吗?为什么这个时代越来越注重颜值?
- vue引用js文件的多种方式
- Linux环境下安装nginx
- centos7部署DM8
- 如何在 bash 中使用键值字典
- 桌面上的计算机打开速度慢,电脑开机进入桌面特别慢
- 差分 ---- Codeforces Round #672 (Div. 2):C2. Pokémon Army (hard version)[差分的思想]
- ICPC 2005 hangzhou Generator (UVA1358)KMP + 期望DP / 高斯消元