jquery-mobileとjquery-uiダイアログを使用する

Question

私はjquery-mobileとjquery-uiを使用しています。これはダイアログや対立しているようです。私はダイアログにjquery-uiを使いたいのですが、jquery.noConflicts（）を両方とも動作させる方法がわかりません。

私は、jquery-uiダイアログを使用して作業しようとしているこのコードでmobileListeners.jsという単一のリスナーファイルを持っています。

私の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'); 
}); 

EDITにスコープされています jqmのスタイリングはjquiを上書きしていると私は彼らの醜い探してボタンでボタンをスタイリングからjqmを防ぐためにしようとしています。また、jqm .dialog()とjqui .dialog()の両方が同じ要素で実行されているようで、おそらくスタイリングの競合が発生しているようです。ここで 私が話しているかのフィドルです：

jqueryの-UIは

.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をダイアログCSS

スコープ。オートコンプリートはjquery-uiでうまくいきますが、pressmeボタンを押すとjquery-mobileとjquery-uiの2つのチームが表示されます。

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

Answer 1

あなたはjQueryのモバイル用やjQueryのUIのCSSのいずれかを編集する必要があります。クラス名にはいくつかの競合があります。 Firebugの（あなたが競合しているかのクラスを見たい場合は、あなたの開発者ツールのダイアログ要素を検査

• UI-アイコン
• UI-ダイアログ

：たとえば両方のフレームワークは、以下のクラスを持っていますなど）、どのクラスルールが要素に追加されているのか、どのCSSファイルがそれらから来るのかを確認します。

jQuery UI CSSファイルのルールの先頭にクラスを追加するなど、jQuery MobileクラスではなくjQuery UIクラスをHTMLで指定できるようにすることをお勧めします。

変更：

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

へ：

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

するとダイアログタグにforce-UIクラスを追加します。