jQuery несколько тем на одной странице - PullRequest
Новая
       28

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

6 голосов
/ 01 июня 2010

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

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

Итак, я иду, чтобы загрузить мою тему. Выберите «Дополнительные настройки», установите область «red», а имя папки моей темы - «red» и загрузите. Прежде всего, я не совсем на 100% уверен, какую папку я скопировать в свой проект: это папка '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" />

Базовая тема загружается и работает все хонки Дури, но красная тема не. У меня есть кнопка в стиле так: 

<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 'themes / base / jquery.ui.all.css', кнопки вообще не стилизуются. Псих! Я вырываю волосы. Куда я иду не так? Конечно, они должны просто упростить загрузку ТОЛЬКО папки с темой и ссылаться на файл ui.all.

Ответы [ 2 ]

1 голос
/ 15 ноября 2011

Я добавил новый класс 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;"  />
0 голосов
/ 02 июня 2010

Скодерс прав.

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

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

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

.ui-icon { ... }

становится 

.scope .ui-icon { ... }

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

<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>

Не связывайтесь с таблицей стилей в каталоге "development-bundle", вместо этого используйте ее в каталоге "css".

...