Quellcode durchsuchen

添加一个jquery扩展

guohh vor 6 Jahren
Ursprung
Commit
44a4b55c62

+ 11 - 10
ipuui/src/js/carousel.js

1
(function (ipuUI, $, iscroll) {
1
(function (ipuUI, $, iscroll) {
2
2
3
  /**
3
  /**
4
   * @deprecated 推荐使用 {@link HammerCarousel}
5
   * @uses IScroll.js
4
   * @uses IScroll.js
6
   * @class 简单封装IScroll.js的snap功能,实现banner功能
5
   * @class 简单封装IScroll.js的snap功能,实现banner功能
6
   * @private 可以使用hammerCarousel代替
7
   *
7
   *
8
   *      @example
9
   *      <!-- 组件html结构如下,li里内容可自定义 -->
10
   *      <div class="ipu-carousel ipu-hammer-carousel">
11
   *        <ul class="ipu-carousel-wrapper">
12
   *          <li ><img src="../../biz/img/01.jpg" alt=""></li>
13
   *          <li ><img src="../../biz/img/02.jpg" alt=""></li>
14
   *          <li ><img src="../../biz/img/03.jpg" alt=""></li>
15
   *          <li ><img src="../../biz/img/04.jpg" alt=""></li>
16
   *        </ul>
8
   *     @example
9
   *     <!-- 组件html结构如下,li里内容用户可自定义  -->
10
   *     <div class="ipu-carousel">
11
   *       <ul class="ipu-carousel-wrapper">
12
   *         <li ><img src="../../biz/img/01.jpg" alt=""></li>
13
   *         <li ><img src="../../biz/img/02.jpg" alt=""></li>
14
   *         <li ><img src="../../biz/img/03.jpg" alt=""></li>
15
   *         <li ><img src="../../biz/img/04.jpg" alt=""></li>
16
   *       </ul>
17
   *     </div>
17
   *     </div>
18
   *
18
   *
19
   * @constructor 不能直接访问该类,使用ipuUI.carousel(slt, option)生成实例 {@link ipuUI#carousel}
19
   * @constructor 不能直接访问该类,使用ipuUI.carousel(slt, option)生成实例 {@link ipuUI#carousel}
20
   * @param {Dom|JqueryObj|String} slt jquery对象或者jquery选择器或Dom元素
20
   * @param {Dom|JqueryObj|String} slt jquery对象或者jquery选择器或Dom元素
21
   * @param {Object} option 组件配置参数,默认配置见 {@link #cfg-defaultOption}
21
   * @param {Object} option 组件配置参数,默认配置见 {@link #cfg-defaultOption}
22
   *
22
   */
23
   */
23
  function Carousel(slt, option) {
24
  function Carousel(slt, option) {
24
    this.option = option = $.extend({}, this.defaultOption, option);
25
    this.option = option = $.extend({}, this.defaultOption, option);

+ 10 - 10
ipuui/src/js/hammerCarousel.js

13
   * 通过hammer.js实现的banner功能组件,
13
   * 通过hammer.js实现的banner功能组件,
14
   * 因为实现轮播,显示第一项后,再显示第一项,所以第一项有被复制到添加到最后
14
   * 因为实现轮播,显示第一项后,再显示第一项,所以第一项有被复制到添加到最后
15
   *
15
   *
16
   *      @example
17
   *      <!-- 组件html结构如下,li里的内容用户可自定义  -->
18
   *      <div class="ipu-carousel ipu-hammer-carousel">
19
   *        <ul class="ipu-carousel-wrapper">
20
   *          <li ><img src="../../biz/img/01.jpg" alt=""></li>
21
   *          <li ><img src="../../biz/img/02.jpg" alt=""></li>
22
   *          <li ><img src="../../biz/img/03.jpg" alt=""></li>
23
   *          <li ><img src="../../biz/img/04.jpg" alt=""></li>
24
   *        </ul>
25
   *      </div>
16
   *        @example
17
   *        <!-- 组件html结构如下,li里的内容用户可自定义  -->
18
   *        <div class="ipu-carousel ipu-hammer-carousel">
19
   *          <ul class="ipu-carousel-wrapper">
20
   *            <li ><img src="../../biz/img/01.jpg" alt=""></li>
21
   *            <li ><img src="../../biz/img/02.jpg" alt=""></li>
22
   *            <li ><img src="../../biz/img/03.jpg" alt=""></li>
23
   *            <li ><img src="../../biz/img/04.jpg" alt=""></li>
24
   *          </ul>
25
   *        </div>
26
   *
26
   *
27
   * @constructor  不能直接访问该类,调用 {@link ipu#hammerCarousel}生成实例
27
   * @constructor  不能直接访问该类,调用 {@link ipu#hammerCarousel}生成实例
28
   * @param {String|JqueryObj} slt
28
   * @param {String|JqueryObj} slt

ipuui/src/js/ipu-prefix.js → ipuui/src/js/ipuUI-prefix.js


+ 1 - 1
ipuui/src/js/ipu-suffix.js

23
  }
23
  }
24
24
25
  if (!window.ipu) {
25
  if (!window.ipu) {
26
    window.ipu = ipuUI;
26
    window.ipu = window.ipuUI;
27
  }
27
  }
28
})();
28
})();

+ 39 - 0
ipuui/src/js/jquery-extend.js

1
// 添加一些jquery扩展
2
(function (ipuUI, $) {
3
  // 在android部分手机上,部分窗体,在jqurey的ready函数执行时,宽度值还未确认,会导致部分UI或依赖宽度计算的代码出现问题
4
  // 皮函数用来处理此问题,等宽度明确或等待最多6s后,执行相关函数
5
  var readyBacks = [];
6
  var isSizeReady = false; // 需要记录状态
7
8
  $.extend({ // 扩展jquery工具方法
9
    sizeReady: function (callBack) {
10
      if (isSizeReady) {
11
        callBack();
12
      } else {
13
        readyBacks.push(callBack);
14
      }
15
    }
16
  });
17
18
  $(function () { // 添加监听页面ready函数
19
    var count = 0;
20
    var delayTime = 40; // 间隔时间ms
21
    var totalTime = 6000; // 最高等待6s=6000ms
22
23
    function checkSizeReady() {
24
      if (window.innerHeight != 0 || delayTime * count >= totalTime) {
25
        isSizeReady = true;
26
        for (var i = 0, j = readyBacks.length; i < j; i++) {
27
          readyBacks[i]();
28
        }
29
      } else {
30
        count++;
31
        setTimeout(checkSizeReady, delayTime);
32
      }
33
    }
34
35
    checkSizeReady();
36
  });
37
38
39
})(ipuUI || window, jQuery);

+ 11 - 11
ipuui/src/js/modal.js

69
69
70
    _modalTemplateTempDiv.innerHTML = modalHTML;
70
    _modalTemplateTempDiv.innerHTML = modalHTML;
71
71
72
    var modal = $(_modalTemplateTempDiv).children();
72
    var modalObj = $(_modalTemplateTempDiv).children();
73
73
74
    $(defaults.modalContainer).append(modal[0]);
74
    $(defaults.modalContainer).append(modalObj[0]);
75
75
76
    // Add events on buttons
76
    // Add events on buttons
77
    modal.find('.ipu-modal-button').each(function (index, el) {
77
    modalObj.find('.ipu-modal-button').each(function (index, el) {
78
      $(el).on('click', function (e) {
78
      $(el).on('click', function (e) {
79
        if (params.buttons[index].close !== false) modal.closeModal(modal);
80
        if (params.buttons[index].onClick) params.buttons[index].onClick(modal, e);
81
        if (params.onClick) params.onClick(modal, index);
79
        if (params.buttons[index].close !== false) modal.closeModal(modalObj);
80
        if (params.buttons[index].onClick) params.buttons[index].onClick(modalObj, e);
81
        if (params.onClick) params.onClick(modalObj, index);
82
      });
82
      });
83
    });
83
    });
84
    modal.openModal(modal);
85
    return modal[0];
84
    modal.openModal(modalObj);
85
    return modalObj[0];
86
  };
86
  };
87
87
88
  /**
88
  /**
374
      overlay.addClass('ipu-modal-overlay-visible');
374
      overlay.addClass('ipu-modal-overlay-visible');
375
    }
375
    }
376
    modalObj.removeClass('ipu-modal-out').addClass('ipu-modal-in').transitionEnd(function (e) {
376
    modalObj.removeClass('ipu-modal-out').addClass('ipu-modal-in').transitionEnd(function (e) {
377
      if (modal.hasClass('ipu-modal-out')) modal.trigger('closed');
378
      else modal.trigger('opened');
377
      if (modalObj.hasClass('ipu-modal-out')) modalObj.trigger('closed');
378
      else modalObj.trigger('opened');
379
    });
379
    });
380
    // excute callback
380
    // excute callback
381
    if (typeof cb === 'function') {
381
    if (typeof cb === 'function') {
476
    }
476
    }
477
  }
477
  }
478
478
479
  $.extends(ipuUI, modal);
479
  $.extend(ipuUI, modal);
480
480
481
481
482
  $(document).on('click', ' .ipu-modal-overlay, .ipu-popup-overlay, .ipu-close-popup, .ipu-open-popup, .ipu-close-picker', handleClicks);
482
  $(document).on('click', ' .ipu-modal-overlay, .ipu-popup-overlay, .ipu-close-popup, .ipu-open-popup, .ipu-close-picker', handleClicks);

ipuui/src/sass/ipu.scss → ipuui/src/sass/ipuUI.scss