テーマに基づいて、箱から出してjQueryUIライブラリを使用しています。
リンクをボタンとしてレンダリングするのは素晴らしいことですが、いくつかのボタンを異なる色でオーバーライドする必要があります。
使用する特定のボタンに特定のクラスを指定するにはどうすればよいですか?
テーマに基づいて、箱から出してjQueryUIライブラリを使用しています。
リンクをボタンとしてレンダリングするのは素晴らしいことですが、いくつかのボタンを異なる色でオーバーライドする必要があります。
使用する特定のボタンに特定のクラスを指定するにはどうすればよいですか?
jQuery UIボタンのCSSを確認し、ボタンを指定するCSSの構造を複製することをお勧めしますが、jQueryUIクラスではなく独自のクラスを使用します。このCSSで必要なオーバーライドを作成し、jQueryUICSSの後に含めます。CSSは、最も具体的なセレクターと順序の組み合わせを使用して、適用する値を決定します。これを行うことで、jQueryで使用される各CSSセレクターに同じ特異性があることを確認し、CSSが順序に基づいて優先されるようにします。
Smashing Magazineには、特異性の問題について知りたいよりも多くの情報が含まれている可能性のある記事があります。
あなたもすることができます:
たとえば、jQuery UIスピナーコントロールをオーバーライドして境界線を削除する必要がある場合、Chrome開発ツールを使用して境界線を定義するクラスを見つけました。次にCSSで:私はそのようなものを追加しました:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
よく働く!
つまり、特定の1つまたは複数のボタンにIDを付けて、次のようにします。
$("#buttonId").removeClass().addClass("myClass");
それぞれが独自のIDを持つ複数のボタンに適用する場合:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
ボタンAPIには、パラメータを渡すことで色などを変更できるような設定が必要だと思います
$("button").button({background:"FFFFFF",hover:"FFFFF"});
これは、視覚的な属性の一部を変更できるアイデアにすぎません。
これでうまくいくことがわかりました:$( "。btnSave")。removeClass( "ui-state-default")。addClass( "SaveButtonStyling");
基本的に、ui-state-defaultクラスを削除してから、背景色などに独自のクラスを追加する必要があります。
これは、角の丸いクラスなどがそのまま残っていて、背景色などを修正できたことを意味します。
特定のボタンに追加/異なるものが必要な場合は、単にclass ="mybuttonclassotherbuttonclass"のようなクラスをボタンに指定します。複数のクラスを使用できます。次に、クラスのcssルールを追加するだけです。
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
したがって、背景は赤で、テキストは白になります。または、その上のカスケード(CSS)内のアイテムを上書きする任意の組み合わせです。(.CSSファイルがjquery UI cssファイルの後にリンクされているか、ページ上でインラインになっていると仮定します。どちらもjQueryUIcssをオーバーライドします。