ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryプラグイン_jqueryの書き方を共有する

jQueryプラグイン_jqueryの書き方を共有する

WBOY
リリース: 2016-05-16 17:32:32
オリジナル
1162 人が閲覧しました

1. 概要

まず HTML コードを見てください

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

例えば、カーソルが a ラベルに移動すると、a ラベルは右に一定距離移動し、離れると a の位置が復元されることを実現したいとします。実装方法は以下の通りです:

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

$(document).ready(function( ) {
$("#catagory a").hover(function() {
$(this).animate({ paddingLeft: "20px" }, { queue: false, period: 500 });
}、function(){
function()🎜>

このメソッドを拡張して jQuery プラグインの形式で記述します。これは将来他のプロジェクトでも使用でき、いくつかの属性値を簡単に変更できます。 jQueryプラグイン。
2. jQuery プラグインの構造

以下の構造は、jQuery プラグインを作成するためのより良い構造になるはずです。元の作成者のコメントの一部をそれに応じて翻訳しました。

コードをコピー

コードは次のとおりです://競合を避けるには、メソッドを使用します。匿名メソッドを (function($) {
) でラップします //このメソッドを jquery
に拡張します $.fn.extend({
) //プラグイン名
pluginname: function () {
});
//P ass jQuery をメソッドに組み込むと、「$」の代わりに JavaScript で任意の変数を使用できるようになります。
次に、ユーザーがニーズに応じて変更できるように、変更可能な属性をプラグインに追加します。同時に、対応するデフォルト値を提供する必要があります。





コードをコピー


コードは次のとおりです:

(function($){
$.fn.extend({
// オプションの変数をメソッドに渡します
pluginname: function(options) {
デフォルト値を設定しますカンマ区切り
vardefaults = {
カラー: '#ffffff'
$.extend(デフォルト、オプション);アラート(o.padding);
3. jQuery プラグインを実装します





コードをコピー


コードは次のとおりです:

(function ($) {
$.fn.extend({
) //プラグイン名 - paddingList
paddingList: function (options) {

vardefaults = {
animatePadding: 10,
hoverColor: "Black"
var options = $.extend(defaults, options);
Function () {
var o = オプション; 🎜> //変数に設定されています: 300 });
);
最後に、プラグインの使用方法を示します:





コードをコピー


コードは次のとおりです:


//プラグインを使用します
$(document).ready(function() {
$("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});

作成者: Friend ソース: jQuery Learning
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート