JQuerymobile: как отобразить обе кнопки, слева и справа для кнопки

Question

Как я могу отобразить оба влево, вправо data-icon с для кнопки в jquerymobile. Заранее спасибо.

Спасибо, nehatha

Answer 1

В документации jQuerymobile вы можете зафиксировать положение значка в одной области. Если вы хотите отобразить оба (левый и правый), необходимо настроить CSS и JS.

data-iconpos="left"

data-iconpos="right"

data-iconpos="top"

data-iconpos="bottom"

Answer 2

Создайте сетку внутри вашей кнопки, затем добавьте изображение в левом столбце, затем 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;
}

Вы всегда можете сделатьвсе наоборот, левый - датацион, а правый - изображение, но это не имеет значения.

См. мой рабочий пример здесь или эту скрипку

Answer 3

Попробуйте в заголовке:

<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>