JQueryプラグインのスタイルカスタマイズ方法の分析と比較_jquery

1 はじめに
最近、プロジェクトの必要性により、JQuery プラグインを使用しました。プラグインをダウンロードした後、多くのデフォルトのプラグイン スタイルがプロジェクトの要件を満たしておらず、変更する必要があることがすぐにわかりました。
このプロセス中に、プラグインのスタイルをカスタマイズするためにさまざまな方法を使用していることがわかりました。ようやく自分がベストだと思う方法に出会えたことがとてもうれしく、CSSについても理解が深まり、いろいろな思いがあります。この記事は、これらの新しい CSS についての理解をまとめたものです。
2 JQuery プラグインのスタイルカスタマイズ方法
2.1 プラグインの初期化時にカスタマイズされたオブジェクトを入力
より良いプラグインでは、初期化中にカスタマイズされたオブジェクトを入力できます。
カスタマイズされたオブジェクトを入力すると、プラグインはカスタマイズされたオブジェクトの値を使用します。たとえば、

コードをコピーします コードは次のとおりです:

var adgallerySetting = {
width: 600, // 画像の幅、false に設定すると、CSS の幅
高さを読み取ります。 : 400, // 画像の高さを false に設定すると、CSS の高さが読み取られます
}
var galleries = $('.ad-gallery').adGallery(adgallerySetting); >
オブジェクトにカスタマイズが入力されていない場合、プラグインは独自のデフォルト値を使用します。たとえば、

var galleries = $('.ad-gallery').adGallery();
2.2 変更プラグインの CSS
プラグインがカスタマイズを提供していない場合 変更したいオブジェクトまたはスタイルがカスタマイズされたオブジェクト定義に含まれていない場合 より直観的な方法は、プラグインの CSS ファイルを変更することです。これは、プラグイン自体のソース コードを破損し、将来のプラグイン バージョンの更新に役立たないため、推奨する価値のある方法ではありません。
2.3 コールバック関数の登録
ほとんどのプラグインは、カスタマイズされたオブジェクトでコールバック関数も定義します。プラグインによるスタイル拡張の完了後に Callback 関数が呼び出された場合は、この Callback を作成して登録し、Callback 内の DOM モデルを変更してプラグイン スタイルのカスタマイズを完了できます。この方法はより煩雑で、プラグインの内部実装を理解するためにより多くの時間を費やす必要があります。たとえば、

コードをコピーします コードは次のとおりです。

var adgallerySetting = {

// すべてのコールバックには、AdGallery オブジェクトが「this」参照として含まれています。
コールバック: {
// これは、old_image が消えようとしていて、new_image
// が入ってくる直前に起動されます。
beforeImageVisible: function(new_image, old_image) {
// 何かワイルドなことをしてみましょう!
var thing = "this is it";
// プラグイン拡張ページを変更します
$(".ad -gallery .ad -image-wrapper .ad-image").removeAttr("style");
$(".ad-gallery .ad-image-wrapper .ad-image").css("width" , "100% ");
var width = $(".ad-gallery .ad-image-wrapper .ad-image img").attr("width"); gallery .ad-image-wrapper .ad-image img").attr("width", "100%");
$(".ad-gallery .ad-image-wrapper .ad-image .img" ).attr( "幅", 100%);
$(".ad-gallery .ad-image-wrapper .ad-image").attr("高さ", 100%); 🎜>}
};


2.4 新しい CSS ファイルを追加し、プラグイン スタイルの一部を再読み込みします
CSS は、名前が示すように、Cascading Style Sheet の略です。カスケード規格があります。複数の CSS ファイルが同じ HTML 要素のスタイル定義と競合する場合、次のルールに基づいて適用する CSS スタイルが決定されます。1) !
2) 出典。作成者 (HTMl によってリンクされた CSS ファイル)、リーダー (Web サーファー)、ユーザー エージェント (ブラウザー)
3) 関連性。

詳しくは参考欄のリンクページをご確認ください。
私の意見では、1.1 を除くこの方法が最良の方法です。以下にコード例をいくつか示します。




コードをコピー

コードは次のとおりです。 #descriptions .ad-image-description { 位置: 絶対; } #descriptions .ad-image-description .ad-description-title {

表示: ブロック;

}
.ad-gallery .ad- image-wrapper .ad-image {
幅: 100% !
左: 0px !
3 概要
この経験に基づいて、プラグインのスタイルをカスタマイズする最良の方法は、カスタマイズされたオブジェクト (プラグインがサポートしている場合) を入力するか、CSS のオーバーロードを行うことだと思います。一部のプラグインは、HTML 要素に style="...." を追加することでスタイルを定義します。この場合、「! important」ロゴの表示が非常に快適であることがわかります。 J
4 参考文献
http://www.w3.org/TR/CSS21/cascade.html
http://stackoverflow.com/questions/7022344/ css-newbie-questions-on-authors-style-readers-style-agents-style
http://htmlhelp.com/reference/css/structural.html
http://css-tricks.com/override-inline-styles-with-css/