JQuery UI Tabs Минимальный стиль

В моем приложении я до сих пор избегал необходимости загружать все таблицы стилей jQuery, но плагин UI-tabs, похоже, нуждается в некотором CSS для работы вообще. Хорошо, отлично, но на примерах вы загружаете ВСЕ стили пользовательского интерфейса и, возможно, более важно, стиль вкладок полностью разрушает мой собственный внешний вид.

Есть ли какое-нибудь место, чтобы узнать, как я могу предоставить достаточно CSS для работы вкладок, чтобы я мог сохранить свой собственный стиль?

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

О, и не спасибо Theme Roller, что, я уверен, приятно для некоторых людей. Просто не в этом случае, спасибо.

ОТВЕТЫ

Ответ 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; }