頁面過渡jquery

我試圖複製JQuery Mobiles頁面轉換隻使用jquery，但我不能讓它工作。我試圖實現的是一個pagecontainer div持有一個頁面，當單擊一個href時，它將通過ajax獲取頁面，並用新的頁面div替換當前頁面div，並附加一些css進行轉換。有人能告訴我什麼林做錯了：頁面過渡jquery

的index.html：

<!doctype html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> 
     <script> 
      window.jQuery || document.write('<script src="js/libs/jquery-1.9.1.min.js"> 

      $(document).ready(function() { 
      $("#pagecontainer").gumbyPageTransition(); 
      }); 
     </script> 
    </head> 
<body> 
    <div id="pagecontainer"> 
     <div class="page"> <!-- SHOULD BE REPLACE BY test.html WHEN LINK IS CLICKED --> 
       <div class="container"> 
        <div class="row"> 
         <div class="twelve columns"> 
          <div style="width:100%;" class="large btn default"><a href="test.html" transition="left" class="pagehref">Page 1</a></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

的test.html

<div class="page"> 
    <div class="container"> 
     <div class="row"> 
     <div class="twelve columns"> 
      <div style="width:100%;" class="large btn default"><a href="index.html" class="pagehref" transition="right">Page 2</a></div> 
     </div> 
     </div> 
    </div> 
</div>

我的JS功能：

(function($){ 
    $.fn.extend({ 
     gumbyPageTransition: function() { 
      var container = $(this); 
      return this.each(function() { 
       $("a.pagehref").click(function(event){ 
       var currentPage, nextPage; 
       event.preventDefault(); 
       linkLocation = $(this).attr('href'); 
       transition = $(this).attr('transition'); 
       currentPage = $(container).find('.page'); 
       $.get(linkLocation).success(function(loadedHtml) { 
        var div = $("<div>").html(loadedHtml); 
        var nextPage = $(".page", div.get(0)); 
        container.append(nextPage.html()); 
        nextPage.attr("class", "page " + transition); 
        currentPage.one('webkitTransitionEnd', function(e) { 
         $(e.target).remove(); 
        }); 
        container[0].offsetWidth; 
        nextPage.attr("class", "page transition center"); 
        currentPage.attr("class", "page transition " + (transition === "left" ? "right" : "left")); 
        $(container).gumbyPageTransition(); 
       }); 
      }); 
     }); 
}});})(jQuery);

我的css：

#pagecontainer { 
position: absolute; 
width: 100%; 
height: 100%; 
overflow: hidden; 
} 
.page { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
-webkit-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 
} 
.page.right { 
-webkit-transform: translate3d(-100%, 0, 0); 
transform: translate3d(-100%, 0, 0); 
} 
.page.center { 
-webkit-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 
} 
.page.left { 
-webkit-transform: translate3d(100%, 0, 0); 
transform: translate3d(100%, 0, 0); 
} 
.page.transition { 
-webkit-transition-duration: .25s; 
transition-duration: .25s; 
}

對不起，如果格式化搞砸了。

此外，如何創建一個回調方法similare到on.pageinit爲jQuery Mobile的（在我的頭一種功能，當頁面加載完成時被調用，並加載該頁面的參數）

編輯：

這個問題似乎是以下警報代碼undefiend

$.get(linkLocation).success(function(loadedHtml) { 
alert(loadedHtml); --> Alerts the html, so this seems to work 
var nextPage = $(loadedHtml).find('#page');   
alert(nextPage.html()); --> Says undefiend

我有一些意見上的代碼的格式，但由於那麼它已經沉寂？讓我知道如果代碼需要更多的格式。

編輯： 通過包裝test.html在HTML，頭部和身體標籤我設法得到一個頁面的持有。但是，現在當我使用var nextPage = $（loadedHtml.html（））。find（「。page」）;我最終的容器元素，而不是頁面元素，所以轉變前的HTML看起來像這樣：

<div id="pagecontainer"> 
<div class="page transition right"> 
    <div class="container"> 
     <div class="row"> 
      <div class="twelve columns"> 
       <div style="width:100%;" class="large btn default"><a href="test.html" transition="left" class="pagehref">Page 1</a></div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="container"> <--- THIS IS WRONG SHOULD BE PAGE 
    <div class="row"> 
     <div class="twelve columns"> 
      <p>test test test</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="twelve columns"> 
      <div style="width:100%;" class="large btn default"><a href="test.html" transition="left" class="pagehref">Page 1</a></div> 
     </div> 
    </div> 
</div> 
</div>

這是推動我瘋了，我究竟做錯了什麼？

編輯： Pjuh，修復它：container.append（nextPage.html（））;應該是container.append（nextPage）;

感謝

來源

2013-07-06 user2076941

哎呀！縮進！ –

嘗試通過jsbeautifier.org – krishgopinath

運行你的代碼更好？有任何想法嗎？ – user2076941

在HTML 「頁」是一類

<div class="page">

和JS使用的是#page

var nextPage = $(loadedHtml).find('#page');

使用下面的線

var nextPage = $(loadedHtml).find('.page');

來源

2013-07-06 17:17:52 Devjit

對不起，這只是一個錯字。我正在玩id/class，看看我能否實現它。我也改變了測試。html使用,和元素...但仍然相同 – user2076941

所以，與var nextPage = $（loadedHtml）.find（'。page'）; – user2076941

頁面過渡jquery

回答

相關問題