jqueryのUIのタブの主要なスタイルの変更

StackOverflow https://stackoverflow.com/questions/2459223

質問

私はjqueryのUIのタブを使用していると私はすぎなかっそれにスタイリングを変更する必要があります。私は、背景画像、ボーダー、ほとんどすべてをrempveする必要があります。私はそれはそれは自己完結型だ好き最小限に見える、としないようにする必要があります。

これを行うための最善の方法は何ですか？私は、同じページ上にある、しかし、カレンダーのウィジェットのデフォルトのUIスタイルを使用する必要があります。私は研究と皆の多くはテーマローラーを指すように思わやりました。しかし、私はちょうど色とボーダーの半径を変更する必要はありません。私はがらくたを削除する必要があります。テーマローラーはちょうど（現実世界のために実際に有用ではない）色のようなものを変更しているようです。どのように私は（私はそれがあるとしてカレンダーが滞在したい）、同じページ上の他のUIウィジェットのスタイルを変更することなく、タブのCSSを適応させるのですか？

私のタブのためのjQuery UIを使用して、それも価値があるか？

役に立ちましたか？

解決

あなたはのをスタイリングのjQuery UIのタブ上のキース・ウッドの詳細なブログ記事をチェックアウトする必要があります。

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

  

私は、背景画像、ボーダー、ほとんどすべてをrempveする必要があります。   私はそれが最小限で調べる必要があります。

この節であるキース・ウッドの記事の「フォーマットするのほとんどを削除」。

これに加えて、所望の効果を達成するために必要なCSSとの完全な10の以上のスタイルの変更は、あります。

jQueryのUIのタブスタイリング - キース・ウッドのブログポストする

他のヒント

私は、タブの追加/削除などの負荷AJAXコンテンツと動的としての組み込み機能のほとんどを必要としなかったことに気づいたときに、

私は自分の単純なタブ機能を書くことにしました。私はこれらの機能を必要に応じて、それらを自分で実装するのは簡単だろう。何のjQuery UIのタブを捨てるために私をプッシュすることは、私は違った私のDOM要素を構造化しなければならなかったということです。私も最小限で見て、私のタブのスタイルを設定するために必要な、と私はゼロから構築する多くのことを剥ぎ取るしようとしているよりも少ない労力であろうと思っています。

私はほとんど欠場機能は、jQueryのUIのタブが自動的に（私はちょうどそれをコピーすることができます知っている - まだそれをもらっていない）URLに＃で示されるタブを選択する方法である。

<時間>

UPDATE：しかし、あなたはそれに固執している場合ええ、あなたが持っている任意のIDを使用してCSSを無効にすることができます：

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

など..

あなたのクラスはオーバーライド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;
    }

それはあなたが簡単にjQueryのUIで提供される標準のCSSを上書きすることができ、いくつかのCSSと簡単です。あなたは必要ないかもしれません！重要な変更したCSSは、jQueryのUI CSSの後に表示されるかどうか。

また、負荷にjQueryを使って各要素にクラスを追加/削除することができますが、それは少し不必要なようです。

これは、CSSとかなり簡単にする必要があります。あなたの要素は、それらのIDとクラスを持っていて、CSSでそれらに触れることができます。 ThemeRollerのはただ速い頼りにものです。

私がリコールした場合、あなたはまた、タブのJSを調整し、画像を追加ラインを調整します（これは同じプラグインである場合）、またはちょうどあなたの好みに合わせて完全にその行を除くことができます。

！重要な属性が最初の場所で、デフォルトのjqueryのUIテンプレートにする必要があります場合は、

私は疑問に思います。これは、一般的に上書きされるので、たとえば、あなたが代わりにトップの左側または右側上にあるように、タブを変更した場合、「のborder-bottom」、！重要を持つべきではありません。

ほとんどすべてがここに覆われているが、私は周りを探した後、残りの属性を編集しているとき、あなたが本当に、単一のクラスで非常に簡単に必要のないものをトスする方法を発見します。

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

この方法は、あなたが「UI-」で始まるすべてのクラスを選択して、あなたはjQueryのUIから削除するものは何でも削除します。

 #my-tabs * {
    background-image: transparent;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top