在选择菜单对话框上自定义 jquery 移动关闭按钮答案

【问题标题】：Customize jquery mobile close button on selecmenu dialog在选择菜单对话框上自定义 jquery 移动关闭按钮
【发布时间】：2014-02-28 19:41:00
【问题描述】：

我正在尝试将 jqm 对话框上的关闭按钮更改为 X 以外的其他内容。我不能为此使用 CSS，因为我不希望每次都应用它，所以我正在寻找一种方法它与jquery。有问题的对话框是selecmenu，带有多项选择

我想修改图标的原因是关闭按钮可能会让用户对是否会清除他的选择感到困惑（因为它是多选）。

这是我尝试过的，但不适用于移动设备：

$('#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");
});

选择菜单实际上有一个选项“图标”，但它不是关闭选项图标。我的jqm版本是1.2.1

【问题讨论】：

标签： jquery-mobile select drop-down-menu icons

【解决方案1】：

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

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

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

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

$(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!");
    }
});

Demo

【讨论】：

pagebeforeshow 成功了。但是 onchange 事件似乎没有触发，但我正在寻找仅在移动设备上支持它，所以谢谢。

【解决方案2】：

这是一个简单的解决方法：

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

这是一个DEMO

【讨论】：