Jquery-ui dialog mit jquery-mobile

Ich bin mit jquery-mobile und jquery-ui-und es scheint, die Dialoge oder Konflikte mit anderen. Ich möchte die jquery-ui für meine Dialoge, aber bin mir nicht sicher wie man jquery.noConflicts() funktioniert mit beiden.

Habe ich eine einzelne Datei namens listener mobileListeners.js mit diesem Stück code, ich werde versuchen, die Arbeit mit jquery-ui-dialog.

Mein jquery-ui ausgelegt ist mit .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');
});

BEARBEITEN:
jqm styling ist überschreiben jqui und ich bin versucht zu verhindern, dass jqm vom styling der buttons mit Ihren hässlichen suchen, Tasten. Es scheint auch, dass sowohl die jqm .dialog() und die jqui .dialog() laufen auf das gleiche element, was wahrscheinlich verursacht die styling Konflikte.

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; }

EDIT 2:
Hier ist ein Turnschuh, was ich bin reden über. Das AutoVervollständigen funktioniert gut mit jquery-ui allerdings, wenn ich drücken Sie die pressme Schaltfläche wird der dialog sieht aus wie es wurde Doppel zusammen, die von jquery-mobile und jquery-ui.

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

  • it seems the dialogs or conflicting with each other meine Magische see what the problem is over the internet-omatic ist gebrochen heute, kann Sie sein spezifischer?
  • sorry. Ich machte eine Bearbeiten.
InformationsquelleAutor Bot | 2011-12-08
  1. 0

    Werden Sie Bearbeiten müssen, müssen Sie entweder die CSS-Datei für jQuery Mobile oder jQuery UI. Es gibt einige Konflikte (wie Sie gefunden habe) mit Klasse Namen. Zum Beispiel besitzen beide frameworks die folgenden Klassen:

    • ui-icon
    • ui-dialog

    Wenn Sie möchten, um zu sehen, welche Klassen in Konflikt sind, untersuchen Sie die Dialogfeld element in Ihrem Entwickler-Tools (FireBug, etc.) und sehen, welche Klasse die Regeln werden Hinzugefügt, um das element und welche CSS-Datei, aus der Sie kommen.

    Schlage ich vor, etwas zu tun, wie das hinzufügen einer Klasse auf den Beginn der Regeln, die in der jQuery-UI-CSS-Datei, so können Sie in Ihrem HTML-Code, den Sie möchten jQuery-UI-Klassen, anstatt jQuery Mobile Klassen.

    Ändern:

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

    Zu:

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

    Dann fügen Sie die force-UI - Klasse auf den dialog-tag.

    • naja ich bin mit dem jquery-ui-scoped css so, es ist ziemlich viel die gleiche Sache, die Sie sprechen.
    • Ich bin mir nicht sicher, was du meinst, ich glaube nicht, verwenden Sie jQuery UI für viel. Kannst du uns ein Beispiel deiner CSS?
    • siehe oben. Das scoped-css-jquery-ui fügt nur eine weitere Klasse, um Konflikte zu vermeiden.
    • so fügen Sie das .jqui-custom Klasse der body - tag oder sowas?
    • Ja, ich entweder fügen Sie es zu dem element, das ich verwenden möchte die jquery-ui-format auf oder, um das übergeordnete element.
    • Ich machte ein jsfiddle und fügte zu meiner OP

    InformationsquelleAutor Jasper
Schreibe einen Kommentar