CODEWITHSUNDEEP
jquery-mobile
chris
chris

Reputation: 649

JQM: add/remove icon to navbar dynamically

I'm trying to use a footer navbar as switch between free and busy status. If the user taps on Free, the "check" icon should appear on the Free navbar button. When Busy is tapped, the "check" should be removed from the Free button and added to the Busy button. How can I accomplish this? I can change from one icon to another, but not from none to any or vice versa.

Thanks for any help!

Upvotes: 1

Views: 792

Answers (1)

Kiliman
Kiliman

Reputation: 20312

The simplest way is to add a check icon to both navbar buttons, and hide or show as needed.

I've created an example here http://jsfiddle.net/kiliman/d7MvN/

$(document).bind('pageinit', function(e, data) {
    // set initial status
    updateStatus('free');

    $('#nvb1 a').bind('click', function(e) {
        var $btn = $(this);
        updateStatus($btn.data('status'));

        // tell JQM that you handled the event
        e.stopPropagation();
        e.preventDefault();
    });
});

function updateStatus(newStatus) {
    var $nav = $('#nvb1');
    $nav.find('a[data-status=free] .ui-icon').toggle(newStatus === 'free');
    $nav.find('a[data-status=busy] .ui-icon').toggle(newStatus === 'busy');        
}

Upvotes: 3

Related Questions