Question

我使用带jquery的phonegap，jquery mobile min和自定义页面滑动代码来构建应用程序。它基本上是一个主菜单，导致十个子菜单，导致大约200个静态html页面。

我将它全部合并到一个页面中，这样就不必每次更改页面都重新加载脚本。这最初起作用了，但是当我继续添加到页面时，在页面中的某个点之后没有任何链接工作，单击它们时没有任何反应。

我确信这些链接的html不存在问题，该点之后的每个链接都失败了。如果我将链接剪切/粘贴到文档的开头，它可以正常工作，但是在它的原始位置不再有效之后的下一行。

停止时，页面大小约为250kb，代码为3500行。

我通过创建10个单页来临时修复它，每个子菜单一个，这确实有效，但是如果可以的话，我会介绍它自己想要避免的问题。

在开始忽略代码的其余部分之前，phonegap，jquery或jquery mobile min是否限制了单个页面的大小？我能做些什么来解决这个问题吗？

这是我正在使用的自定义滚动脚本：

function navnext( next ) {
    $( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
        transition: "none"
    });
}
function navprev( prev ) {
    $( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
        transition: "none",
        reverse: true
    });
}


$( document ).one( "pagecreate", "#page1", function() {
    // Handler for navigating to the next page
    // Navigate to the next page on swipeleft
    $( document ).on( "swipeleft", ".ui-page", function( event ) {
        // Get the filename of the next page. We stored that in the data-next
        // attribute in the original markup.
        var next = $( this ).jqmData( "next" );
        if ( next ) {
            navnext( next );
        }
    });
    // The same for the navigating to the previous page
    $( document ).on( "swiperight", ".ui-page", function( event ) {
        var prev = $( this ).jqmData( "prev" );
        if (prev) {
            navprev( prev );
        }
    });
});

这就是html的样子：

<i></i><!DOCTYPE HTML>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script src="js/jqueryswipegrey.js"></script>
<link rel="stylesheet" href="css/deck.css"></link>
</head>
<body>


<div class="title"><h1>&nbsp;App Title</h1><a href="#page1"><img class="home" src="img/home.png"></a></div>


<!-- -------------------------------MAIN MENU-------------------------------------------------------------------------------------------------- -->


<div id="page1" data-role="page" data-prev="#page1" data-next="#pagesub1"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>&nbsp;&nbsp;&nbsp;

                Main Menu

</h2></ul> <div data-role="content">




<font size="4">

   <p class="line"><img src="img/redline.png" width="100% of window";></p>
<p class="menu"> <a class="link" href="#pagesub1"><img class="smallcardplot" src="img/01001.jpg">&nbsp;&nbsp;&nbsp;Link to First Submenu</a></p>
   <p class="line"><img src="img/redline.png" width="100% of window";></p>

然后：

<div id="pageplot" data-role="page" data-prev="#page1" data-next="#pagesubmenu2"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>&nbsp;&nbsp;&nbsp;

                1st Submenu

</h2></ul> <div data-role="content">

<font size="4">

<p class="line"><img src="img/redline.png" width="100% of window";></p>
<p class="menu"> <a class="link" href="#page01001"><img class="smallcardplot" src="img/01001.jpg">&nbsp;&nbsp;&nbsp;First Plot Page</a></p>
   <p class="line"><img src="img/line.png" width="100% of window";></p>

然后：

<div id="page01001" data-role="page" data-prev="" data-next="#page01002"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>&nbsp;&nbsp;&nbsp;

                First Content Page

</h2></ul> <div data-role="content">

                <img src="img/01001.jpg" class="plotimg">  <ul data-role="listview" data-inset="true">


<p>A few lines of text for this page

</ul></div></div></div>

Answer 1

我弄乱了一个html标签。现在修好了。

jquery移动单页大小上限

1 个答案: