Несколько кнопок в шапке

Question

Я пытаюсь получить следующий эффект в фреймворке jQuery Mobile:

|-------------------------------------------------|
|[button1]      HeaderText/Image  [b1] [b2] [b3]  |
|-------------------------------------------------|

Где [b1], [b2] и [b3] - маленькие кнопки изображений в заголовке.

Возможно ли это в настоящее время?

Answer 1

просто так

<div class="ui-btn-right">
    <a href="index.html" data-role="button" data-iconpos="notext"></a>
    <a href="index.html" data-role="button" data-iconpos="notext"></a>
    <a href="index.html" data-role="button" data-iconpos="notext"></a>
</div>

Answer 2

У меня были проблемы с этим в прошлом. Хитрость заключается в том, чтобы заставить все ваши ссылки быть data-role="button" и обернуть указанные ссылки в контейнере с помощью class="ui-btn-[left/right]" (соответственно) Это учитывает традиционное позиционирование и разметку кнопок заголовка.

<div data-role="header">
    <div class="ui-btn-left">
        <a href="#" data-role="button">Button1</a>
    </div>
    <h1>HeaderText/Image</h1>
    <div class="ui-btn-right">
        <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">B1</a>
        <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">B2</a>
        <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">B3</a>
    </div>
</div>

Answer 3

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

<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right"> 
        <a href="index.html" data-role="button" data-icon="settings" data-ajax="false">Team Call</a>
        <a href="index.html" data-role="button" data-icon="delete" data-ajax="false">Logout</a> 
    </div>

Answer 4

Похоже, что это возможно, проверьте эту ссылку:

Сгруппированные кнопки на веб-сайте jQuerymobile Framework .

Answer 5

Чтобы использовать собственные кнопки с изображениями с правой стороны, вам нужно либо плавать, либо расположить div справа, а затем добавить свои кнопки.

Затем вам нужно переопределить jQuery.мобильные стили для этих определенных кнопок, чтобы они не получали округленный стиль градиентных кнопок, автоматически добавляемый библиотекой.

#header {
    float: right;
}

#header .ui-btn-up-b,
#header .ui-btn-hover-b, 
#header .ui-btn-down-b 
#header .ui-btn-active { 
    border: 0px; 
    background: none;  
}