在selecmenu对话框中自定义jquery手机关闭按钮 [英] Customize jquery mobile close button on selecmenu dialog

问题描述

我正在尝试将jqm对话框中的关闭按钮更改为X以外的其他对象。我不能使用CSS，因为我不希望每次使用CSS，所以我正在寻找一种方法它与jquery。该对话框是选择多个选择的选项

I am trying to change the close button on a jqm dialog to something other than X. I can't use CSS for this since I don't want this to apply every time, so I am looking for a way to do it with jquery. The dialog in question is a selecmenu with Multiple selects

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

The reason that I want to modify the icon is that the close button may leave the user confused as to weather his selection will be cleared or not (since it is a multiple select).

这是我已经尝试过但它不适用于移动设备：

This is what I have tried but it isn't working 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");
});

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

The selectmenu actually has an option 'icon' but it isn't the close option icon. My jqm version is 1.2.1

推荐答案

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

selectmenu with data-native-menu="false" and long list is converted into dialog dynamically. There are no available options in jQM API to control a converted selectmenu. Hence, you need to manipulate it once it's inserted into DOM.

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

Before opening dialog pagebeforeshow, change button's options using .buttonMarkup().

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

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

To change button's text when an option is ticked, use the below code. Note that when there's no option selected, button's text will be changed back to "Close".

$(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

这篇关于在selecmenu对话框中自定义jquery手机关闭按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！