Как применить несколько тем JQuery UI

Есть ли у кого-нибудь методы / советы / хитрости, которые помогут мне организовать и реализовать несколько тем jQuery UI в одном приложении?

Я привел к использованию !important так как кажется, что это самый надежный способ переопределить стиль, но этот метод не очень желателен.

Источник

3 ответа

Решение

Да, но это зависит от того, что вы имеете в виду.

Допустим, вы хотите, чтобы элемент A был стилизован с помощью темы X, а элемент B - с темой Y. В jQuery Theme Roller встроена эта функция. Когда вы собираетесь загрузить тему ( здесь), нажмите Advanced Theme Settings справа. Здесь вы можете установить "CSS Scope". Это позволит вам применять классы пользовательского интерфейса jQuery (т.е. ui-corners-allи т. д.) из конкретной темы. Вот описание, которое они дают для этой опции:

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

В большинстве случаев вам не нужно указывать область видимости CSS. Обратите внимание: если вы предоставите область CSS, вы не получите пример страницы, включенной в вашу загрузку.

Вы также можете изменить имя папки темы:

Это поле позволяет вам указать имя папки темы в вашей загрузке. Это полезно, если вы планируете использовать несколько тем на странице. По умолчанию это "тема".

Однако, если вы хотите создать совершенно новую тему, заимствуя фрагменты из нескольких тем, у вас есть два варианта: отредактировать CSS-файлы и файлы изображений самостоятельно (не рекомендуется) или использовать инструмент Theme Roller, чтобы создать свою собственную.

Как пользоваться:

CSS Scope - это просто CSS-селектор. Допустим, тема X должна применяться только ко всем элементам с классом aClass, В этом случае ваш CSS Scope будет .aClass, Итак, если вы хотите добавить закругленные углы из темы X к элементу (при условии, что ваш CSS Scope установлен на .aClass), ваш HTML хотел бы что-то вроде этого:

<div class='ui-rounded-corners aClass'>
    Content    
</div>
Источник

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

в случае автозаполнения вы можете сделать следующее, чтобы получить родительский элемент с классом scoped - недостаточно добавить класс scopped в UL самого автозаполнения.

jQuery('.autocomplete').autocomplete({
    source: function(request, response){
        {....}
    },
    create: function(event, ui) {
        jQuery('.ui-autocomplete').wrap('<span class="xxSCOPPEDCLASSxx"></span>');
    }
});
Источник

Привет - искал часами и наконец нашел способ сделать это из FilamentGroup, в комплекте с учебным пособием и рабочими примерами.
http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/

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