• 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: '&times;' }, 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: '&times;' }, 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="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: "&times;" } });
                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: '&times;' } })
                })
            },
            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: "&times;" } }) :
      $.dialog("清空订单商品?", { footer: { okbtn: "确定", closebtn: "取消" }, header: { title: "清空订单", closebtn: "&times;" } }, 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: "&times;" } });
            }
            if (!procnt) {
                return $.dialog("您没有添加商品", { header: { title: "提交订单", closebtn: "&times;" } });
            }
            $(".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 });
    })

  • 相关阅读:
    CSS设置行高
    微信小程序-水平垂直居中
    CSS布局
    HTML学习笔记—标签
    微信小程序--通过请求网页获取信息并显示
    docker 安装完mysql 后客户端无法访问
    Docker
    docker安装成功启动失败
    嵌入式Servlet容器自动配置和启动原理
    springboot外置的Servlet容器
  • 原文地址:https://www.cnblogs.com/itjeff/p/4252413.html
Copyright © 2020-2023  润新知