将jquery-ui对话框与jquery-mobile一起使用

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作用域对话框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配合使用效果很好，但是当我按下按键时，对话框看起来就像是由jquery-mobile和jquery-ui组成的双重组合。

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

Answer 1

您将需要编辑用于jQuery移动或jQuery UI的CSS。类名有一些冲突(正如你已经发现的)。例如，两个框架都有以下类：

• ui-icon
• ui-dialog

如果您想要查看哪些类冲突，请检查开发人员工具(FireBug等)中的对话框元素。并查看元素中添加了哪些类规则，以及这些规则来自哪个CSS文件。

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

更改：

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

至：

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

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