jquery插件--增减数字

最新推荐文章于 2021-07-09 00:20:45 发布

strayyiyi

最新推荐文章于 2021-07-09 00:20:45 发布

阅读量365

点赞数

分类专栏： javascript

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

转载地址：http://www.ituring.com.cn/minibook/29471

http://jsfiddle.net/gs_jquery/fb4jczwd/

base.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link rel="stylesheet" href="css.css">
		<script type="text/javascript" src="jquery-2.1.0.js"></script>
		<script type="text/javascript" src="jquery.quantitySelect.js"></script>
	</head>
	<body>
		<div class="num-box fl">
			<a href="javascript:;" class="num-add fr">+</a>
			<a href="javascript:;" class="num-cut fl num-lose">-</a>
			<span class="num-number">1</span>
		</div>
		<div class="det-msg">
		</div>
		<script>
		$(function(){
			var quantity=$('.num-box').quantity({
				cutBtn:'.num-cut',
				addBtn:'.num-add',
				numBox:'.num-number',
				msgBox:'.det-msg'
			})
		})
		</script>
	</body>
</html>

css.css

a {
    color: #333;
    text-decoration: none;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.num-box, .det-msg {
    height: 28px;
    line-height: 28px;
    margin: 0 10px 0 0;
}
.num-box {
    border: 1px solid #b3b3b3;
    width: 80px;
    text-align: center;
}
.num-box a {
    display: block;
    width: 24px;
    height: 28px;
    cursor: pointer;
    background: #efefef;
}
.num-cut {
    border-right: 1px solid #b3b3b3;
}
.num-add {
    border-left: 1px solid #b3b3b3;
}
.num-number {
    font-size: 16px;
}
a.num-lose {
    color: #aaa;
    background: #fefefe;
    cursor: not-allowed;
}

jquery.quantitySelect.js

;
(function ($) {
    function Quantity(opt) {

        this.addBtn = null; //加按钮
        this.cutBtn = null; //减按钮
        this.numBox = null; //数量div
        this.msgBox = null; //消息div

        this.minbuy = 1; //最小购买量
        this.maxbuy = 99; //最大购买量
        this.stock = 99; //存量
        this.tuple = 1; //倍数购买

        this.no = 1; //当前选中的数量
        this.tupleMaxbuy = 99; //倍数最大购买量
        this.tupleMinbuy = 1; //倍数最小购买量

        this.init(opt);
    }

    //初始化
    Quantity.prototype.init = function (opt) {

        opt = opt || {};
        this.addBtn = $(opt.addBtn);
        this.cutBtn = $(opt.cutBtn);
        this.numBox = $(opt.numBox);
        this.msgBox = $(opt.msgBox);

        this.evt();
    };

    //负责绑定事件
    Quantity.prototype.evt = function () {
        var _this = this,
            timer,
            timerout;

        _this.addBtn.on('click', function () {
            _this.add();
        })
            .on('mousedown', function () {
            timerout = setTimeout(function () {
                timer = setInterval(function () {
                    _this.add();
                }, 200);
            }, 500);

        })
            .on('mouseup', function () {
            clearInterval(timer);
            clearTimeout(timerout);
        });

        _this.cutBtn.on('click', function () {
            _this.cut();
        })
            .on('mousedown', function () {
            timerout = setTimeout(function () {
                timer = setInterval(function () {
                    _this.cut();
                }, 200);
            }, 500);
        })
            .on('mouseup', function () {
            clearInterval(timer);
            clearTimeout(timerout);
        });
    };

    //加
    Quantity.prototype.add = function (n) {
        var no = this.no + this.tuple;
        if (no <= this.tupleMaxbuy) {
            this.no = no;
            this.numBox.text(this.no);
        }
        this.btnStyle();
        this.msgCtrl();
    };

    //减
    Quantity.prototype.cut = function (n) {
        var no = this.no - this.tuple;
        if (no >= this.tupleMinbuy) {
            this.no = no;
            this.numBox.text(this.no);
        }
        this.btnStyle();
        this.msgCtrl();
    };

    //设置最小购买量
    Quantity.prototype.setMinbuy = function (n) {
        this.minbuy = Number(n);
        this.reinit();
    };

    //设置最大购买量
    Quantity.prototype.setMaxbuy = function (n) {
        this.maxbuy = Number(n);
        this.reinit();
    };

    //设置库存
    Quantity.prototype.setStock = function (n) {
        this.stock = Number(n);
        this.reinit();
    };

    //设置倍数购买
    Quantity.prototype.setTuple = function (n) {
        this.tuple = n;
        this.reinit();
    };

    //设置值后，刷新一些状态
    Quantity.prototype.reinit = function () {
        //1.真实的最大购买量和真实的最小购买量计算
        this.tupleMaxbuy = Math.floor(Math.min(this.maxbuy, this.stock) / this.tuple) * this.tuple;
        this.tupleMinbuy = Math.max(Math.ceil(this.minbuy / this.tuple) * this.tuple, this.tuple);

        //2.将当前的选中数变成真实的最小购买量
        this.no = this.tupleMinbuy;

        //3.界面上显示真实的最小购买量
        this.numBox.text(this.tupleMinbuy);

        //4.控制样式
        this.btnStyle();

    };

    //控制按钮样式
    Quantity.prototype.btnStyle = function () {
        if (this.no <= this.tupleMinbuy) {
            this.cutBtn.addClass('num-lose');
        } else {
            this.cutBtn.removeClass('num-lose');
        }
        if (this.no >= this.tupleMaxbuy) {
            this.addBtn.addClass('num-lose');
        } else {
            this.addBtn.removeClass('num-lose');
        }
    };

    //消息控制
    Quantity.prototype.msgCtrl = function () {
        this.msgBox.empty();
        if (this.no >= this.tupleMaxbuy) {
            this.msgBox.text('本商品最多可购买：' + this.tupleMaxbuy + '件');
        }

        if (this.tuple > 1 && this.no <= this.tupleMinbuy) {
            this.msgBox.text('本商品最少买数为：' + this.tupleMinbuy + '件');
        }
    };

    $.fn.quantity = function (opt) {
        return new Quantity(opt);
    };
}(jQuery));

$(function () {
    var quantity = $('.num-box').quantity({
        cutBtn: '.num-cut',
        addBtn: '.num-add',
        numBox: '.num-number',
        msgBox: '.det-msg'
    });

    quantity.setTuple(1);
    quantity.setMinbuy(1);
    quantity.setMaxbuy(99);
    quantity.setStock(99);

});

strayyiyi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件--增减数字

转载地址：http://www.ituring.com.cn/minibook/29471http://jsfiddle.net/gs_jquery/fb4jczwd/base.html + - 1 $(function(){ var quantity=$('.num-box').
复制链接

扫一扫

专栏目录