Как применить тему jQuery UI к моему обычному HTML? - PullRequest
Новая
       33

Как применить тему jQuery UI к моему обычному HTML?

7 голосов
/ 22 сентября 2011

Я использую jQuery UI для различных виджетов, таких как диалоги, кнопки и т. Д. Я хочу продолжить использовать тему для других моих элементов веб-страницы, таких как уведомления об ошибках / предупреждениях и стили выделения.Поэтому я зашел на страницу themeroller, чтобы посмотреть, что они используют для css, например, предупреждающее сообщение: 

<div class="ui-widget">
    <div style="padding: 0 .7em;" class="ui-state-error ui-corner-all"> 
        <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span> 
        <strong>Alert:</strong> Sample ui-state-error style.</p>
    </div>
</div>

Есть div-обертка, span со значком фона и т. Д. Просто скопироватьили JQuery UI Javascript создает некоторые для меня?Как правильно применять темы к HTML без виджета?

Ответы [ 2 ]

4 голосов
/ 22 сентября 2011

Просто примените это к вашему собственному HTML. Javascript не требуется (за исключением состояния наведения).

Когда вы используете виджет jQueryUI, Javascript создает весь этот HTML с этими классами.

Если вам нужно состояние наведения, вам придется переключить класс ui-state-hover. Для этого вам понадобится Javascript: 

$('.ui-state-error').hover(function(){
    $(this).toggleClass('ui-state-hover');
});
1 голос
/ 22 сентября 2011

По умолчанию вы можете использовать только предопределенные элементы themeroller на вашем сайте: кнопки, значки, строки заголовка и т. Д. И все виджеты jquery, такие как указатель даты, диалоги, выделение / ошибка - почти все элементы, которые вы видите на http://jqueryui.com/themeroller/#themeGallery.

чтобы заархивировать это, вы должны скопировать html и соответствующие классы для html-тегов, и браузер применит к нему стили из вашего включенного themeroller.css.

однако, это также означает, что вы немного ограничены своим макетом. Вы по-прежнему можете включать другие элементы, не относящиеся к themeroller, до тех пор, пока применяете правильные классы CSS (.ui-state-default, .ui-state-hover, .ui-state-disabled, icons и т. Д.), Чтобы быть возможность использовать переключатель тем - см. http://jqueryui.com/docs/Theming/API для получения полного списка применимых классов.

...