Question

如何在jquery mobile中为按钮显示左，右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

jquery mobile：如何显示按钮的左右图标

3 个答案: