8

jquery UIタブを使用していますが、スタイルを大幅に変更する必要があります。背景画像、境界線、ほとんどすべてを表示する必要があります。私はそれが最小限に見える必要があり、それが自己完結しているようではありません。

これを行うための最良の方法は何ですか？ただし、同じページにあるカレンダーウィジェットのデフォルトのUIスタイルを使用する必要があります。私はたくさんの研究をしました、そして誰もがテーマローラーを指しているようです。ただし、色や境界線の半径を変更したいだけではありません。がらくたを削除する必要があります。テーマローラーは、色などを変更するだけのようです（現実の世界ではあまり役に立ちません）。同じページの他のUIウィジェットのスタイルを変更せずにタブにCSSを適応させるにはどうすればよいですか（カレンダーをそのままにしておきたい）？

タブにjqueryUIを使用する価値はありますか？

4

8 に答える 8

7

JQuery UI タブのスタイリングに関する Keith Wood の詳細なブログ投稿を確認してください。

あなたの特定の質問への答え

背景画像、境界線、ほとんどすべてを削除する必要があります。最小限に見えるようにする必要があります

キース・ウッドの投稿のこのセクション「フォーマットのほとんどを削除する」にあります。

これに加えて、目的の効果を実現するために必要な CSS を備えた、さらに 10 のスタイル変更があります。

JQuery UI タブのスタイリング - Keith Wood ブログ投稿

于 2012-03-26T07:21:31.090 に答える
4

AJAX コンテンツの読み込みやタブの動的な追加/削除などの組み込み機能のほとんどが必要ないことに気付いたとき、私は独自の単純なタブ機能を作成することにしました。これらの機能が必要な場合は、自分で簡単に実装できます。私が jQuery UI Tab をやめた理由は、DOM 要素を別の方法で構造化する必要があったからです。また、最小限に見えるようにタブのスタイルを設定する必要がありました。ゼロから構築する方が、多くの要素を削除するよりも労力がかからないと考えました。

私が最も欠けている機能は、jQuery UI Tabs が URL の # で示されるタブを自動的に選択する方法です (コピーするだけでよいことはわかっていますが、まだ行っていません)。

更新：しかし、ええ、あなたがそれに固執しているなら、あなたが持っているIDを使ってCSSを上書きすることができます：

#my-tabs .ui-state-default {
    background-image: none; /* remove default bg image */
}

等々..

于 2010-03-17T01:26:05.080 に答える
2

オーバーライドする css のクラスが .mytabs であると仮定して、css で次のことを試してください。それはあなたが始める必要があります

.mytabs li {
        background :  white !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important; 

    }
    .mytabs li.ui-state-active {
        background :  white !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important; 
        margin: 0;


    }

.mytabs li a 
    {
        color:          Black !important;
        font-size:      1.4em !important;
        font-weight:    bolder;
        padding:        4px 1.5ex 3px !important;
    }
于 2010-03-17T02:19:37.507 に答える
2

jQuery UI で提供される標準の CSS を簡単にオーバーライドできる CSS を使用するのは簡単です。変更した CSS が jQuery UI CSS の後に表示される場合、!important は必要ない場合があります。

ロード時にjQueryを使用して各要素にクラスを削除/追加することもできますが、それは少し不必要に思えます。

于 2010-03-18T13:29:55.217 に答える
0 
 #my-tabs * {
    background-image: transparent;
}
于 2014-10-01T17:37:56.633 に答える
0

ほとんどすべてがここでカバーされていますが、私は周りを見回して、残りの属性を編集しながら、単一のクラスで本当に必要のないものを非常に簡単に投げる方法を見つけました.

*[class*="ui-"] {
     border-radius:0;
     background-image: none;
     .
     .
     .
}

このようにして、「ui-」で始まるすべてのクラスを選択し、jQuery UI から削除したいものをすべて削除します。

于 2014-02-05T18:30:29.483 に答える
0

そもそも !important 属性をデフォルトの jquery ui テンプレートに含める必要があるのだろうか。たとえば、タブを上部ではなく左側または右側に変更する場合、'border-bottom' には !important を含めないでください。これは一般的に上書きされるためです。

于 2010-05-17T09:31:15.127 に答える
0

CSS を使用すると、かなり簡単なはずです。要素には ID とクラスがあり、CSS でそれらに触れることができます。Themeroller はすぐに使えるものです。

思い出すと、タブ js を調整して、画像を追加する行を調整することも (これが同じプラグインの場合)、その行を完全に削除することもできます。

于 2010-03-17T01:25:44.317 に答える