Javascript - применить CSS после завершения инициализации страницы - PullRequest
Новая
       0

Javascript - применить CSS после завершения инициализации страницы

2 голосов
/ 07 сентября 2011

Итак, я строю форму динамически с использованием входов, стилизованных с помощью Jquery Mobile, и мне было интересно, есть ли способ вызвать обновление, не связанное с Jquery.По сути, я использую сторонний плагин для выбора даты, и когда страница загружается, она не получает соответствующие стили.Кто-нибудь знает способ обновления одного входа в форму?

Я не хочу перезагружать всю страницу, просто обновите форму, чтобы применить сторонние стили к одному входу.Извините, если это нубский вопрос, я только начинаю с JS и HTML5.У кого-нибудь есть предложения?

ОБНОВЛЕНИЕ: Итак, HTML-строка, которую я строю и вставляю в форму, выглядит так: 

<input id="date-example" type="date" data-options="{'mode':'calbox'}" data-role="datebox" name="date-example">

Это прекрасно работает, если я добавлю ееHTML страницы, но не тогда, когда я добавляю ее динамически в форму.Строки идентичны, что я могу только предположить, означает, что это не обновляется со стилями CSS.

Ответы [ 2 ]

2 голосов
/ 07 сентября 2011

Итак, правило с jQuery mobile заключается в том, что вам нужно не изучать много общих практик.JQM переходит на следующую страницу, загружая целевую страницу через AJAX, затем загружая ее HTML в DIV и анимируя этот DIV в текущем DOM.

Одним (из многих) побочных эффектов этого является то, что медиаресурсы,CSS, JS, что угодно, должны быть тщательно спланированы.Вероятно, что CSS для этого стороннего виджета DatePicker находится в <head> документа, к которому осуществляется переход?Вещи, которые есть в <head>, не всегда загружаются.

Я справился с этим, переместив некоторые вещи в тег <body>, но это своего рода хакерское решение.Лучше всего иметь один сжатый CSS-файл с минимальным сжатием, который обслуживает все необходимое, включая CSS для DatePicker.

0 голосов
/ 07 сентября 2011

Вероятно, CSS, применяемый к средству выбора даты, либо объявлен встроенным, либо имеет приоритет перед тем, что вы объявили.

Если это проблема с приоритетом, проверьте http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/.

Если это встроенная проблема, просто добавьте в код что-то, что переопределяет эти значения.Пример: 

$(document).ready(function() {
    $('.datepicker').css('color', 'blue');
});

Вам не нужно «обновлять» страницу.С помощью приведенного выше кода, когда все элементы будут загружены, будут применены встроенные стили.Вы можете сделать то же самое в обратном вызове AJAX вместо $(document).ready().

...