javascript闭包之购物车加减及提示

(function ($) {
    $.fn.iVaryVal = function (options) {
        var defaults = {
            minusCss: "J_minus",
            addCss: "J_add",
            eleCss: "J_input",
            val: 1, //开放接口
            onAddClick: function () { return false; },//开放接口
            onMinusClick: function () { return false; },  //开放接口        
            onBlur: function () { return false; } //开放接口
        };
        var opts = $.extend(defaults, options);
        return this.each(function () {
            $.fn.draw(opts, $(this));

        });
    };

    $.fn.draw = function (o, obj) {

        var minus = $("<a>", { "href": "javascript:void(0);" }).css(o.J_minus).html("-").appendTo(obj);
        var ele = ($("<input>", { "type": "text" }).css(o.J_minus).val(o.val)).appendTo(obj);
        var add = ($("<a>", { "href": "javascript:void(0);" }).css(o.J_minus).html("+")).appendTo(obj);

        add.click(function () { o.onAddClick(add); });

        minus.click(function () { o.onMinusClick(minus); });

        ele.click(function () { $(this).select(); });

        ele.keyup(function (e) {
            if ($(this).val() != '') {
                C = parseInt($(this).val());
                //非负整数判断
                if (/^[1-9]\d*|0$/.test(C)) {
                    $(this).val(C);
                    O = C;
                } else {
                    $(this).val(O);
                }
            }
            //键盘控制：上右--加，下左--减
            if (e.keyCode == 38 || e.keyCode == 39) {
                add.click();
            }
            if (e.keyCode == 37 || e.keyCode == 40) {
                minus.click();
            }
        });

        ele.blur(function () {
            o.onBlur(ele);

        });
    }
})(jQuery);

(function ($) {
    jQuery.fn.extend({
        showCartDialog: function (settings) {
            return $(this).each(
             function () {
                 var options = jQuery.extend({
                     flagCss: "tip",
                     flagWidth: $(this).outerWidth(),
                     isAnimate: false
                 },
                settings);
                 options.flagWidth = (parseInt(options.flagWidth) < 100) ? 163 : parseInt(options.flagWidth);
                 var oTip = $("<div class='ui-slider-tooltip  ui-corner-all'></div>");
                 var oPointer = $("<div class='ui-tooltip-pointer-down'><div class='ui-tooltip-pointer-down-inner'></div></div>");
                 var oTipInfo = $("<div>" + options.flagInfo + "</div>").attr("class", options.flagCss).css("width", options.flagWidth + "px");
                 //合并提示信息
                 var oToolTip = $(oTip).append(oTipInfo).append(oPointer);
                 //添加淡入效果
                 if (options.isAnimate) {
                     $(oToolTip).fadeIn("slow");
                 }
                 $(this).after(oToolTip);

                 //计算提示信息的top、left和width
                 var position = $(this).position();
                 var oTipTop = eval(position.top - $(oTip).outerHeight() - 8);
                 var oTipLeft = position.left;
                 $(oToolTip).css("top", oTipTop + "px").css("left", oTipLeft + "px");
                 window.setTimeout(function () { $(oToolTip).remove(); }, 2000);
             }
          );
        }
    })
})(jQuery);

 

.ui-slider-tooltip{	/* CSS属性顺序按照 字母首字母 排列*/
	background:#fdf9e5; 
	border:1px solid #fd7d2c;
	color:#222222;
	display: block;
	text-align: left;
	padding: 5px 3px 5px 3px;
	position: absolute;
	z-index:99999; 
}
.ui-corner-all {
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius:5px 5px;
	-webkit-border-top-right-radius:5px 5px;
	-webkit-border-bottom-right-radius:5px 5px;
	-webkit-border-bottom-left-radius:5px 5px;
}
.ui-tooltip-pointer-down {
	border-bottom-width: 0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid #fd7d2c;
	bottom:	-8px;
	display: block;
	height:0;
	left: 18%;
	margin-left: -7px;
	position: absolute; 
	width:0;
}

.ui-tooltip-pointer-down-inner {
	border-left: 6px dashed transparent; 
	border-right: 6px dashed transparent;
	border-top: 7px solid #fff;
	left: -6px;
	top: -9px;
	position: absolute; 
}

.tip
{
    font-size:9pt;
}

 

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="iVaryVal.js?333"></script>
<script type="text/javascript" src="showCartDialog.js"></script>
<link type="text/css" rel="stylesheet" href="tooltip.css" />
<script type="text/javascript">
    $(function () {      
        $(".i_box").iVaryVal({
            val: 10,
            onAddClick: function (ele) {
                ele.prev().val(parseInt(ele.prev().val()) + 1);
                ele.prev().showCartDialog({ flagInfo: "赶快去购物吧" });
            },
            onMinusClick: function (ele) {
                ele.next().val(parseInt(ele.next().val()) - 1);
                ele.next().showCartDialog({ flagInfo: "赶快去购物吧" });
            },
            onBlur: function (ele) {
                ele.showCartDialog({ flagInfo: "赶快去购物吧" });
                ele.trigger('keyup');
                if (ele.val() == '') {
                    ele.val(0);
                }
                //判断输入值是否超出最大最小值
            }

        });

    });
  
</script>
</head>
<body>
<div class="i_box">1</div>
<div class="i_box">2</div>
<div class="i_box">3</div>
<div class="i_box">4</div>
<div class="i_box">5</div>
<div class="i_box">6</div>
<div class="i_box">7</div>
<div class="i_box">8</div>
<div class="i_box">9</div>
<div class="i_box">10</div>
<div class="i_box">11</div>
<div class="i_box">12</div>
</body>
</html>