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

Я использую 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 с фоновым значком и т. Д. Я просто копирую их или javascript для пользовательского интерфейса jQuery создает некоторые для меня? Как правильно применять темы к HTML без виджета?

Источник

2 ответа

Решение

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

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

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

$('.ui-state-error').hover(function(){
    $(this).toggleClass('ui-state-hover');
});
Источник

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

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

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

Источник
Другие вопросы по тегам