Использовать диалог jquery-ui с jquery-mobile - PullRequest
Новая
       31

Использовать диалог jquery-ui с jquery-mobile

1 голос
/ 08 декабря 2011

Я использую jquery-mobile и jquery-ui, и кажется, что диалоги или конфликт между собой.Я хотел бы использовать jquery-ui для своих диалогов, но я не уверен, как заставить jquery.noConflicts () работать с обоими.

У меня есть один файл слушателя, названный mobileListeners.js с этим фрагментом кода, которыйЯ пытаюсь начать работу с диалоговым окном jquery-ui.

Мой 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');
});

РЕДАКТИРОВАТЬ: стиль 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, однако, когда я нажимаю кнопку pressme, диалоговое окно выглядит так, как если бы jquery-mobile и jquery-ui работали в двух направлениях.

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

1 Ответ

0 голосов
/ 08 декабря 2011

Вам нужно будет отредактировать либо CSS для jQuery Mobile, либо для jQuery UI.Есть некоторые конфликты (как вы обнаружили) с именами классов.Например, обе платформы имеют следующие классы:

  • ui-icon
  • ui-dialog

Если вы хотите увидеть, какие классы конфликтуют, проверьтеэлемент dialog в инструментах разработчика (FireBug и т. д.) и посмотрите, какие правила классов добавляются в элемент и из какого 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 в тег диалога.

...