Question

我正在使用jquery-mobile和jquery-ui，它们似乎是对话框或彼此冲突。我想在我的对话框中使用jquery-ui，但我不确定如何让jquery.noConflicts（）与它们一起使用。

我有一个名为mobileListeners.js的侦听器文件，我正在尝试使用这段代码来使用jquery-ui对话框。

我的jquery-ui的范围是.jqui-custom

    $('<div data-role="none" class="jqui-custom"></div>')
        .html('<p><span class="jqui-custom ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure you want to logout?</p>')
        .dialog({
            zIndex: 900,
            resizable: false,
            modal: true,
            title: 'Logout?',
            dialogClass: 'jqui-custom',
            buttons: {
                "Logoff": function() {
                    window.location.href = "logoff.php";
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });

    $(this).removeClass('ui-btn-active').addClass('ui-btn');
});

编辑： jqm的造型覆盖了jqui，我试图阻止jqm用丑陋的按钮设置按钮样式。似乎jqm .dialog()和jqui .dialog()都在同一元素上运行，这可能导致样式冲突。

jquery-ui scoped dialog css

.jqui-custom .ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.jqui-custom .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.jqui-custom .ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.jqui-custom .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.jqui-custom .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.jqui-custom .ui-dialog .ui-dialog-titlebar-close:hover, .jqui-custom .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.jqui-custom .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.jqui-custom .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.jqui-custom .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.jqui-custom .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.jqui-custom .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.jqui-custom .ui-draggable .ui-dialog-titlebar { cursor: move; }

编辑2：这是我正在谈论的一个小提琴。使用jquery-ui时自动完成功能很好，但是当我按下pressme按钮时，对话框看起来像是由jquery-mobile和jquery-ui双重组合。

http://jsfiddle.net/jostster/rdM3Y/

Answer 1

您需要编辑jQuery Mobile的CSS或jQuery UI。与类名有一些冲突（如你所见）。例如，两个框架都有以下类：

UI-图标
UI-对话框

如果要查看哪些类存在冲突，请检查开发人员工具（FireBug等）中的对话框元素，并查看要添加到元素的类规则以及它们来自哪个CSS文件。

我建议在jQuery UI CSS文件的规则开头添加一个类，这样你就可以在HTML中指定你想要jQuery UI类而不是jQuery Mobile类。

变化：

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

要：

.ui-dialog.force-UI { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

然后将force-UI类添加到对话框标记。

使用jquery-ui对话框与jquery-mobile

1 个答案: