jQuery несколько тем на одной странице

Это заставляет меня NUTS! Я следил за сообщением здесь, который, похоже, не работает: http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/jQuery несколько тем на одной странице

У меня есть базовая тема, для примера это тема Smoothness из галереи пользовательского интерфейса jQuery. Затем у меня есть «красная» тема, которая в основном окрашивает кнопки красным цветом. Here is the theme I created.

Итак, я хочу скачать свою тему. Выберите «Дополнительные параметры», установите для области «красный» и имя моей темы в «красный» и загрузите. Прежде всего, я не полностью уверен, что папка, которую я должен скопировать в мой проект, это папка «development-bundle \ themes» (содержащая мою красную папку) или папку «\ css \ red»?

Я пробовал оба. Сообщение выше, кажется, предлагает, если я скопирую папку тем и ссылку на мою тему в css, она будет работать, когда я добавлю класс «red» в div или элемент оболочки. Поэтому я связала темы, как это в моем файле:

<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" /> 
<link type="text/css" href="themes/red/jquery.ui.all.css" rel="stylesheet" />

Тематической нагрузки базы и работает все Honkey doorey но красная тема не делает. У меня есть кнопки в стиле, как так:

<input type="submit" id="btn" value="A submit button" class="red" />

Я также попытался:

<div class="red"> 
    <input type="submit" id="btn" value="A submit button" /> 
</div>

не работают. Когда я удаляю ссылку «css-файл темы/base/jquery.ui.all.css», кнопка не имеет никакого стиля. Псих! Я вытаскиваю волосы. Где я иду не так? Разумеется, они должны просто сделать достаточно легким, чтобы загрузить JUST в папку темы и ссылаться на файл ui.all.

источник

2010-06-01 lloydphillips

Я не пробовал, но знаю, что jQuery может сломаться на мелочах. Вы помещали '.red' как область действия, а не просто« красную »? Кроме того, попробуйте 'themes/red/ui.all.css '' вместо 'themes/red/jquery.ui.all.css''. – Skoder

Я пробовал .red вчера, прежде чем я опубликовал, и это не помогло (мне пришлось пойти и отредактировать файл css, созданный themeroller, чтобы изменить все это на .red). Я попробую изменить имя файла в одно мгновение и дам вам знать. – lloydphillips

Skoders правый.

Вы должны использовать идентификатор элемента, класс или тэг в нотации JQuery.

Для класса: .class
для идентификатора: #id
Для тэгу: таблица

Вы бы лучше выбрать класс путь, так как это не просто более классный, чем другие, но гораздо более удобный (его можно использовать для нескольких объектов), и вы не испортите никаких элементов макета, таких как div или таблицы. В конце концов, css scope justs добавляет предоставленное значение к каждому определению css. т.е.

.ui-icon { ... }

становится

.scope .ui-icon { ... }

Edit: Убедитесь, что вы включили правильные таблицы стилей, я получил все, что работает со следующим кодом

<html> 
    <head> 
     <title>JQuery UI Theme Scope</title> 
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 
     <link type="text/css" href="css/red/jquery-ui-1.8.1.custom.css" rel="stylesheet" /> 
     <link type="text/css" href="css/default/jquery-ui-1.8.1.default.css" rel="stylesheet" /> 
    </head> 
    <body> 
     <input type="submit" class="ui-state-default ui-corner-all" value="Submit" /> 
     <div class="red"> 
      <input type="submit" class="ui-state-default ui-corner-all" value="Submit" /> 
     </div> 
    </body> 
</html>

Не ссылка на таблицу стилей в каталоге «developement-bundle» вместо этого используйте тот, который находится в каталоге «css».

источник

2010-06-01 20:28:08

Я использую класс. Проблема в том, что я не могу получить красную область для загрузки и переопределения базовой темы, установив имя класса. – lloydphillips

Взгляните на мое редактирование. –

Я добавил новый класс CSS для красных значков:

Icons 
---------------------------------- 


/* states and images */ 

.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } 
.ui-iconRed { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

И изменить здесь:

/* states and images */ 

.ui-icon { width: 16px; height: 16px; background-image:url(images/ui-icons_469bdd_256x240.png); } 

.ui-iconRed { width: 16px; height: 16px; background-image:url(images/ui-icons_470bdd_256x240.png); }

У меня есть папка с красными и синими изображениями. Когда я хочу взять красное изображение, я просто ссылаюсь на класс iconRed, например:

<img class="ui-iconRed ui-icon-bullet" title="Vendido" style="float: left;" /> 

//if want a blue just put the normal icon like this: 

<img class="ui-icon ui-icon-bullet" title="Não vendido" style="float: left;" />

источник

2011-11-14 20:00:39

jQuery несколько тем на одной странице

ответ

Смежные вопросы