@zengqiao@更新北京项目的ipuUI的框架代码----轮播

2019/bj-zqzt/ipu/ui/js/ipuUI.js

@@ -9,7 +9,7 @@
     */
    var ipuUI = {
      version: '0.2.2'
      version: '0.2.2.z'  // 针对ios PopPicker, DtPicker组件优化
    };
// tap点击效果处理，只针对jquery上面的click事件，依赖touch事件
@@ -93,10 +93,10 @@
      //根据不同浏览器获取不同原生事件event
      var hasTouch = "ontouchstart" in window,
          START_EVENT = hasTouch ? 'touchstart' : 'mousedown',
          MOVE_EVENT = hasTouch ? 'touchmove' : 'mousemove',
          END_EVENT = hasTouch ? 'touchend' : 'mouseup',
          CANCEL_EVENT = hasTouch ? 'touchcancel' : '';
        START_EVENT = hasTouch ? 'touchstart' : 'mousedown',
        MOVE_EVENT = hasTouch ? 'touchmove' : 'mousemove',
        END_EVENT = hasTouch ? 'touchend' : 'mouseup',
        CANCEL_EVENT = hasTouch ? 'touchcancel' : '';
      $(function () {
        var startXY, tapEl, timeOutID;
@@ -305,7 +305,7 @@
         */
        show: function (index, time) {
          this._pause();
          this.iscroll.scrollToPage(index, 0, time);
          this.scrollToPage(index, 0, time);
        },
        /**
         * 开始自动播放
@@ -500,43 +500,43 @@
       */
      DtPicker.prototype.defaultOption = {
        template: ''
        + '<div class="ipu-poppicker ipu-dtpicker">'
        + ' <div class="ipu-poppicker-header">'
        + '   <button class="ipu-btn ipu-btn-s ipu-poppicker-btn-cancel">取消</button>'
        + '   <button class="ipu-btn ipu-btn-s ipu-poppicker-btn-ok">确定</button>'
        + '   <button class="ipu-btn ipu-btn-s ipu-poppicker-btn-clear">清除</button>'
        + ' </div>'
        + ' <div class="ipu-poppicker-title">'
        + '   <label class="ipu-dtpicker-y"></label>'
        + '   <label class="ipu-dtpicker-m"></label>'
        + '   <label class="ipu-dtpicker-d"></label>'
        + '   <label class="ipu-dtpicker-h"></label>'
        + '   <label class="ipu-dtpicker-mi"></label>'
        + ' </div>'
        + ' <div>'
        + '   <div class="ipu-poppicker-body">'
        + '     <div class="ipu-picker" data-id="picker-y">'
        + '     <div class="ipu-picker-selectbox"></div>'
        + '     <ul></ul>'
        + '   </div>'
        + '   <div class="ipu-picker" data-id="picker-m">'
        + '     <div class="ipu-picker-selectbox"></div>'
        + '     <ul></ul>'
        + '   </div>'
        + '   <div class="ipu-picker" data-id="picker-d">'
        + '     <div class="ipu-picker-selectbox"></div>'
        + '     <ul></ul>'
        + '   </div>'
        + '   <div class="ipu-picker" data-id="picker-h">'
        + '     <div class="ipu-picker-selectbox"></div>'
        + '     <ul></ul>'
        + '   </div>'
        + '   <div class="ipu-picker" data-id="picker-mi">'
        + '     <div class="ipu-picker-selectbox"></div>'
        + '     <ul></ul>'
        + '   </div>'
        + ' </div>'
        + '</div>',
          + '<div class="ipu-poppicker ipu-dtpicker">'
          + ' <div class="ipu-poppicker-header">'
          + '   <button class="ipu-btn ipu-btn-s ipu-poppicker-btn-cancel">取消</button>'
          + '   <button class="ipu-btn ipu-btn-s ipu-poppicker-btn-ok">确定</button>'
          + '   <button class="ipu-btn ipu-btn-s ipu-poppicker-btn-clear">清除</button>'
          + ' </div>'
          + ' <div class="ipu-poppicker-title">'
          + '   <label class="ipu-dtpicker-y"></label>'
          + '   <label class="ipu-dtpicker-m"></label>'
          + '   <label class="ipu-dtpicker-d"></label>'
          + '   <label class="ipu-dtpicker-h"></label>'
          + '   <label class="ipu-dtpicker-mi"></label>'
          + ' </div>'
          + ' <div>'
          + '   <div class="ipu-poppicker-body">'
          + '     <div class="ipu-picker" data-id="picker-y">'
          + '     <div class="ipu-picker-selectbox"></div>'
          + '     <ul></ul>'
          + '   </div>'
          + '   <div class="ipu-picker" data-id="picker-m">'
          + '     <div class="ipu-picker-selectbox"></div>'
          + '     <ul></ul>'
          + '   </div>'
          + '   <div class="ipu-picker" data-id="picker-d">'
          + '     <div class="ipu-picker-selectbox"></div>'
          + '     <ul></ul>'
          + '   </div>'
          + '   <div class="ipu-picker" data-id="picker-h">'
          + '     <div class="ipu-picker-selectbox"></div>'
          + '     <ul></ul>'
          + '   </div>'
          + '   <div class="ipu-picker" data-id="picker-mi">'
          + '     <div class="ipu-picker-selectbox"></div>'
          + '     <ul></ul>'
          + '   </div>'
          + ' </div>'
          + '</div>',
        buttons: ['取消', '确认', '清除'],
        labels: ['年', '月', '日', '时', '分'],
        type: 'datetime',
@@ -689,7 +689,7 @@
            value = '00:00';
          } else {
            value = defaultPickerDate.getFullYear() + '-' + (defaultPickerDate.getMonth() + 1) + '-' + defaultPickerDate.getDate() + ' '
                + defaultPickerDate.getHours() + ':' + defaultPickerDate.getMinutes();
              + defaultPickerDate.getHours() + ':' + defaultPickerDate.getMinutes();
          }
        }
        var parsedValue = self._parseSetValue(value);
@@ -961,7 +961,7 @@
            value = value.getHours() + ":" + value.getMinutes();
          } else {
            value = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate() + ' '
                + value.getHours() + ":" + value.getMinutes();
              + value.getHours() + ":" + value.getMinutes();
          }
        }
@@ -1109,6 +1109,7 @@
        }
        this.mask.show();
        this.setSelectedValue(this.value);
        this.holder.show().width();
        this.holder.addClass("ipu-current");
      };
@@ -1131,7 +1132,10 @@
       */
      DtPicker.prototype.hide = function () {
        this.mask.close();
        this.holder.removeClass("ipu-current");
        var _this = this;
        this.holder.removeClass("ipu-current").transitionEnd(function () {
          _this.holder.hide();
        });
      };
      // 应该移除callback参数，提取出业成一个工具方法
@@ -1252,6 +1256,13 @@
          clickBack: null
        },
        _init: function () {
          var oldComponent = $(this.el).data('ipu-hammer-carousel');
          if (oldComponent) {
            oldComponent.destroy();
          }
          $(this.el).data('ipu-hammer-carousel', this);
          this.wrapper = $(">.ipu-carousel-wrapper", this.el);
          this.carouselItems = $(">li", this.wrapper);
          this.itemSize = this.carouselItems.size();  // 子项数量
@@ -1289,9 +1300,11 @@
          this.hammer.on("panstart panmove panend pancancel", Hammer.bindFn(this._onPan, this));
          this._sizeCount();
          $(window).resize(function () { // 在窗口尺寸变化时，更新尺寸信息
          this._sizeRefresh = function () {
            that.refresh();
          });
          };
          $(window).bind("resize", this._sizeRefresh);  // 在窗口尺寸变化时，更新尺寸信息
          if (this.option.index == null) {
            var activeIndex = this.carouselItems.filter(".ipu-current").index();
@@ -1492,6 +1505,19 @@
          } else if (ev.type == 'panmove') {
            this._move(delta);
          }
        },
        destroy: function () {	// 增加销毁处理
          $(this.wrapper).css("transform", "translate3d(0, 0, 0)");
          this.hammer.destroy();
          if (this.indicator) {
            this.indicator.remove();
          }
          $(window).unbind("resize", this._sizeRefresh);  // 解绑事件监听
          this.option.autoPlay = false;
          if (this.timeoutId) {
            clearTimeout(this.timeoutId);
          }
        }
      });
@@ -1558,7 +1584,7 @@
      function __dealCssEvent(eventNameArr, callback) {
        var events = eventNameArr,
            i, dom = this;// jshint ignore:line
          i, dom = this;// jshint ignore:line
        function fireCallBack(e) {
          /*jshint validthis:true */
@@ -1869,7 +1895,7 @@
      modal.openModal = function (modalObj, cb) {
        modalObj = $(modalObj);
        var isModal = modalObj.hasClass('ipu-modal'),
            isNotToast = !modalObj.hasClass('ipu-toast');
          isNotToast = !modalObj.hasClass('ipu-toast');
        isNotToast = false; // 强制打开新窗口
        if ($('.ipu-modal.ipu-modal-in:not(.ipu-modal-out)').length && defaults.modalStack && isModal && isNotToast) {
@@ -1939,22 +1965,18 @@
        if (typeof modalObj !== 'undefined' && modalObj.length === 0) {
          return;
        }
        if (modalObj == null) {
          return;
        }
        var isModal = modalObj.hasClass('ipu-modal'),
            isPopup = modalObj.hasClass('ipu-popup'),
            isToast = modalObj.hasClass('ipu-toast'),
            isLoginScreen = modalObj.hasClass('ipu-login-screen'),
            isPickerModal = modalObj.hasClass('ipu-picker-modal'),
            removeOnClose = modalObj.hasClass('ipu-remove-on-close'),
            overlay = isPopup ? $('.ipu-popup-overlay') : $('.ipu-modal-overlay');
          isPopup = modalObj.hasClass('ipu-popup'),
          isToast = modalObj.hasClass('ipu-toast'),
          isLoginScreen = modalObj.hasClass('ipu-login-screen'),
          isPickerModal = modalObj.hasClass('ipu-picker-modal'),
          removeOnClose = modalObj.hasClass('ipu-remove-on-close'),
          overlay = isPopup ? $('.ipu-popup-overlay') : $('.ipu-modal-overlay');
        if (isPopup) {
          if (modalObj.length === $('.ipu-popup.ipu-modal-in').length) {
            overlay.removeClass('ipu-modal-overlay-visible');
          }
        }
        else if (!(isPickerModal || isToast)) {
        } else if (!(isPickerModal || isToast)) {
          overlay.removeClass('ipu-modal-overlay-visible');
        }
        modalObj.trigger('close');
@@ -1977,8 +1999,7 @@
            if (removeOnClose && modalObj.length > 0) {
              modalObj.remove();
            }
          }
          else {
          } else {
            modalObj.remove();
          }
        });
@@ -2190,7 +2211,7 @@
    (function (ipuUI, $) {
      function __dealCssEvent(eventNameArr, callback) {
        var events = eventNameArr,
            i, dom = this;// jshint ignore:line
          i, dom = this;// jshint ignore:line
        function fireCallBack(e) {
          if (e.target !== this) return;
@@ -2900,10 +2921,10 @@
       *
       *    // layer=2时的数据结构，有额外data属性存放下一层级数据
       *    var data-1 = [{
   *      text:'湖南'，value:'HN', data:[{text:'长沙', value:'CS'}, {text:'湘谭'， value:'XT'}]
   *     },{
   *      text:'湖北'，value:'HB', data:[{text:'武汉', value:'WH'}, {text:'天门'， value:'TM'}]
   *      }
       *      text:'湖南'，value:'HN', data:[{text:'长沙', value:'CS'}, {text:'湘谭'， value:'XT'}]
       *     },{
       *      text:'湖北'，value:'HB', data:[{text:'武汉', value:'WH'}, {text:'天门'， value:'TM'}]
       *      }
       *    ];
       *
@@ -2974,17 +2995,17 @@
       */
      PopPicker.prototype.defaultOption = {
        template: '<div class="ipu-poppicker">'
        + '<div class="ipu-poppicker-header">'
        + '<button class="ipu-btn ipu-btn-s ipu-poppicker-btn-cancel">取消</button>'
        + '<button class="ipu-btn ipu-btn-s ipu-poppicker-btn-ok">确定</button>'
        + '</div>'
        + '<div class="ipu-poppicker-body">'
        + '</div>'
        + '</div>',
          + '<div class="ipu-poppicker-header">'
          + '<button class="ipu-btn ipu-btn-s ipu-poppicker-btn-cancel">取消</button>'
          + '<button class="ipu-btn ipu-btn-s ipu-poppicker-btn-ok">确定</button>'
          + '</div>'
          + '<div class="ipu-poppicker-body">'
          + '</div>'
          + '</div>',
        pickerTemplate: '<div class="ipu-picker">'
        + '<div class="ipu-picker-selectbox"></div>'
        + '<ul></ul>'
        + '</div>',
          + '<div class="ipu-picker-selectbox"></div>'
          + '<ul></ul>'
          + '</div>',
        data: [],    // 数据
        layer: 1,   // 数据层级
        btns: ['取消', '确认'],
@@ -3014,6 +3035,7 @@
          this.option.callBack = callBack;
        }
        this.mask.show();
        this.holder.show().width();
        this.holder.addClass("ipu-current");
      };
@@ -3022,7 +3044,10 @@
       */
      PopPicker.prototype.hide = function () {
        this.mask.close();
        this.holder.removeClass("ipu-current");
        var _this = this;
        this.holder.removeClass("ipu-current").transitionEnd(function () {
          _this.holder.hide();
        });
      };
      /**
@@ -3533,7 +3558,8 @@
      });
      // 处理ios点击延迟问题
      FastClick.attach(document.body);
      // FastClick.attach(document.body);
      // ios 输入框响应不好，暂时屏蔽fastclick的处理
    });
    return ipuUI;