购物车商品数量加减组件分享

本次分享的组件是购物车商品数量的加减组件。利用该组件可以很方便的实现购物车商品数量的调节。效果图如下。

购物车商品数量加减组件

组件JS源码：

  1. var alignmentFns = {
  2.     inputs: [],
  3.     init: function (input, step, max, min, digit) {
  4.         var width = input.width() - 3;
  5.         var height = input.width() / 4;
  6.         var _this = this;
  7.         width += 3;
  8.         input.attr("readonly", "readonly");
  9.         input.css("border", "none");
  10.         input.css("width", width - height * 2 - 2);
  11.         input.css("height", height);
  12.         input.css("padding", "0px");
  13.         input.css("margin", "0px");
  14.         input.css("text-align", "center");
  15.         input.css("vertical-align", "middle");
  16.         input.css("line-height", height + "px");
  17.         input.wrap("<div id = '" + input.attr('id') + "div' style = 'overflow:hidden;width:" + width + "px;height:" +
  18.             height + "px;border: 1px solid #CCC;'></div>");
  19.         input.before("<div id = '" + input.attr('id') +
  20.             "l'  onselectstart = 'return false;' style = '-moz-user-select:none;cursor:pointer;text-align:center;width:" +
  21.             height + "px;height:" + height + "px;line-height:" + height +
  22.             "px;border-right: 1px solid #CCC;float:left'>-</div>");
  23.         input.after("<div id = '" + input.attr('id') +
  24.             "r'  onselectstart = 'return false;' style = '-moz-user-select:none;cursor:pointer;text-align:center;width:" +
  25.             height + "px;height:" + height + "px;line-height:" + height +
  26.             "px;border-left: 1px solid #CCC;float:right'> + </div>");
  27.         $("#" + input.attr('id') + "l").click(function () {
  28.             _this.execute(input, step, max, min, digit, true);
  29.         });
  30.         $("#" + input.attr('id') + "r").click(function () {
  31.             _this.execute(input, step, max, min, digit, false);
  32.         });
  33.     },
  34.     execute: function (input, step, max, min, digit, _do) {
  35.         var val = parseFloat(this.format(input.val(), digit));
  36.         var ori = val;
  37.         if (_do) val -= step;
  38.         if (!_do) val += step;
  39.         if (val < min) {
  40.             val = min;
  41.         } else if (val > max) {
  42.             val = max;
  43.         }
  44.         input.val(this.format(val, digit)).change();
  45.     },
  46.     format: function (val, digit) {
  47.         if (isNaN(val)) {
  48.             val = 0;
  49.         }
  50.         return parseFloat(val).toFixed(digit);
  51.     },
  52.     data: {
  53.         default_data: {
  54.             "step": 1,
  55.             "min": 0,
  56.             "max": 10000,
  57.             "digit": 0
  58.         }
  59.     },
  60.     initialize: function () {
  61.         var inputs = $(
  62.             "input[user_data], input[data-digit], input[data-step], input[data-min], input[data-max], input.alignment");
  63.         inputs.each(function () {
  64.             alignmentFns.inputs.push(this.outerHTML);
  65.             var data = alignmentFns.data;
  66.             var user_data = eval("data." + $(this).attr("user_data"));
  67.             if (user_data == null) {
  68.                 user_data = JSON.parse(JSON.stringify(data.default_data));
  69.             }
  70.             var digit = $(this).data("digit");
  71.             if (digit != null && !isNaN(parseFloat(digit))) {
  72.                 digit = parseFloat(digit).toFixed(0);
  73.                 user_data.digit = parseFloat(digit);
  74.             }
  75.             var step = $(this).data("step");
  76.             if (step != null && !isNaN(parseFloat(step))) {
  77.                 user_data.step = parseFloat(step);
  78.             }
  79.             var min = $(this).data("min");
  80.             if (min != null && !isNaN(parseFloat(min))) {
  81.                 user_data.min = parseFloat(min);
  82.             }
  83.             var max = $(this).data("max");
  84.             if (max != null && !isNaN(parseFloat(max))) {
  85.                 user_data.max = parseFloat(max);
  86.             }
  87.             alignmentFns.init($(this), user_data.step, user_data.max, user_data.min, user_data.digit);
  88.             var data_edit = $(this).data("edit");
  89.             if (data_edit) {
  90.                 $(this).attr("readonly", null);
  91.             }
  92.         });
  93.     },
  94.     destroy: function () {
  95.         var inputs = this.inputs;
  96.         $.each(inputs, function (index, obj) {
  97.             var input = $(obj)[0];
  98.             var id = input.id;
  99.             $("#" + id + "div").replaceWith(input);
  100.         });
  101.     },
  102.     createType: function (types) {
  103.         $.each(types, function (index, obj) {
  104.             alignmentFns.data[obj.type] = obj.data;
  105.         });
  106.     }
  107. };

使用方式：

第一种如果应用场景的模式比较固定，可以将上述文件52~57行配置修改后写死即可。

第二种方式适合应用场景不固定的情况下支持自由配置。

参考示例如下：

  1. <input id="1" class="alignment" data-edit="true" data-max="100" data-digit="0" value="0" />

“data-edit”：是否支持编辑。

“data-max”：最大值。

“data-digit”：小数位。

“data-step”：步进值，每次加减的变动值。

“data-min”：最小值。

引用示例参考：

引用JS的方式很多，下面列举其一仅供参考。

  1. require(['numanimate','jquery'],function(){
  2.         alignmentFns.initialize();
  3.     })

OK，结束！需要注意的是如果一个页面引用多次该插件，必须为input框添加id属性。

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！