Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding many buttons to header in JQuery Mobile

I know that we can add left and right buttons in a header in Jquery Mobile App.

But can we any more buttons or controls in the header section itself?

like image 761
RK- Avatar asked Jun 06 '11 10:06

RK-


4 Answers

I think I have a better solution,

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

Screenshot;

enter image description here

like image 80
zardon Avatar answered Nov 17 '22 07:11

zardon


with regard to this info:
Device Widths
you can find it here: http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png

multiple buttons jquery mobile header
you can use this code:

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

if by any chance your programming with c# mvc razor engine don't forget to write the css media tag with 2 @ like so @@media because the razor engine treats 2 @ as one.

you see and can play with all of the designs shown here in this link:
http://jsfiddle.net/yakirmanor/BAat8/


iv added some links but i recommend youll read this:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/

the simple implantation is:

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

or this:

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

or this:

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

hope iv helped.

like image 31
Yakir Manor Avatar answered Nov 17 '22 09:11

Yakir Manor


It might be easier to create a custom navbar instead of modifying the header toolbar, Here si the docs: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html

like image 4
Phill Pafford Avatar answered Nov 17 '22 09:11

Phill Pafford


This might help:

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

This gives me those nice rounded buttons, two side by side on the right side.

Just like on the mobile docs.

Works in 1.1.1, haven't tried the latest RC

like image 3
mattdlockyer Avatar answered Nov 17 '22 09:11

mattdlockyer