Question

我试图仅使用Jquery复制JQuery Mobiles页面转换，但我无法让它工作。我想要实现的是一个包含页面的页面容器div，当单击一个href时，它将通过ajax获取页面并用新的替换当前页面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（＆＃34; .page＆＃34;）;我最终得到的是容器元素而不是页面元素，因此转换前的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）;

由于

Answer 1

在您的HTML“页面”中是一个类

<div class="page">

并在js中使用#page

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

使用以下行

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

页面转换jquery

1 个答案: