как настроить диалог jquery для мобильных устройств - PullRequest
Новая
       5

как настроить диалог jquery для мобильных устройств

1 голос
/ 09 февраля 2012

Как удалить форматирование диалогового окна по умолчанию и применить свой собственный CSS?

Моя попытка работает не очень хорошо ... 

<div data-role="dialog" id="confirm-clear" class="dialog-custom" >
    <div data-role="content" >
        <p>Some text.</p>
        <p><a href="#" data-role="button" data-inline="true">Yes</a><a href="#" data-role="button" data-inline="true" data-rel="back">No</a></p>
    </div>
</div>

РЕДАКТИРОВАТЬ:мой CSS: 

.ui-dialog.dialog-custom {

background: repeat scroll 0 0 rgba(0,0,0,.5);

height:200px; /* this doesn't do anything */
}

Ответы [ 2 ]

1 голос
/ 09 февраля 2012

jQM использует различные стили для достижения своей тематики, такие как градиенты webkit и фоновые изображения с фоновыми смещениями.Он также оборачивает некоторые элементы в элементы div или вставляет интервалы и т. Д. Для макета.

Для начала вам потребуется использовать отладчик, такой как инструменты разработчика Chrome, и просмотреть диалоговое окно. В вычисленном стиле вы можете увидеть свои стили и их переопределение или их влияние.Вы также можете видеть любые дополнительные элементы макета, которые вставляет jQM, и отключать стили jQM до тех пор, пока ваши стили не вступят в силу.

Теперь вы можете начать переопределять стили jQM с помощью! Важное или изменить CSS-файлы jQM

0 голосов
/ 09 февраля 2012

CSS использует самый уникальный селектор по умолчанию, а jQuery Mobile, вероятно, использует более уникальный селектор.Вы можете использовать ключевое слово !important, чтобы убедиться, что ваши CSS-объявления используются: 

.ui-dialog.dialog-custom {
    background : repeat scroll 0 0 rgba(0,0,0,.5);
    height     :200px !important;
}

Если вы проверяете элементы с помощью инструментов разработчика, таких как Chrome Dev Tools или Firebug, вы можете увидеть, какие стили применяются ииз какого правила CSS они берутся.Это поможет вам выбрать лучший способ добавления стилей в существующую инфраструктуру.

Я не уверен насчет диалогов, но для виджетов страниц свойство CSS min-height элемента изменяется с помощью инфраструктуры jQM.Вы можете обойти это, переписав обработчик событий jQM resize для диалогов.

...