jquery-ui使用jquery-ui对话框

Question

我正在使用jquery-mobile和jquery-ui，它似乎是对话框或彼此冲突。我想为我的对话框使用jquery-ui，但不知道如何让jquery.noConflicts（）与两者一起工作。

我有一个名为mobileListeners.js的监听器文件，这段代码是我试图用jquery-ui对话框工作的。

我jQuery的用户界面是用作用域.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 Mobile的或jQuery UI的CSS的。有一些冲突（如你找到的）与类名称。例如两个框架有以下类别：

• UI图标
• UI的对话框

如果你想看到类是相互矛盾的东西，检查对话框元素在你的开发工具（萤火虫等等），并查看哪些类规则被添加到元素以及它们来自哪个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类然后添加到对话框标签。