0

Jqueryのみを使用してJQuery Mobilesページ遷移を複製しようとしていますが、うまくいきません。私が達成しようとしているのは、ページを保持する pagecontainer div です。href をクリックすると、ajax を介してページがフェッチされ、現在のページ div が新しいページ div に置き換えられ、css が追加されて遷移が行われます。誰かが私が間違っていることを教えてください:

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;
}

書式が乱れていたらすみません。

また、jquery mobile の on.pageinit に似たコールバック メソッドを作成するにはどうすればよいですか (ページの読み込みが完了したときに呼び出されるヘッダー内の関数と、読み込まれたページのパラメーター)

編集：

問題は、以下のコードが警告 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、head および body タグでラップすることにより、ページを取得することができました。しかし、今では var nextPage = $(loadedHtml.html()).find(".page"); を使用すると 最終的に page 要素ではなく container 要素になるため、遷移前の 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); である必要があります。

ありがとう

4

1 に答える 1

0

HTMLの「ページ」はクラスです

<div class="page">

そしてjsでは #page を使用しています

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

以下の行を使用してください

var nextPage = $(loadedHtml).find('.page');
于 2013-07-06T17:17:52.807 に答える