使用jquery-ui对话框与jquery-mobile [英] Use jquery-ui dialog with jquery-mobile

问题描述

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

I'm using jquery-mobile and jquery-ui and it seems the dialogs or conflicting with each other. I would like to use jquery-ui for my dialogs but am not sure how to get jquery.noConflicts() to work with both.

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

I have a single listener file called mobileListeners.js with this piece of code that I am trying to get working with jquery-ui dialog.

我的jquery-ui的作用域是。 jqui-custom

My jquery-ui is scoped with .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（）同时运行可能导致样式冲突的元素。

jqm's styling is overwriting jqui and I am trying to prevent jqm from styling the buttons with their ugly looking buttons. It also appears that both the jqm .dialog() and the jqui .dialog() are being run on the same element which is probably causing the styling conflicts.

jquery-ui scoped dialog css

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双重组合。

EDIT 2: Here is a fiddle of what I'm talking about. The autocomplete works good with jquery-ui however when I press the pressme button the dialog looks like it has been double teamed by jquery-mobile and jquery-ui.

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

推荐答案

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

You will need to edit either the CSS for jQuery Mobile or for jQuery UI. There are some conflicts (as you've found) with class names. For instance both frameworks have the following classes:

• ui-icon


• ui-dialog

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

If you want to see what classes are conflicting, inspect the dialog element in your Developer Tools (FireBug, etc.) and see what class rules are being added to the element and what CSS file they come from.

我建议做一些事情，比如在jQuery UI CSS文件的规则开头添加一个类，以便您可以在HTML中指定您想要jQuery UI类而不是jQuery Mobile类。

I suggest doing something like adding a class onto the beginning of the rules in the jQuery UI CSS file so you can specify in your HTML that you want jQuery UI classes rather than jQuery Mobile classes.

更改：

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

收件人：

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

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

Then add the force-UI class to the dialog tag.

这篇关于使用jquery-ui对话框与jquery-mobile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！