2013-07-30 117 views
2

我是相當新的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"/> 

任何幫助,將不勝感激!

+0

當你試圖問一個關於jQuery Mobile的問題,請考慮使用jQuery移動標籤:) – krishgopinath

+0

我完全超過打量,添加它。感謝您的編輯! –

+0

沒有問題:)高興能幫助:) – krishgopinath

回答

2

根據http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/

「的小組必須是同級標題,內容和頁腳元素 一個jQuery Mobile的頁面中,您可以之前或這些元素後添加面板標記要麼 ,但沒有在兩者之間。的面板不能 放在一頁之外,但這個約束將在未來 版本中刪除。」

所以纔將網頁中的面板DIV :)

<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 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> 

</div>  
</body> 

這裏的JSFiddle

+0

哇我恨愚蠢的錯誤那樣)。謝謝! –

+0

雖然可以將面板作爲外部.html文件添加。 –