jQuery UI Sekmeler Minimal Şekillendirici

Question

Uygulamamda, jQuery stil sayfalarını yüklemeye gerek duymadan çok uzak kaldım, ancak UI-sekmeler eklentisinin çalışması için bazı CSS'ye gereksinim duyuluyor. Tamam, peki, ama örnekler tüm UI stillerini yüklüyor ve belki de daha da önemlisi, sekme stili tamamen kendi görünüşümü ve hissi berbat ediyor.

Sekmelerin çalışması için yeterli CSS'yi nasıl sağlayabileceğimi öğrenmek için herhangi bir yer var mı, bu yüzden kendi stilimi koruyabilir miyim?

Sekmeleri güzel ya da benzer bir şekilde düzenlemek için minimal bir stil yardımı almam ama arka plan görüntüsü, renkler .... kendi stilimle çok kötü bir şekilde çatışıyorlar.

Bazı kullanıcılar için güzel olduğundan emin olduğum Theme Roller'e teşekkürler. Sadece bu durumda değil, teşekkürler. Eğer, kullanılmakta olan stilleri görmek için Themig tıklayabilir ve ardından Tabs Demo Page bakarsak

Answer 1

, şu anda şöyle görünür:

Sonra

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

her bir açıklamasını bulmak için jQuery UI CSS Framework documentation kullanabilirsiniz genel sınıfı. Widget'a özgü sınıflar, her widget için olduğu gibi listelenmez.

Bu sınıfların yaptıklarına dair bir fikir edinmenin en iyi yolu, ThemeRoller'ı kullanmak ya da varsayılan temasa (for example here) bakmak ve sadece bu sınıflar için CSS'ye bakmaktır, sadece bunları kullanabilir ve kendiniz için ayarlayabilirsiniz.

.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; }