Добавление множества кнопок для заголовка в JQuery Mobile

Question

Я знаю, что мы можем добавить левую и правую кнопки в заголовок в мобильном приложении Jquery.

Но можем ли мы добавить больше кнопок или элементов управления в самом разделе заголовка?

Answer 1

Мне кажется, у меня есть лучшее решение,

<header data-role ="header" data-theme="b"> 
  <h1 class="ui-title" role="heading">Staff</h1>
    <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
     <a href="#" data-role="button" data-icon="gear">filter</a>
      <a href="#" data-role="button" data-icon="grid">move</a>
    </div>
</header>

Снимок экрана;

Answer 2

относительно этой информации:

Вы можете найти это здесь: http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png

Вы можете использовать этот код:

   <style type="text/css">              
    @media all{
        .my-header-grid.ui-grid-b .ui-block-a { width: 30%; }
        .my-header-grid.ui-grid-b .ui-block-b { width: 40%; }
        .my-header-grid.ui-grid-b .ui-block-c { width: 30%; }
        }
    }       
    </style>
    <div class="my-header-grid ui-grid-b" data-theme="a">
        <div class="ui-block-a ui-bar-a" data-theme="a">
            <div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;">
                <a href="#" class="ui-btn-left" rel="external" data-mini="true" data-role="button" data-icon="back" data-theme="a">Back</a>
                <a href="#" class="ui-btn-right" data-role="button" data-icon="gear" data-iconpos="notext">Edit</a>
            </div>
        </div>
        <div class="ui-block-b ui-bar-a">
            <div align="center" style="padding-top:3px;height:33px;text-align:center;height:40px;">
            <div style="padding-top:7px;">
                <article role="heading" aria-level="1">expand </article>
            </div>
            </div>
        </div>
        <div class="ui-block-c ui-bar-a">
            <div align="right" style="padding-top:3px;height:33px;height:40px;">
            <a href="#" class="ui-btn-left" data-role="button" data-icon="plus" data-iconpos="notext">Add</a>
            <a href="#" class="ui-btn-right" rel="external" data-mini="true" data-role="button" data-icon="refresh" data-theme="a">Refresh</a>                          
            </div>
        </div>
    </div><!-- /grid-b -->

если случайно вы программируете с помощью бритвенного движка c # mvc, не забудьте написать тег css media с 2 @ как so @@ media, потому что бритвенный движок обрабатывает 2 @ как единое целое.

вы видите и можете играть со всеми дизайнами, показанными здесь по этой ссылке:
http://jsfiddle.net/yakirmanor/BAat8/

---

iv добавил несколько ссылок, но я рекомендую прочитать:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/

простая имплантация:

    <header data-role ="header" data-theme="a"> 
        <a data-icon="back" href="/" rel="external">Back</a>
        <h1 class="ui-title" role="heading">Staff</h1>
        <a class="ui-btn-right" data-icon="back" href="#" rel="external">Refresh</a>
    </header>

или это:

<div data-role="header" data-theme="b">
        <a data-icon="back" href="/" rel="external">Back</a>
        <h1 class="ui-title" role="heading">Staff</h1>
        <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">          
            <a href="#" data-role="button" data-icon="gear">filter</a>
            <a href="#" data-role="button" data-icon="grid">move</a>
        </div>
     </div>

или это:

<div data-role="header" data-theme="e">
        <div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button" data-icon="gear">filter</a>
            <a href="#" data-role="button" data-icon="grid">move</a>
        </div>
        <h1 class="ui-title" role="heading">Staff</h1>
        <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button" data-icon="gear">filter</a>
            <a href="#" data-role="button" data-icon="grid">move</a>
        </div>
     </div>

надеюсь, что IV помог.

Answer 3

Может быть проще создать пользовательскую панель навигации вместо изменения панели инструментов заголовка. Вот документы: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html

Answer 4

Это может помочь:

<div class="ui-btn-right">
    <!-- Home Button -->
    <a href="index.html" data-role="button" 
       data-icon="refresh" data-iconpos="notext" data-direction="reverse" data-corners="true" 
       data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Refresh">
    </a>
    <!-- Home Button -->
    <a href="index.html" data-role="button" 
       data-icon="home" data-iconpos="notext" data-direction="reverse" data-corners="true" 
       data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Home">
    </a>
</div>

Это дает мне эти красивые округлые кнопки, две рядом с правой стороны.

Как на мобильных документах.

Работает в 1.1.1, не пробовал последнюю версию RC

Answer 5

Мне удалось добиться этого с помощью следующего кода:

<div data-role ="header" data-theme="b"> 
<a href="#" data-role="button" data-theme="b" class="ui-btn-left" id="BackButtonHandler">Prev</a>
<div data-role="controlgroup" data-type="horizontal" style="margin-left:75px;margin-top:5px;" >
    <a href="index.html" data-role="button" data-icon="arrow-l" >P.Week</a>
    <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">N.Week</a>
    </div>
<a href="#" data-role="button" data-theme="b" class="ui-btn-right" id="BackButtonHandler">Next</a>
</div>

Answer 6

Нет, насколько я нашел, существует жесткий предел в 2.Лучшее, что я смог придумать, - это показать еще одну неустановленную ссылку.

Однако есть навигационные панели. В одном из моих проектов мне понадобилось несколько кнопок в области заголовка, я поместилnavbar прямо под ним, и был вполне доволен результатами.

Они подробно объясняются здесь:

http://jquerymobile.com/test/docs/toolbars/docs-navbar.html