Jquery mobile 自定义selecmenu对话框上的jquery mobile关闭按钮

Jquery mobile 自定义selecmenu对话框上的jquery mobile关闭按钮,jquery-mobile,select,drop-down-menu,icons,Jquery Mobile,Select,Drop Down Menu,Icons,我正在尝试将jqm对话框上的关闭按钮更改为X以外的其他按钮。我不能使用CSS,因为我不希望每次都应用此按钮,所以我正在寻找一种使用jquery的方法。正在讨论的对话框是一个包含多个选项的对话框 我想修改图标的原因是,关闭按钮可能会让用户对其选择是否将被清除感到困惑(因为它是一个多选) 这是我尝试过的,但对移动设备不起作用: $('#MySelect-button').unbind('click').bind('click', function () { var iconBtn;

我正在尝试将jqm对话框上的关闭按钮更改为X以外的其他按钮。我不能使用CSS,因为我不希望每次都应用此按钮,所以我正在寻找一种使用jquery的方法。正在讨论的对话框是一个包含多个选项的对话框

我想修改图标的原因是,关闭按钮可能会让用户对其选择是否将被清除感到困惑(因为它是一个多选)

这是我尝试过的,但对移动设备不起作用:

$('#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实际上有一个选项“icon”,但它不是close选项图标。
我的jqm版本是1.2.1

选择带有
data native menu=“false”
的菜单,长列表将动态转换为对话框。jQM API中没有可用的选项来控制转换后的selectmenu。因此,一旦它被插入DOM中,就需要对其进行操作

在打开对话框
pagebeforeshow
之前,请使用
.buttonMarkup()
更改按钮的选项

若要在勾选选项时更改按钮文本,请使用以下代码。请注意,当没有选择任何选项时,按钮的文本将更改回“关闭”


以下是一个简单的解决方法:

$(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函数,它更新标签的按钮标记以更改图标,并更新title属性以提供“完成”工具提示。选择器的第一部分负责弹出场景,而第二部分负责对话框场景

这里有一个


节目开始前的页面起了作用。不过,onchange事件似乎没有启动,但我一直在寻找仅在移动设备上支持这一点,所以谢谢。
$(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!");
    }
});
$(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");
}