Geek asks and answers

Configure jquery mobile close on selecmenu dialog

I am trying to change the close button in the jqm dialog for something other than X. I cannot use CSS for this since I do not want it to be applied every time, so I am looking for a way to do this with jquery. This is a selecmenu dialog box with several choices

The reason I want to change the icon is because the close button may leave the user confused, because the weather will make his selection clear or not (since this is a multiple choice).

This is what I tried, but it does not work for mobile devices:

$('#MySelect-button').unbind('click').bind('click', function () {
        var iconBtn;
        $('#MySelect').selectmenu("open");
        iconBtn = $('#MySelect-menu').closest('div.ui-selectmenu, div.ui-dialog-contain')
                                     .find('div.ui-header span.ui-icon-delete')
                                     .addClass('ui-icon-check')
                                     .removeClass('ui-icon-delete');

        iconBtn.closest('a').attr('title', 'Done');

        $('#MySelect').selectmenu("refresh");
});

Selectmenu has the option "icon", but it is not a closing symbol. My jqm version is 1.2.1

+3
source
2

selectmenu data-native-menu="false" . jQM API selectmenu. , , DOM.

, pagebeforeshow, , .buttonMarkup().

$(document).on("pagebeforeshow", ".ui-dialog", function () {
    $(".ui-dialog .ui-header a").buttonMarkup({
        theme: "b",
        iconpos: "left",
        icon: "home"
    });
});

, . , "".

$(document).on("change", "#selectmenu_ID", function () {
    /* no option selected */
    if ($("option:selected", this).length == 0) {
        $(".ui-dialog .ui-header a .ui-btn-text").text("Close");
    }
    /* option selected */
    if ($("option:selected", this).length > 0) {
        $(".ui-dialog .ui-header a .ui-btn-text").text("Done!");
    }
});

0

:

$(document).on("pageinit", "#page1", function(){
    $("#MySelect-button").on("click", function(){
        setTimeout(ChangeIcon, 50);
    });
});

function ChangeIcon(){
    $('.ui-popup-active a[data-icon=delete], .ui-dialog a[data-icon=delete]').buttonMarkup({ icon: "check"}).prop("title", "done");
}

, . ChangeIcon, buttonMarkup A, title, "" . , .

DEMO

+1

More articles:


All Articles