Question

I’m starting with jQuery mobile and have some problems with my buttons.

The web application is a shopping list. It displays a list of items to shop and in the footer buttons on actions I can perform on the items.

The actions are:

1. increment number of items to buy
2. decrements number of items to buy
3. move item up in list
4. move item down in list
5. add new item
6. delete item
7. modify item text description

The actions are implemented in javascript and works fine. The problems I have is with controlling the buttons and the associated actions.

By experience, I have see that for the increment and decrement it is more convenient to have a button with an active state, for the other operations it is preferable to have a selected item and apply the action on the selected item when the button is pressed. When adding an item, the item would be inserted before the selected item, and if pressed when no item is selected, the new item is appended to the list.

I would also like to have 2 modes. In one mode, only the increment and decrement buttons are shown and the user can update the number of items in its list. In the other mode the user is modifying its list. It is in the second mode that the selected item is required.

I managed to associate a default action my item lists by using the .on() method as a delegate.

$('#itemList').on( "click", ".item", function(evt)
    { ctrl.doAction($(evt.currentTarget)); });

Here is the html code I use to test the first mode.

<!-- footer -->
<div data-role="footer" data-position="fixed" class="ui-bar" id="btnBar" >
    <a href="" data-role="button" data-icon="plus" id="btnPlus"> Plus </a>
    <a href="" data-role="button" data-icon="minus" id="btnMinus"> Minus </a>
</div>
<!-- /footer -->

What should I put as href value ? I don’t want the page to be reloaded. In some examples I see “#”.

This is how I associate the action to the button:

$('#btnPlus').on( "tap", function(evt) 
    { ctrl.doAction = ctrl.increment; });

Another problem I have is that there is no feedback on the button click action. When I click a button I would expect to have it highlighted for a short time. This doesn’t happen.

The browsers have also different behaviors. In firefox, the clicked button gets a blue halo apparently showing that it has the focus. But the button isn’t displayed as active.

If I put “#!” as href (don’t know what it means) on Android, the clicked button is shown active.

Should I use click or tap as event type ? How could I write click or tap ?

How could I implement a two state button displayed as active and inactive ?
How is an action button used : always displayed inactive and feedback when pressed ?

Answer 1

I solved the problem my self.

1. to switch between sets of buttons in the footer, I create multiple footers in my HTML document with style=”display:none” in the hidden footers. The one without this will be shown. I assigned a specific id to each footer so that I can write $(“#footer1”).hide(); $(“#footer2”).show();

2. I have buttons to switch between footers. The footer switching event handler must be called with the “mouseup” event. This is required for it to work on the iPad and Android phones.

3. To change appearance, don’t use .button() as suggested here. Use:

   $(“#myButton”)
   .removeClass( “ui-btn-up-a ui-btn-down-a ui-btn-hover-a” )
   .addClass(“ui-btn-up-b”)
   .attr( “data-theme”, “b” );

Note: There was a bug in my code which caused desperate hair pulling