我是相當新的jQuery和我想使用面板功能,但是我的代碼是不是真的工作。我複製了大部分內容:http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/只是爲了測試,面板佔據了整個屏幕,關閉按鈕不工作,我無法弄清楚我做錯了什麼。這是我的代碼:jQuery Mobile的面板
<body>
<div id="content">
<div data-role="page">
<div data-theme="a" data-role="header" data-position="fixed">
<h3>
Test
</h3>
<a href="#menu-panel"class="ui-btn-left" data-icon="bars">Menu</a>
</div>
</div>
<div data-role="panel" data-position="left" data-theme="a" data-position-fixed="true" data-display="push" id="menu-panel">
<ul data-role="listview" data-theme="a" class="nav-search">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-fixed-page2">Accordion</a></li>
<li><a href="#panel-fixed-page2">AJAX Navigation</a></li>
<li><a href="#panel-fixed-page2">Autocomplete</a></li>
<li><a href="#panel-fixed-page2">Buttons</a></li>
<li><a href="#panel-fixed-page2">Checkboxes</a></li>
<li><a href="#panel-fixed-page2">Collapsibles</a></li>
<li><a href="#panel-fixed-page2">Controlgroup</a></li>
<li><a href="#panel-fixed-page2">Dialogs</a></li>
<li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
<li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
<li><a href="#panel-fixed-page2">Footer toolbar</a></li>
<li><a href="#panel-fixed-page2">Form elements</a></li>
<li><a href="#panel-fixed-page2">Grids</a></li>
<li><a href="#panel-fixed-page2">Header toolbar</a></li>
<li><a href="#panel-fixed-page2">Icons</a></li>
<li><a href="#panel-fixed-page2">Links</a></li>
<li><a href="#panel-fixed-page2">Listviews</a></li>
<li><a href="#panel-fixed-page2">Loader overlay</a></li>
<li><a href="#panel-fixed-page2">Navbar</a></li>
<li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
<li><a href="#panel-fixed-page2">Pages</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">Popup</a></li>
<li><a href="#panel-fixed-page2">Radio buttons</a></li>
<li><a href="#panel-fixed-page2">Select</a></li>
<li><a href="#panel-fixed-page2">Slider, single</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
<li><a href="#panel-fixed-page2">Transitions</a></li>
</ul>
</div><!-- /panel -->
</div>
</body>
隨着腳本的.js和.css通話的頭:
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"/>
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/>
任何幫助,將不勝感激!
當你試圖問一個關於jQuery Mobile的問題,請考慮使用jQuery移動標籤:) – krishgopinath
我完全超過打量,添加它。感謝您的編輯! –
沒有問題:)高興能幫助:) – krishgopinath