2011-09-27 70 views
0

使用此:jQuery Mobile的可摺疊的div不正確的造型

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"> </script> 
</head> 
<body> 

<div data-role="collapsible" data-theme="a" data-content-theme="a"> 
    <h3>Header swatch A</h3> 
    <p>I'm the collapsible content with a themed content block set to "A".</p> 
</div> 
</body> 
</html> 

我發現,擴大可摺疊沒有預期的主題造型 - 事實上,它現在沒有。在查看頁面的源代碼並比較它將在jQuery手機上的示例頁面(http://jquerymobile.com/test/docs/content/content-collapsible.html)看起來,下面的類從動態創建的div中丟失圍繞標題下方的擴大段落內的可摺疊包裝:

ui-btn-up-a ui-corner-bottom 

運行示例頁面的代碼是他們自己的內部代碼,而不是一樣被用於部署所以我猜有東西在他們的這不在動態創建類的beta版本中。

問題是,是否有人知道錯誤是什麼以及如何解決這個問題?

+0

看看頁面http://jquerymobile.com/test/docs/content/content-collapsible.html標題下的「Theming Collapsible Headers」,你可以看到我想要的成果,內容是以在底部有一個很好的圓形邊框,所以它出現在一個帶擴展頭的塊中。它通過在由js創建的包裝div上包含類「ui-btn-up-a」來實現,而不是核心html代碼的一部分。當我嘗試複製它時,「ui-btn-up-a」不適用於包裝div,因此缺乏樣式。 –

回答

1

好答案是:「主題化的可摺疊內容要求的jQuery 1.6.4」

引用的版本是記錄,用於被張貼後兩天我張貼上述問題的RC1新聞稿之後。

我使用的是舊版本,查看了jQuery示例頁面這不是明顯的來源,因爲沒有版本控制參考立即apparant剛:

<script src="../../js/jquery.js"></script> 

我不知道誰願意投票將Mike提供的圖像路徑解決方案作爲這個問題的答案,因爲它不回答發佈的問題。

所以,如果你升級你的jq手機,你將需要升級你的jquery以利用所提供的優勢。

1

Google代碼CSS文件對圖像有相對引用。

url(images/icons-18-white.png); 

這很少有幫助。嘗試在本地託管CSS文件並更改引用以匹配您的文件結構。另外,除非您使用螢火蟲查看源代碼,否則您將看不到這些類。使用瀏覽器的「查看源代碼」選項將顯示服務器提供的代碼,而不是由JavaScript創建的代碼。

更新:只做了本地複製/粘貼,並且一切正常。所以這不是代碼,需要你的設置。

更新2:看着你的問題,我意識到你希望-content-爲主題。如果你需要,你必須爲內容分配一個data-role =「content」。

+0

嗨,感謝您的輸入,但問題不在於樣式路徑。可摺疊標題的樣式很好,所有圖標都存在等,這是可摺疊的內容缺少任何格式。如果我使用firebug並從jQuery移動網站中刪除類,那麼樣式也會消失,所以我非常確定這是動態創建的包裝div的情況,它沒有格式化主題外觀所需的所有類。如果您使用上面的代碼並按照描述來替換樣式表,那麼整個可摺疊樣式或帶有+ - 圖標的標題? –

+0

事實上,我可以使用Firebug編輯html並將ui-btn-up-a添加到該類中,並且它會根據需要進行更改。 –

+0

Hrm,好的,我會稍後再看看。只是一個簡單的FYI,Google不會永遠託管該測試代碼(我剛剛通過beta 2瞭解到了這一點),因此請確保在制定備用計劃時有一個備用計劃。 –