如何使一些項目（在列表視圖）已經離開圖標位置

Question

我在here

我嘗試由右至左與data-iconpos="left"一個項目更改圖標列表視圖，但它不工作。 如何做到這一點感謝

Answer 1

我想數據iconpos在1.4不再支持。

您可以使用CSS：

<ul data-role="listview" data-inset="true" data-divider-theme="a"> 
    <li class="iconLeft"><a href="#">Inbox</a></li> 
    <li><a href="#">Outbox</a></li> 
</ul> 
.iconLeft a{ 
    padding-left: 2.5em !important; 
    padding-right: 1em !important; 
} 
.iconLeft a:after{ 
    right: auto; 
    left: 9px; 
    transform: scaleX(-1); 
} 

更新DEMO

Answer 2

隨着jQuery Mobile的1.4，這爲我工作，而不需要額外的樣式：

<div data-role="page" id="demo-page"> 
    <div role="main" class="ui-content"> 
     <ul data-role="listview" data-inset="true"> 
      <li><a href="#" class="ui-btn ui-btn-icon-left ui-icon-delete">Option 1</a></li> 
      <li><a href="#" class="ui-btn ui-btn-icon-left ui-icon-gear">Option 2</a></li> 
      <li><a href="#" class="ui-btn ui-btn-icon-left ui-icon-info">Option 3</a></li> 
     </ul> 
    </div>  
</div> 

見demo。

Answer 3

費爾南多是正確的，在1.4內你可以採取該解決方案。然而，它激怒了我們，我們需要爲每個錨標籤添加每個類。級聯？或針對每個標籤。遠遠不止，jQuery手機中不必要的低級CSS。更好地定位相關鏈接，然後在必要時定義任何細節（例如，使用data-icon =「home」）。不要誤會我的意思，它是一個簡單的框架，我已經使用框架部署了幾個應用程序，但它可以輕得多，因此在處理源代碼時很容易處理。鑑於此，接受的答案提供了一種解決方法（可以將其應用於父 - 子），但以上是正確的方法在1.4版本內工作。

爲上述擴大（我知道原來的問題是一個利，但說明這些人可能會尋找所有和保持HTML光我的觀點），我們應用類的父標籤

<ul data-role="listview" class="iconLeft"><li>....</ul> 

（UL）。 然後再指定塔格和兒童使用其級聯方法（CSS ...線索是這個名字）：

.iconLeft li a {background:#ffffff !important;} 
.iconLeft li a{ 
    padding-left: 2.5em !important; 
    padding-right: 1em !important; 
} 
.iconLeft li a:after{ 
    right: auto; 
    left: 9px; 
    transform: scaleX(-1); 
} 

不是我們可以針對所有這些力。我將這種方法用於我的面板，以獲得與Google Adsense/analytics類似的外觀，我認爲這很漂亮。