Как применить несколько тем JQuery UI - PullRequest
Новая
       3

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

17 голосов
/ 23 ноября 2010

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

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

Ответы [ 3 ]

31 голосов
/ 23 ноября 2010

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

Допустим, вы хотите, чтобы элемент A был стилизован с помощью темы X, а элемент B - с темой Y. В jQuery Theme Roller встроена эта функция. Когда вы собираетесь загрузить тему ( здесь ), нажмите Расширенные настройки темы справа. Здесь вы можете установить «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>
9 голосов
/ 25 марта 2011

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

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

jQuery('.autocomplete').autocomplete({
    source: function(request, response){
        {....}
    },
    create: function(event, ui) {
        jQuery('.ui-autocomplete').wrap('<span class="xxSCOPPEDCLASSxx"></span>');
    }
});
5 голосов
/ 05 февраля 2011

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

...