2012-08-04 123 views
2

我工作的jquery移動應用程序的圖標按鈕沒有顯示出來。我編輯了正確的路徑圖標的CSS文件,他們仍然沒有顯示。感謝您提前提供任何幫助。jquery移動按鈕圖標

這裏就是我在做的按鈕

<div data-role="content"> 
    <a href="new.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="e">Capture New</a> 
    <a href="settings.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="e">Settings</a> 
    <a href="timeline.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="e">Timeline</a> 
</div><!-- /content --> 

代碼這是我在我的頭

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel = "stylesheet" href="assets/css/jquery.mobile-1.0.1.min.css" /> 
<script src="assets/js/jquery.js"></script> 
<script src="assets/js/jquery.mobile-1.0.1.min.js"></script> 

這裏是按鈕的裁剪出來的截圖已加載。圖標沒有顯示出一些奇怪的原因。 Here is a cropped out screenshot of the buttons

回答

2

我的猜測是,你沒有正確上傳與CSS樣式表相關的圖像目錄。如果您在開發人員工具中觀看控制檯或網絡選項卡,則應該會收到錯誤消息,指出找不到圖標精靈。

以下是您的獨立代碼,但使用jQuery Mobile文件的CDN版本進行了連接:http://jsfiddle.net/wzMRz/。您可以看到圖標按需顯示。

如果您自己託管jQuery Mobile文件,請務必在包含jQuery Mobile包含的ZIP文件中託管/images/目錄。該目錄需要與CSS樣式表位於同一目錄中,以便樣式表可以正確引用圖像(或者如果您想移動精靈,則只需更新樣式表中的URL以反映) 。

+0

感謝您的回答。我的路徑設置錯誤,我需要沿着路徑下的css文件。當css文件位於/assets/css/main.css路徑中時,我在做/assets/img/icons/icon.png,因此我需要將路徑設置爲../img/icons/icon.png。這只是一個愚蠢的錯誤。 – amedeiros 2012-08-04 17:13:49