Impostare più di due bottoni nell'header in jQuery Mobile

Se andiamo a vedere la documentazione di jQuery Mobile, vedremmo diversi esempi di bottoni sull'header.

Ma gli esempi si limitano ad un massimo di due bottoni, uno a destra e uno a sinitra del titolo.

Questo perchè, in verità, di default non sono previsti casi più particolari.

Oggi vediamo come impostarne più di due, tre nel caso specifico.

Per farlo ci basterà usare alcune direttive di JQM.

Questo l'HTML dell'header:

 <div data-role="header">
       <div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
             <a href="#panel_opt" data-role="button" data-icon="bars" data-iconpos="notext">Menu</a>
             <a href="" data-role="button" data-icon="search" data-iconpos="notext">Search</a>
       </div>
       <h1>OggiMare</h1>
       <a href="javascript:getPhoto('take');" data-icon="camera" data-role="button" data-iconpos="notext" class="ui-btn-right">Photo</a>
 </div>

I bottoni di sinistra sono racchiusi in un div che ha due proprietà specifiche:

• data-role="controlgroup"
• data-type="horizontal"

Inoltre i link hanno il data-role="button".

E questo è quanto!

Enjoy!