我使用phonegap,jquery,jquery mobile min和自定义页面滑动代码构建应用程序。它基本上是一个主菜单,导航到十个子菜单,再导航到大约200个静态HTML页面。
我将所有内容合并到一个单独的页面中,以便在每次页面更改时不必重新加载脚本。这起初很有效,但当我继续添加内容后,在页面的某个特定点之后,没有任何链接有效,点击时没有反应。
我相信这不是与那些链接的HTML有关的问题,该点之后的每个链接都失败了。如果我将链接的剪切/粘贴到文档的开头,它就可以正常工作,但它原来位置之后的下一个链接就不再起作用了。
在停止的那一点,页面大小约为250kb,有3500行代码。
我通过创建10个单独的页面来临时修复了它,每个菜单都有一个页面,这确实可以工作,但会引入自己的问题,如果可能的话,我想避免这些问题。
Phonegap,jquery或jquery mobile min是否对单个页面的大小有限制,超过一定大小会忽略其余代码?是否有什么方法可以解决这个问题?
这是我正在使用的自定义滚动脚本:
我将所有内容合并到一个单独的页面中,以便在每次页面更改时不必重新加载脚本。这起初很有效,但当我继续添加内容后,在页面的某个特定点之后,没有任何链接有效,点击时没有反应。
我相信这不是与那些链接的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> 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>
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"> 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>
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"> 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>
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>