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.
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.
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');
});
EDIT:
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
.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: 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/