jquery插件--增减数字

来源：互联网发布：java future 线程池编辑：程序博客网时间：2024/05/01 21:39

转载地址：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);});

0 0