Question

我正在尝试使用页脚导航栏在忙/闲状态之间切换。如果用户点击Free，则“check”图标应出现在Free navbar按钮上。点击Busy时，应从Free按钮中删除“check”并添加到Busy按钮。我怎么能做到这一点？我可以从一个图标更改为另一个图标，但不能从无图标更改为任何图标，反之亦然。

感谢您的帮助！

Answer 1

最简单的方法是在两个导航栏按钮上添加一个复选图标，并根据需要隐藏或显示。

我在这里创建了一个例子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');        
}

JQM：动态添加/删除导航栏图标

1 个答案: