Подтвердить что ты не робот

Как применить несколько тем пользовательского интерфейса jQuery

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

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

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

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

<div class='ui-rounded-corners aClass'>
    Content    
</div>

Ответ 2

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

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

jQuery('.autocomplete').autocomplete({
    source: function(request, response){
        {....}
    },
    create: function(event, ui) {
        jQuery('.ui-autocomplete').wrap('<span class="xxSCOPPEDCLASSxx"></span>');
    }
});