13

私のアプリケーションでは、これまでjQueryスタイルシートをロードする必要はまったくありませんでしたが、UIタブプラグインが機能するにはCSSが必要なようです。OK、結構ですが、例ではすべてのUIスタイルをロードしていますが、おそらくもっと重要なのは、タブのスタイルが私自身のルックアンドフィールを完全に台無しにしていることです。

タブが機能するのに十分なCSSを提供して、独自のスタイルを維持する方法を学ぶ場所はありますか？

タブをうまく配置するための最小限のスタイリングの助けを気にしませんが、背景画像、色....それらは私自身のスタイリングと本当にひどく衝突します。

ああ、そしてテーマローラーのおかげではありません。これは一部の人にとっては素晴らしいことだと私は確信しています。この場合ではありません、ありがとう。

4

1 に答える 1

8

タブのデモページを見ると、[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を見るだけです。それだけを使用して、自分のニーズに合わせて調整できます。.ui-tabs-*クラスの現在の基本テーマCSSは次のとおりです。

.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-03T01:10:12.023 に答える