我是一个非常新的手机,并且不得不拿起别人的代码。我遇到了页面导航的问题。我在列表项上有一个onClick事件,并且根据布尔值,我想导航到特定页面。
用户将移动到的两个可能页面几乎完全相同。只有一个div包含列表视图。最初我只有一个页面,我用javascript动态加载了div的html,但css没有被应用到所以我决定创建一个除了上面提到的div之外几乎相同的附加页面。
我现在的问题是,我在index.html中首先创建的div(页面)将用于导航,但第二个不会用于导航。
如果我按以下顺序定义div:
<div id="page1" data-role="page"></div>
<div id="page2" data-role="page"></div>
然后导航到page1将工作,导航到第2页将不会。但是如果我改变我将div放在index.html页面中的顺序,即
<div id="page2" data-role="page"></div>
<div id="page1" data-role="page"></div>
然后导航到第2页将起作用并导航到第1页不会。
希望这是有道理的。这是我的代码:
在head标签中我有以下功能:
function SetMyAccountsBool(bool){
MyAccountsBool=bool;
if (CheckBool){
alert('here');
$.mobile.changePage("file:///Users/roseannecarroll/Documents/workspace2/GirtBank/assets/www/index.html#MyAccTrans4");
//window.location = "file:///Users/roseannecarroll/Documents/workspace2/GirtBank/assets/www/index.html#MyAccTrans3";
//$("#MyAccTrans3").trigger("pagecreate");
}
else{
alert('here2');
//$.mobile.changePage('#MyAccTrans');
$.mobile.changePage("file:///Users/roseannecarroll/Documents/workspace2/GirtBank/assets/www/index.html#MyAccTrans");
}
};
然后在listview上,我将上述函数作为onClick事件调用。它正在进入该功能,因为我正在接收警报“这里&#39;或者&#39; here2&#39;取决于布尔值。
最后,这里有两个几乎相同的div:
<div id="MyAccTrans" div class="page" data-role="page" data-theme="a" style="text-align: center;">
<div data-role="header">
<a href="#TransferMoney" data-rel="back" data-icon="arrow-l" data-iconpos="notext" data-role="button" data-theme="c" data-transition="slide"></a>
<div class="centered">
<img src="../images/log_out.png" alt="Log_Out" onclick='javascript:location.href="#loginScreen";' class="c1">
<h3><div id="MyAccTrans_NAME"></div>Choose</h3>
</div>
</div>
<div data-role="content" style="padding: 10px;text-align:center">
<div class="centered">
<div class="centered" id="MyAccTrans_NUMBER"></div>
</div>
</p>
<div class="bookbal"><b><div id="MyAccTrans_BOOK_BAL"></div></b>
</div>
</p>
<div class="accountnum">
</div>
<div style="padding:10px">
<ul data-role="listview" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" role="heading">
Choose Existing Account To Transfer:
</li>
<div id="MyAccTrans_target_div" style="padding:10px">
<ul id="MyAccTrans_ul" data-inset="true" data-role="listview" data-divider-theme="a">
<li id="0" data-theme="c"><a href="#makeTransfer" data-transition="slide" >
Savings - 173</a><div ><a href="#MyAccTrans" data-transition="slide">
</a></div></li></ul>
</div>
</ul>
</div>
<div data-role="footer" class="centered3" data-theme="a" >
<a href="#" onClick="boolCheck();" class="tabBAR" data-role="button"><img src="../images/homeGrey50.png"></a>
<a href="#exchangeCalc" class="tabBAR" data-role="button"><img src="../images/EuroGrey50.png"></a>
<a href="#loanCalc" class="tabBAR" data-role="button"><img src="../images/CalculatorGrey50.png"></a>
<a href="#other" class="tabBAR" data-role="button" ><img src="../images/locationGrey50.png"></a>
</div>
</div>
和
<div id="MyAccTrans4" div class="page" data-role="page" data-theme="a" style="text-align: center;">
<div data-role="header">
<div class="centered">
<img src="../images/log_out.png" alt="Log_Out" onclick='javascript:location.href="#loginScreen";' class="c1">
<h3><div id="MyAccTrans_NAME"></div>Choose</h3>
</div>
</div>
<div data-role="content" style="padding: 10px;text-align:center">
<div class="centered">
<div class="centered" id="MyAccTrans_NUMBER4"></div>
</div>
</p>
<div class="bookbal"><b><div id="MyAccTrans_BOOK_BAL4"></div></b>
</div>
</p>
<div class="accountnum">
</div>
<div style="padding:10px">
<ul data-role="listview" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" role="heading">
Choose Existing Account To Transfer:
</li>
<div id="MyAccTrans_target_div4" style="padding:10px">
<ul id="MyAccTrans_ul4" data-inset="true" data-role="listview" data-divider-theme="a">
<li id="0" data-theme="c"><a href="#makeTransfer" data-transition="slide" >
Current - 004</a><div ><a href="#MyAccTrans" data-transition="slide">
</a></div></li></ul>
</div>
</ul>
</div>
<div data-role="footer" class="centered3" data-theme="a" >
<a href="#" onClick="boolCheck();" class="tabBAR" data-role="button"><img src="../images/homeGrey50.png"></a>
<a href="#exchangeCalc" class="tabBAR" data-role="button"><img src="../images/EuroGrey50.png"></a>
<a href="#loanCalc" class="tabBAR" data-role="button"><img src="../images/CalculatorGrey50.png"></a>
<a href="#other" class="tabBAR" data-role="button" ><img src="../images/locationGrey50.png"></a>
</div>
</div>
任何帮助表示赞赏