1

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

6
  • na documentação do jquery mobile ele especifica apenas a tag <a> como elemento do footer, porque você não usa o <a> como button ? ele funciona da mesma forma Commented 9/07/2015 às 18:11
  • @GabrielRodrigues eu já tinha experimentado usar o <a> em vez de <button>. Apesar de ter ficado com o tamanho pretendido, agora esse elemento comporta-se como uma tab e não como um botão Commented 10/07/2015 às 8:23
  • eu ainda não entendi o que você esta pretendendo fazer, nesse exemplo o <a> function como um botão para disparar uma ação jsfiddle.net/kcpf4wuc Commented 10/07/2015 às 11:16
  • @GabrielRodrigues Cada um dos <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" Commented 10/07/2015 às 11:22
  • 1
    entendi, porém não e boa pratica você fazer uma barra de navegação não se comportar como tal, para isso e melhor você adicionar um button fora da navegação mostrando que se trata das opções daquele menu, jsfiddle.net/kcpf4wuc/3 Commented 10/07/2015 às 11:51

1 Resposta 1

1

Na versão 1.4.5 do jquery Mobile esse recurso funciona nativamente no framework, veja:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />

<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toogle="false">
  <div data-role="navbar">
    <ul>
      <li>
        <button id="item1" data-icon="bars">Item 1</button>
      </li>
      <li><a id="item2" href="#" data-icon="grid">Item 2</a>
      </li>
      <li><a id="item3" href="#" data-icon="gear">Item 3</a>
      </li>
    </ul>
  </div>
</div>

Aconselhor atualizar, caso não seja possivel, compare as duas versões e veja o que modificou no jquery.mobile.css e adicione apenas aquilo que precisa.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .