Estou a desenvolver um footer
em JQuery que passei para este FIDDLE
HTML/JQuery
<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toogle="false">
<div data-role="navbar" data-grid="b">
<ul>
<li><button type="button" id="listSO_options">Opções</button></li>
<li><a class = "ui-btn-active nav" href="#">menu</a></li>
<li><a class = "nav" href="#" id="listSO_btnDef" data-icon="gear">Definições</a></li>
</ul>
</div>
</div><!-- footer -->
Como se pode ver na área do resultado o primeiro elemento do footer
que é um button
fica com um tamanho relativo aos outros dois elementos mais pequeno.
Já tentei por o botão dentro de tags <a></a>
mas estragou ainda mais o footer
.
Eu estava a tentar fazer isto sem recorrer ao CSS e sem atribuir valores fixos de altura. É possível?
UPDATE
Tentei alterar o button para a como me sugeriram. Aqui está o FIDDLE
HTML/JQuery
<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toogle="false">
<div data-role="navbar" data-grid="b">
<ul>
<li><a id="listSO_options">Opções</a></li>
<li><a class = "ui-btn-active nav" href="#">menu</a></li>
<li><a class = "nav" href="#" id="listSO_btnDef" data-icon="gear">Definições</a></li>
</ul>
</div>
</div><!-- footer -->
O problema é que agora esse elemento já não se comporta como botão, pois quando é clickado este continua seleccionado o segundo elemento deixa de estar. O objectivo de estar a usar o button
em vez de a
era mesmo esse. Deixar o segundo elemento seleccionado apesar de carregar no primeiro e activar as funcionalidades do primeiro
<a>
function como um botão para disparar uma ação jsfiddle.net/kcpf4wuc<li>
vai despertar uma acção sim, mas como podes ver no teu fiddle que após clickares no "Opções", "menu" deixa de estar seleccionado e o "Opçoes" fica seleccionado. Eu estou a tentar fazer com que o "menu" continue seleccionado após clickar em "Opções"