Change the size of the button

Asked

Viewed 703 times

1

I’m developing a footer in Jquery that I passed to this 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 -->

As you can see in the result view the first element of footer which is a button gets a size relative to the other two smaller elements.

I tried to put the button inside tags <a></a> but further spoiled the footer.

I was trying to do this without resorting to CSS and without setting fixed height values. It is possible?

UPDATE

I tried to change the button to the way they suggested. Here is the 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 -->

The problem is that now this element no longer behaves as a button, because when it is clicked it remains selected the second element is no longer. The purpose of using the button instead of a was just that. Leave the second element selected despite clicking on the first and enabling the features of the first

jquery html

  • in the jquery mobile documentation it specifies only the <a> tag as a footer element, why don’t you use the <a> as a button? it works the same way

  • @Gabrielrodrigues I had already tried using <a> instead of <button>. Although it was the desired size, now this element behaves as a tab and not as a button

  • I still don’t understand what you’re intending to do, in this example the <a> Function as a button to trigger an http://jsfiddle.net/kcpf4wucaction/

  • @Gabrielrodrigues Each of the <li> will trigger an action yes, but as you can see in your fiddle after clicking on "Options", "menu" is no longer selected and "Options" is selected. I am trying to make the "menu" remain selected after clicking on "Options"

  • 1

    understood, but it is not good practice to make a navigation bar not behave as such, for this and better you add a button out of navigation showing that it is the options of that menu, http://jsfiddle.net/kcpf4wuc/3/

  • @Gabrielrodrigues and it is not even possible to add at least to the side with the same height and width?

Show 1 more comment

1 answer

1


In version 1.4.5 of jquery Mobile this feature works natively in the framework, see:

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

Advise update, if it is not possible, compare the two versions and see what modified on jquery.mobile.css and just add what you need.

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.