スナップscrollview

Question

を使用して、画面の中央にdiv要素は、おそらく誰もがこれに答えるために、長い週末の金曜日にはありません... jqueryのモバイルベータとjQueryモバイルScrollview プラグインを使用した作業

。 scrtollviewプラグインによってrenedredされていると、彼らが正常に5つのdivを横並びでカルーセル的に描かれている5つのdiv ...

  <div class="scrollme" data-scroll="x"> 
       <div class="indDiv"> one 
       </div> 
       <div class="indDiv"> two 
       </div> 
       <div class="indDiv"> three 
       </div> 
       <div class="indDiv"> four 
       </div> 
       <div class="indDiv"> five 
       </div>        
      </div> 


$('div.indDiv').bind('tap', function(e){ 
    var clickedDiv = $(this); 
    // snap clickedDiv to the middle of the page 
}); 

が、私はこの内側のdivをタップすることを、この要件を持っているがありますカルーセル、私はタップされたdivが画面の中央にスナップされるようにプログラムでコルセルを動かしたいと思うでしょう。私はscrollviewのプラグインメソッドで行う方法が表示されません...私は別のプラグインにも切り替える柔軟です... 誰か？

おかげ

Answer 1

ほとんどの場合、これは位置による文書本体の端に何かを追加する必要：相対/絶対的な問題を。

センタリングとシェーディングを可能にするシンプルなプラグインを作成しました。プロダクション品質ではないかもしれませんが、私はしばらくそれに満足しています。

(function($) { 
    $.fn.center = function() { 
     this.css("position", "absolute"); 
     this.css("top", (($(window).height() * .4) - this.height())/2 
       + $(window).scrollTop() + "px"); 
     this.css("left", ($(window).width() - this.width())/2 
       + $(window).scrollLeft() + "px"); 
     return this; 
    } 

    var shade = 0; 
    $.fn.unshade = function() { 
     $('.shade:last').remove(); 
     var $children = $('.shade-front:last').children(); 
     $children.each(function(k, v) { 
      if ($.data(v, 'shade-replace-previous').size() != 0) { 
       $.data(v, 'shade-replace-previous').append(v); 
      } else { 
       $.data(v, 'shade-replace-parent').prepend(v); 
      } 
     }); 
     $('.shade-front:last').remove(); 
     return $children; 
    } 

    $.fn.shade = function(css) { 
     var $shade = $('<div class="shade"/>'); 
     $shade.css({ 
      position : "absolute", 
      width : '100%', 
      height : '100%', 
      top : 0, 
      left : 0, 
      background : "#000", 
      opacity : .7 
     }) 
     $shade.click(function() { 
      $(this).unshade(); 
     }) 
     $('body').append($shade); 

     // Record our element's last position 
     this.each(function(k, v) { 
      var $this = $(v); 
      var prev = $this.prev(); 
      var par = $this.parent(); 
      $.data(v, 'shade-replace-previous', prev); 
      $.data(v, 'shade-replace-parent', par); 
     }); 

     // Add them to the shadefront 
     var $shade_front = $('<div class="shade-front"/>'); 
     $shade_front.css("background", "#FFF"); 
     $shade_front.css("margin", "auto"); 
     $shade_front.css("text-align", "center"); 
     if (css) { 
      $shade_front.css(css); 
     } 
     $shade_front.append(this); 
     $shade_front.center(); 
     $('body').append($shade_front); 
     return $shade_front; 
    } 

})(jQuery); 

Answer 2

私はこのプラグインを使用して、swiperight/leftを次の/ prevボタンにバインドしています。

https://github.com/Wilto/Dynamic-Carousel