jquerymobile：如何显示左右两个按钮的图标

Question

如何在jquerymobile中显示左右两侧的按钮data-icon。 在此先感谢。

感谢， nehatha

Answer 1

在jQuerymobile文档，你可以修复图标位置的一个领域。如果你想同时显示（左和右），需要自定义的CSS和JS。

data-iconpos="left" 

data-iconpos="right" 

data-iconpos="top" 

data-iconpos="bottom" 

Answer 2

在头部分试试这个：

<div data-role="header"> 
    <a href="" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> 
    <h1>Add Contacts</h1> 
    <a href="" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> 
</div> 

Answer 3

创建按钮里面一格，然后在左侧的列中添加图像，然后CSS样式使其看起来是一样的

<a data-role="button" data-transition="slide" data-theme="b" href="#" 
     data-icon="arrow-r" data-iconpos="right"> 
    <div class="ui-grid-b"> 
     <div class="ui-block-a"> 
      <img src="image.png" class="iconleft"/> 
     </div> 
     <div class="ui-block-b"> 
      Button 
     </div> 
     <div class="ui-block-c"> 
     </div> 
    </div> 
</a> 

CSS：

.iconleft { 
    position: absolute; 
    top: 50%; 
    margin-top: -9px; 
    left: -5px; 
    width: 18px; 
    height: 18px; 
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.4); 
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4); 
    box-shadow: 0 1px 0 rgba(255,255,255,.4); 
    background-color: #666; 
    background-color: rgba(0,0,0,.4); 
    background-image: url(images/icons-18-white.png); 
    background-repeat: no-repeat; 
    -webkit-border-radius: 9px; 
    border-radius: 9px; 
} 

你总是可以反过来做，左边是数据图像，右边是图像，但它并不重要。

见我的工作例如here或this fiddle