jQuery Mobile中的超链接
假设在我们的导航栏有5个按钮,如果我们这样写按钮的链接:
<a id="gg" href="gg.html"><img src="images/gg.png" /><br />公告</a></span>
那么在实际运行时,点击这个链接,会出现错误提示:“Error Loading Page”,即页面加载错误。
错误原因是jQuery Mobile中,使用ajax加载页面,原理跟超链接不同。如果我们还想要使用超链接,可以在超链接上加属性:
rel="external"或者data-ajax="false"
下面是会议室页面(hys.html)的导航栏:
<div data-role="footer" data-position="fixed" data-theme="c">
<div data-role="navbar">
<ul>
<li><a id="gg" href="gg.html" rel="external"><img src="images/gg.png" /><br />公告</a></li>
<li><a id="sp" href="sp.html" rel="external"><img src="images/sp.png" /><br />审批</a></li>
<li><a id="qd" href="qd.html" rel="external"><img src="images/qd.png" /><br />签到</a></li>
<li><a id="hys" href="hys.html" rel="external"><img src="images/hys.png" /><br />会议室</a></li>
<li><a id="grxx" href="grxx.html" rel="external" class="ui-btn-active ui-state-persist"><img src="images/grxx.png" /><br />个人信息</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="c">
<div data-role="navbar">
<ul>
<li><a id="gg" href="gg.html" rel="external"><img src="images/gg.png" /><br />公告</a></li>
<li><a id="sp" href="sp.html" rel="external"><img src="images/sp.png" /><br />审批</a></li>
<li><a id="qd" href="qd.html" rel="external"><img src="images/qd.png" /><br />签到</a></li>
<li><a id="hys" href="hys.html" rel="external" class="ui-btn-active ui-state-persist"><img src="images/hys.png" /><br />会议室</a></li>
<li><a id="grxx" href="grxx.html" rel="external"><img src="images/grxx.png" /><br />个人信息</a></li>
</ul>
</div>
</div>