jQuery Вкладки UI Минимальное Моделирование
В моем приложении я до сих пор постарался не должным быть загрузить любые таблицы стилей jQuery вообще, но плагину вкладок UI, кажется, нужен некоторый CSS для работы вообще. Хорошо, прекрасный, но примеры имеют Вас загружающий ВСЕ стили UI и, возможно, более важные, вкладка, разрабатывающая полностью, разрушает мой собственный стиль.
Там какое-либо место состоит в том, чтобы изучить, как я могу предоставить как раз достаточно CSS для вкладок для работы, таким образом, я могу сохранить свое собственное моделирование?
Я не возражаю против минимального объема моделирования справки для расположения вкладок приятно или чего-то, но фонового изображения, цвета.... они сталкиваются действительно плохо с моим собственным моделированием.
О, и нет, спасибо к Ролику Темы, который я уверен, хорошо для некоторых людей. Просто не в этом случае, спасибо.
1 ответ
Если вы посмотрите на страницу Tabs Demo Page, вы можете нажать на вкладку Themig, чтобы посмотреть, какие стили используются, сейчас это выглядит так:
<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
<p>Tab one content goes here.</p>
</div>
...
</div>
Затем вы можете использовать документацию jQuery UI CSS Framework, чтобы найти описание каждого общего класса. Классы, специфичные для виджетов, не перечислены, поскольку они... индивидуальны для каждого виджета.
Лучший способ получить представление о том, что делают эти классы - использовать ThemeRoller, или посмотреть на тему по умолчанию (например, здесь) и просто посмотреть на CSS для этих классов, вы можете использовать только это и корректировать под свои нужды, вот текущий CSS базовой темы для .ui-tabs-* классов:
.ui-tabs { position: relative; padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }