2012-10-27 122 views

回答

2

看看在docu如何獲得自定義圖標

自定義圖標

要使用自定義圖標,指定具有類似的myapp電子郵件唯一名稱的數據圖標值 和按鈕插件將 通過在數據圖標值前綴ui-icon-生成一個類,並將其應用於按鈕:ui-icon-myapp-email。

然後,您可以在您的樣式表中編寫 CSS規則,該規則的目標是使用ui-icon-myapp-email 類來指定圖標背景源。要保持與其他圖標的視覺效果保持一致,請創建一個白色圖標18x18 像素以alpha透明度保存爲PNG-8。

在這個例子中,我們只是指着一個獨立的圖標圖像,但 你可以很容易地使用圖標精靈,並指定 定位代替,就像我們在 框架使用的圖標精靈。

.ui-icon-myapp-email { 
    background-image: url("app-icon-email.png"); 
} 

例如

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

<style> 
    .ui-icon-taifun { background-image: url("taifun.png"); } 
</style> 

<title>Test</title> 
</head> 

<body> 
    <div data-role="page"> 
    <div data-role="content"> 
     <div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false"> 
     <h2><img src="favicon.ico"> Pets</h2> 
     <ul data-role="listview"> 
      <li><a href="index.html">Canary</a></li> 
      <li><a href="index.html">Cat</a></li> 
      <li><a href="index.html">Dog</a></li> 
     </ul> 
     </div><!-- /collapsible --> 
     <div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false"> 
     <h2><img src="favicon.ico"> Farm animals</h2> 
     <ul data-role="listview"> 
      <li><a href="index.html">Chicken</a></li> 
      <li><a href="index.html">Cow</a></li> 
      <li><a href="index.html">Duck</a></li> 
     </ul> 
     </div><!-- /collapsible --> 
    </div> 
    </div> 

</body> 
</html> 

截圖:
screenshot