jQuery UI Tabs Minimal Styling

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

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

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

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

источник

2010-08-03 EBM

почему бы UI CSS JQuery губит свой стиль? Если вы используете одни и те же имена классов? – Reigel

«ruin» == «clash» – EBM

Чтобы изменить заголовок фона, используйте это: .ui-widget-header { border: 0px solid #AAA/* {borderColorHeader} * /; фон: оранжевый; font-weight: bold; } –

Если вы посмотрите на 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 documentation, чтобы найти описание каждого общий класс. Специфичные классы виджета не указаны, так как они хорошо ... для каждого виджета.

Лучший способ получить представление о том, что делают эти классы, это использовать ThemeRoller или посмотреть тему по умолчанию (for example here) и просто посмотреть на 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; }

источник

2010-08-03 01:10:12

jQuery UI Tabs Minimal Styling

ответ

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