JQuery Mobile Header中的自定義圖標

我正在嘗試在我的JQuery Mobile應用程序的頭文件中使用自定義圖標。我試圖使用的特定圖標就是來自Glyphish（http://glyphish.com/）的「play」圖標。當我嘗試在標題中的右側按鈕中使用它時，如下所示： http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html，我的圖標顯得很奇怪。我似乎無法在我的標題欄中獲得簡單的「播放」按鈕。這是我的代碼：JQuery Mobile Header中的自定義圖標

<style type="text/css"> 
    .navbar .ui-btn .ui-btn-inner { padding-top: 40px !important; } 
    .navbar .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; } 
    #custom .ui-icon{ background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px; } 
</style> 

<div id="myPage" data-role="page" data-dom-cache="false"> 
    <div data-role="header"> 
     <h1>My Title</h1> 
     <a id="play" href="#" data-icon="custom" data-iconpos="notext" class="ui-btn-right jqm-plus">Continue</a> 
    </div> 

    <div data-role="content"> 
    <!-- page content goes here --> 
    </div> 
</div>

有人可以告訴我如何解決這個問題嗎？

來源

2012-03-10 JQuery Mobile

奇，與像@JQuery移動用戶名，我想你將有答案。 – shanabus 2012-03-11 03:16:20

「codaniel」試圖說的不是你以後的樣子。他試圖解釋按鈕自定義圖標，但我意識到你正在尋找的是Navbar自定義圖標。看到這篇文章： http://stackoverflow.com/questions/6243871/glyphish-icons-display-in-jquery-mobile – 2012-09-04 01:03:27

jquery mobile有一種自定義按鈕圖標的方法。這是一個工作示例http://jsfiddle.net/codaniel/88kQu/1/

以下是http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

珍聞要使用自定義圖標，指定具有類似的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"); 
}

來源

2012-03-11 06:54:37 codaniel

更改自定義圖標的CSS名稱如下

<style type="text/css"> 
    ... clipped... 
.ui-icon-custom 
{ 
    background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px; 
}

jQuery Mobile的預規劃「UI圖標」給你提供的數據圖標屬性構建CSS類名的值。由於你的data-icon屬性的值是'custom'。相關的css類應該被稱爲'.ui-icon-custom'。

編號：http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

來源

2012-03-11 12:22:46 sumitkm

JQuery Mobile Header中的自定義圖標

回答

相關問題