[英]JQuery Mobile Panel widget kills page
我正在嘗試將一個面板添加到我的jquery移動頁面,但每當我將代碼放入其中時,只顯示帶有加載小部件的白色屏幕,並且不會執行任何其他操作。 我正在使用由Google托管的JQuery 2.0.0,由JQuery托管的JQuery Mobile JS 1.3.1,以及由JQuery托管的JQuery Mobile css,但似乎仍然無法實現這一點。 面板代碼也直接從JQuery Mobile文檔中提取。
這是我所擁有的,它是一個簡單的登錄頁面:
<div data-role="page" id="mainPage">
<!-- leftpanel1 -->
<div data-role="panel" id="leftpanel1" data-position="left" data-display="reveal" data-dismissible="true" data-theme="a">
<div class="panel-content">
<h3>Left Panel: Reveal</h3>
<p>This panel is positioned on the left with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
<a href="#demo-links" data-rel="close" data-role="button" data-theme="a" data-icon="delete" data-inline="true">Close panel</a>
</div><!-- /content wrapper for padding -->
</div><!-- /leftpanel1 -->
<div data-role="content">
<div id="logo"><img src="img/logo.png" style="width:100%;height:25%"></div>
<br /><br /><br />
<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-transition="flow">Login</a>
<br />
<a href="#leftpanel1" data-role="button" data-inline="true" data-mini="true">Reveal</a>
<a href="moreInfo" data-role="button">More Info</a>
<br /><br /><br /><br /><br />
New to 2Gen? <a href="#register">Sign up for an account.</a>
<div data-role="popup" id="popupMenu">
<div data-role="popup" id="popupLogin">
<div data-role="fieldcontain">
<div style="padding:10px 20px;">
<h3>Please sign in</h3>
<input class="inputBox" type="text" id="loginUsername" value="" placeholder="Username">
<input class="inputBox" type="password" id="loginPassword" value="" placeholder="Password">
<br />
<div class="ui-grid-a">
<div class="ui-block-a">
<input type="checkbox" data-mini="true" id="rememberMeCheckbox" name="rememberMeCheckbox">
<label for="rememberMeCheckbox">Remember<br /> Me</label></div>
<div class="ui-block-b"><a href="#" onclick="login()" data-role="button" data-mini="true">Login</a>
</div></div>
</div><!-- /grid-a -->
</div>
</div>
</div>
</div>
</div><!-- /page -->
非常感謝任何幫助,謝謝
以下是我的結論: http : //jsfiddle.net/3dxKW/2/
編輯:
我弄清楚為什么它不起作用,顯然它不喜歡我使用JQuery 2.0.0時,所以當我切換到1.9.1時,它工作得很好。
我剛剛在jsfiddle.net上嘗試過它並運行http://jsfiddle.net/ouadie/3dxKW/
<div data-role="panel" id="leftpanel1"
data-position="left" data-display="reveal"
data-dismissible="true" data-theme="a">
<div class="panel-content">
...
</div>
</div>
jQuery Mobile 1.3尚不支持jQuery 2.0。
僅從1.4版本開始,它將與jQuery 2.0一起使用(7月 - 8月)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.