开发杂记-无心整理

by kevin 15. 六月 2014 17:32 >

最近是累了点,懒了点。

  • 一个div元素,点击,页面外的元素,隐藏此div。
   1: $(document).mouseup(function (e)
   2: {
   3:     var container = $("YOUR CONTAINER SELECTOR");
   4:  
   5:     if (!container.is(e.target) // if the target of the click isn't the container...
   6:         && container.has(e.target).length === 0) // ... nor a descendant of the container
   7:     {
   8:         container.hide();
   9:     }
  10: });
  • jquery.bxslider 是一个很不错的插件。

目前的版本是4+,使用过程中,碰到了几个bug.

如果刚好slider正在切换[gotoprev,gotonext]的时候,进行重绘[redraw],会造成slider停止工作。修复代码如下:

修改前:

   1: el.redrawSlider = function () {
   2:             // resize all children in ratio to new screen size
   3:             slider.children.add(el.find('.bx-clone')).width(getSlideWidth());
   4:             // adjust the height
   5:             slider.viewport.css('height', getViewportHeight());
   6:             // update the slide position
   7:             if (!slider.settings.ticker) setSlidePosition();
   8:             // if active.last was true before the screen resize, we want
   9:             // to keep it last no matter what screen size we end on
  10:             if (slider.active.last) slider.active.index = getPagerQty() - 1;
  11:             // if the active index (page) no longer exists due to the resize, simply set the index as last
  12:             if (slider.active.index >= getPagerQty()) slider.active.last = true;
  13:             // if a pager is being displayed and a custom pager is not being used, update it
  14:             if (slider.settings.pager && !slider.settings.pagerCustom) {
  15:                 populatePager();
  16:                 updatePagerActive(slider.active.index);
  17:             }
  18:         }

修改后:

   1: el.redrawSlider = function () {
   2:     if (slider.working) {
   3:         // Wait 'speed' amount of time before redrawing
   4:         setTimeout(function () { el.doRedrawSlider(); }, slider.settings.speed);
   5:     } else {
   6:         // Redraw immediately
   7:         el.doRedrawSlider();
   8:     }
   9: };
  10:  
  11: el.doRedrawSlider = function() {
  12:     // resize all children in ratio to new screen size
  13:     slider.children.add(el.find('.bx-clone')).width(getSlideWidth());
  14:     // adjust the height
  15:     slider.viewport.css('height', getViewportHeight());
  16:     // update the slide position
  17:     if (!slider.settings.ticker) setSlidePosition();
  18:     // if active.last was true before the screen resize, we want
  19:     // to keep it last no matter what screen size we end on
  20:     if (slider.active.last) slider.active.index = getPagerQty() - 1;
  21:     // if the active index (page) no longer exists due to the resize, simply set the index as last
  22:     if (slider.active.index >= getPagerQty()) slider.active.last = true;
  23:     // if a pager is being displayed and a custom pager is not being used, update it
  24:     if (slider.settings.pager && !slider.settings.pagerCustom) {
  25:         populatePager();
  26:         updatePagerActive(slider.active.index);
  27:     }
  28: };

 

slider元素中,如果有img或者iframe无法正常加载,会引发slider无法正常工作。

修复前:

   1: var loadElements = function (selector, callback) {
   2:     var total = selector.find('img, iframe').length;
   3:     if (total == 0) {
   4:         callback();
   5:         return;
   6:     }
   7:     var count = 0;
   8:     selector.find('img, iframe').each(function () {
   9:         $(this).one('load', function () {
  10:             if (++count == total) callback();
  11:         }).each(function () {
  12:             if (this.complete) $(this).load();
  13:         });
  14:     });
  15: }

修复后:

   1: var loadElements = function (selector, callback) {
   2:     var total = selector.find('img, iframe').length;
   3:     if (total == 0) {
   4:         callback();
   5:         return;
   6:     }
   7:     var count = 0;
   8:     selector.find('img, iframe').each(function () {
   9:         $(this).one('load', function () {
  10:             if (++count == total) callback();
  11:         }).one('error', function() {
  12:             if (++count == total) callback();
  13:         }).each(function () {
  14:             if (this.complete) $(this).load();
  15:         });
  16:     });
  17: }
分享到: 更多