Минимальный стиль вкладок пользовательского интерфейса jQuery - PullRequest
Новая
       29

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

13 голосов
/ 03 августа 2010

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

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

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

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

1 Ответ

8 голосов
/ 03 августа 2010

Если вы посмотрите на демонстрационную страницу Tabs , вы можете нажать на вкладку 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; }
...