ホームページ ウェブフロントエンド jsチュートリアル JQueryプラグインのスタイルカスタマイズ方法の分析と比較_jquery

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

May 16, 2016 pm 05:53 PM
style カスタマイズ

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/
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

element.styleの変更方法 element.styleの変更方法 Nov 24, 2023 am 11:15 AM

element.style で要素を変更するメソッド: 1. 要素の背景色を変更する; 2. 要素のフォント サイズを変更する; 3. 要素の境界線のスタイルを変更する; 4. 要素のフォント スタイルを変更する; 5要素の水平方向の配置を変更します。詳細な紹介: 1. 要素の背景色を変更します。構文は "document.getElementById("myElement").style.backgroundColor = "red";"; 2. 要素のフォント サイズなどを変更します。

React でスタイルを動的に変更する方法 React でスタイルを動的に変更する方法 Dec 28, 2022 am 10:44 AM

スタイルを動的に変更するためのメソッド: 1. "<div className='scroll-title clear-fix' ref={ this.manage }>" のような構文を使用して、スタイルを変更する必要がある要素に ref を追加します。 . 動的制御による 状態の変化により要素のスタイルが変更される; 3. DOM 内で JS コードを使用することで、異なる DOM の表示と非表示の遷移が実現されます。

Vue3 スタイルの新機能とその使用方法について Vue3 スタイルの新機能とその使用方法について May 14, 2023 pm 10:52 PM

スタイルの新機能 Vue3.2 バージョンでは、ローカル スタイル、CSS 変数、テンプレートに公開されるスタイルなど、単一ファイル コンポーネントのスタイルに多くのアップグレードが行われました。 (学習ビデオ共有: vue ビデオ チュートリアル) 1. ローカル スタイル ラベルにscopedattribute がある場合、その CSS は現在のコンポーネントの要素にのみ適用されます: hi.example{color:red;} 2. 深さセレクターはスコープされます。スタイル内のセレクターがより「深い」選択を行いたい場合、つまりサブコンポーネントに影響を与える場合は、:deep() 疑似クラス: .a:deep(.b){/*...* を使用できます。 / }v-html を通じて作成された DOM コンテンツは、

Vue エラー: v-bind を使用してクラスとスタイルを正しくバインドできません。解決方法は? Vue エラー: v-bind を使用してクラスとスタイルを正しくバインドできません。解決方法は? Aug 26, 2023 pm 10:58 PM

Vue エラー: v-bind を使用してクラスとスタイルを正しくバインドできません。解決方法は? Vue 開発では、v-bind 命令を使用してクラスとスタイルを動的にバインドすることがよくありますが、v-bind を正しく使用してクラスとスタイルをバインドできないなどの問題が発生することがあります。この記事では、この問題の原因と解決策を説明します。まず、v-bind ディレクティブを理解しましょう。 v-bind は V をバインドするために使用されます

MySQL を使用して、さまざまな業界や企業の特定のニーズを満たすカスタマイズ可能な会計システム テーブル構造を作成するにはどうすればよいですか? MySQL を使用して、さまざまな業界や企業の特定のニーズを満たすカスタマイズ可能な会計システム テーブル構造を作成するにはどうすればよいですか? Oct 31, 2023 am 09:36 AM

MySQL を使用して、さまざまな業界や企業の特定のニーズを満たすカスタマイズ可能な会計システム テーブル構造を作成するにはどうすればよいですか?はじめに: 現代のビジネス環境において、会計システムは企業の財務データの記録と分析を支援する上で重要な役割を果たしています。ただし、業界や企業が異なれば、会計システムに対するニーズも異なります。さまざまな企業の特定のニーズを満たすために、MySQL データベースを使用してカスタマイズ可能な会計システム テーブル構造を作成できます。この記事では、MySQL を使用して柔軟な会計システムのテーブル構造を作成し、提供する方法を紹介します。

Java フレームワークをさまざまなビジネス ニーズに合わせてカスタマイズするにはどうすればよいでしょうか? Java フレームワークをさまざまなビジネス ニーズに合わせてカスタマイズするにはどうすればよいでしょうか? Jun 02, 2024 am 09:07 AM

カスタマイズされた Java フレームワークは、さまざまなビジネス ニーズに対応できます。原則には、モジュール設計、拡張ポイント、構成可能性、リフレクション、および動的プロキシが含まれます。この記事では、SpringBoot アプリケーションを例として、ログイン メカニズムをカスタマイズし、追加の認証方法をサポートし、フレームワークのコードを変更せずにフレームワークの動作をカスタマイズするという目的を達成する方法を示します。

:checked 疑似クラス セレクターを使用して、チェックされたチェックボックスまたはラジオ ボタンのスタイルを変更します。 :checked 疑似クラス セレクターを使用して、チェックされたチェックボックスまたはラジオ ボタンのスタイルを変更します。 Nov 20, 2023 am 11:48 AM

この記事の長さは限られているため、簡単なコード例のみが記載されています。以下に例を示します。次の HTML 構造があるとします。 &lt;!DOCTYPEhtml&gt;&lt;htmllang="en"&gt;&lt;head&gt;&lt;metacharset="UTF-8"&gt;&lt;metaname="viewpo

PHP を使用して CMS でカスタマイズされた二次開発モジュールを開発する方法 PHP を使用して CMS でカスタマイズされた二次開発モジュールを開発する方法 Jun 21, 2023 am 08:34 AM

Web開発の分野では、CMS(コンテンツ管理システム)は徐々にさまざまなWebサイトに必要なコンポーネントの1つになってきました。 CMS は汎用ソリューションとして、拡張性と保守性に優れているだけでなく、ユーザーが Web サイトのコンテンツを迅速に構築、管理、更新できるようにします。実際のアプリケーションでは、多くの Web サイト管理者や開発者は、独自のビジネス ニーズやユーザー エクスペリエンスを満たすために CMS をパーソナライズまたは開発する必要があります。この記事ではPHP言語を例に、CMSのカスタマイズやカスタマイズにPHP言語を使用する方法を紹介します。

See all articles