造型jquery移動面板

我正在開發我的第一個jquery移動應用程序。我能夠啓動並運行我的第一個面板。我基本上想要一個面板內的鏈接導航系統。我基本上使用了一個無序列表（<ul><li>home</li><li>search</li><li>... etc</li></ul>），但每當我嘗試對下面的#header_panel的屬性（例如<li> elemetns的寬度或高度）進行樣式設置時，它不會在頁面上生效。請任何幫助將不勝感激。我想這樣做是爲了使每個<li>都在彼此之下，並且設置字體大小，邊框，高度，寬度=面板的100％等。填充生效，但高度和寬度不生效。任何幫助將不勝感激。下面是我的代碼：造型jquery移動面板

<div data-role="panel" data-display="overlay" id="header_panel"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Articles</a></li> 
       <li><a href="#">Music</a></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
      </ul> 
     </div> 

<div data-role="panel" data-display="overlay" id="header_panel"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Articles</a></li> 
       <li><a href="#">Music</a></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
      </ul> 
     </div> 

#header_panel li{ 
width: 200px; 
height: 100px; 
padding: 10px; 
}

enter image description here

來源

2013-09-27 Dom

問題是稍微有一些混亂給我，從我的理解，你希望你的LI元素不佔用整個面板和浮動到左邊。

看看下面是否有幫助。

#header_panel li{ 
    width: 200px; 
    height: 100px; 
    padding: 10px; 
    display:inline-block; 
    float:left; 
}

在結束UL標記後，請務必清除您的浮點數。

來源

2013-09-27 01:36:19 googabeast

是的，你是對的，這不是一個jQuery的移動問題，因爲與我的HTML標記問題 – Dom

我創建了一個帶有2個面板的fiddle。使用左上角和右上角的按鈕打開它們。

右上角的按鈕使用UL上的data-role =「listview」來獲得標準jQM垂直列表。然後CSS用於進一步改變風格（字體，高度，邊框等）：

<div data-role="panel" data-display="overlay" data-theme="c" id="header_panel2"> 
<ul data-role="listview"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Articles</a></li> 
    <li><a href="#">Music</a></li> 
    <li></li> 
    <li></li> 
</ul> 
</div> 

/* PANEL 2 STYLES */ 
#header_panel2 li{ 
    height: 100px; 
    border: 2px solid black; 
} 
#header_panel2 a{ 
    font-size: 2em; 
}

從左上角的按鈕時，一個只使用CSS樣式列表：

<div data-role="panel" data-display="overlay" data-theme="c" id="header_panel"> 
<ul > 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Articles</a></li> 
    <li><a href="#">Music</a></li> 
    <li></li> 
    <li></li> 
</ul> 
</div> 

/* PANEL 1 STYLES */ 
#header_panel ul{ 
    list-style-type: none; 
} 
#header_panel li{ 
    width: 150px; 
    height: 100px; 
    padding: 10px; 
    border: 1px solid black; 
} 
#header_panel a{ 
    font-size: 2em; 
}

的CSS似乎工作正常，你確定你沒有壓倒你的項目中的其他地方嗎？

來源

2013-09-27 15:09:43 ezanker

造型jquery移動面板

回答

相關問題