在selecmenu对话框上自定义jquery移动关闭按钮

时间：2014-02-04 17:23:50

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

我正在尝试将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");
});

selectmenu实际上有一个选项'icon'但它不是关闭选项图标。 我的jqm版本是1.2.1

2 个答案:

答案 0 :(得分：1)

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

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

答案 1 :(得分：0)

带有data-native-menu="false"的