0

我试图仅使用 Jquery 来复制 JQuery Mobiles 页面转换，但我无法让它工作。我试图实现的是一个页面容器 div 保存一个页面，当单击一个 href 时，它将通过 ajax 获取页面并将当前页面 div 替换为新页面并附加一些 css 以进行转换。有人可以告诉我我做错了什么：

索引.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>

测试.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"); 我最终得到的是容器元素而不是页面元素，因此转换前的 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 回答