jQuery プラグインの開発は実際には非常に簡単です_jquery

人々からいくつかのヒントについてよく質問されるため、他の人を惹きつける方法として、すべての jQuery 愛好家に向けてこの記事を書くことにしました。
【基本】
a) スタイル
多くの人は、イメージはともかく、スタイルというものは非常に複雑なものだと考えています。デザイン、実際、CSS には次の属性しかありません: 位置、マージン、パディング、幅、高さ、左、上、浮動小数点、境界線、背景...

UI デザインの美しさは、大きなものにあります。どの程度、それはデザイナーのカラーマッチングと全体的な効果の調整の把握に依存します。簡単な例、単純なページ、ずさんな人々を考えてみましょう:

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

🎜 >
jQuery はフレームワークです。圧縮後は30k以上になります。

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

>

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]
3 つの UI 効果を比較してみましょう:

一見して明らかですが、おそらく多くのサイトは、まさにこの目立たないフォント ファミリー、font- のせいで注目を失っています。サイズ。もちろん、これは単なる例にすぎません。CSS をマスターするには、簡単なことから始めて、実際に適用し、さらに深めていく必要があります。
b) スクリプト JavaScript についても深く理解する必要があり、dom、xhr、Regex、call-apply、プロトタイプなどについてもある程度の理解が必要です。
これらを何に使うの?という人もいるでしょう。実際、DOM の操作は getElementById や getElementsByTagName などの API を使用して簡単に完了できます。簡単な例を挙げると、コードの一部が本質なのか残骸なのかを区別するのは簡単です。通行人 A:




コードをコピーします


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

var a = new Array(10); menu = ''; for ( var i = 0; i < a.length; i ) { menu = '

' i] '

'; }

通行人 B:

コードをコピーします


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

String.prototype.format = function() { var args = argument; return this.replace( /{(d{1})}/g, function( ) { return args[arguments[1]] }); var a = new Array(1, 2,3,4,5,6,7,8, 9,0);

var m = '

{0}

'; 🎜>for (var i = 0; i menu = m.format(a[i])
}


実装方法が明確であれば、エレガントで効率的なコードの方が明らかに魅力的です。
[演習]
JQuery の開発や使用では、コピー||ペーストするよりも実践からインスピレーションが得られます (借用の原則を追求する学生は退出できます)。
ここでは、簡単な例を使用して jQuery プラグイン開発のプロセスを説明します。この 1 つの例から推測できるかどうかはあなた次第です。

[目的]

プラグインを開発する前に、目的を明確に理解し、方向性を明確にする必要があります。例として使用します。このプラグインの目的は、UI 用のスライダーを提供することです。Win32 開発に従事している、または一時的に集中している学生は、このプラグインに精通しているはずです。

スケッチ
コードをコピー コードは次のとおりです:

defaultbar -> 完成した
jquery-jslider ->私たちのプレゼンテーション 画像は使用せず、線と色を使用して完成させてください:
Css



コードをコピー

コードは次のとおりです。次のように: /**//*----デフォルトスキン----*/ .defaultbar

{}{

margin-top: 10px;
height: 5px;背景色: #FFFFE0;
ボーダー: 1px ソリッド
}
.defaultbar .jquery-completed
{}{
高さ: 3px;
背景色: # 7d9edb;
上: 1px;
位置: 絶対;
高さ: 15px;
背景色: #E6E6FA;
トップ: -6px;
カーソル: 🎜>position: ABSOLUTE;
}


子ノードのフローティングを容易にするために、bar の位置属性を相対に設定します (子ノードは、インライン フローティング効果を得るために、position:absolute を使用します)。
次に、この CSS と HTML ツリーによって生成される UI 効果を見てみましょう:

OK、必要な要素 (スライダー、完了、バー) を備えています。
いくつかの仕様:

UI を描画した後、jQuery プラグイン コードを正式に記述することができますが、その前に、jQuery プラグイン開発の標準のいくつかを理解しておく必要があります。

1. クロージャを使用します:

コードをコピーします


コードは次のとおりです。 🎜>

(function($) { // ここにコードが入ります })(jQuery);

これは公式のプラグイン開発仕様の要件です。 jQuery から、この方法で記述することの利点は何ですか? a) グローバルな依存関係を回避します。 b) 第三者による損害を回避します。 c) jQuery 演算子 '$' および 'jQuery ' と互換性があります

このコードは解析すると次のコードのように見えることがわかっています:

コードをコピー


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

var jq = function($) {
// ここにコードが入ります
};

その効果は明ら​​かです。一目。


2. 拡張機能 jQuery は、ユーザーが拡張できる 2 つの「基本クラス」、$.extend と $.fn.extend を提供します。 $.ajax、$.getJSON などの独自のメソッドを拡張するために使用されます。$.fn.extend は、jQuery オブジェクトのメソッドや操作を含む jQuery クラスを拡張するために使用されます。 jQuery の整合性を維持するために、私はプラグイン開発には $.fn.extend を使用する傾向があり、

3.jQuery が提供するセレクターはできるだけ使用しません。強力な機能を備えており、複数の CSS バージョンのセレクターと互換性がありますが、多くの学生がセレクターを使用する際の効率を重視していないことがわかります。
a) ID セレクターを使用してみます。jQuery のセレクターで使用される API は getElementById または getElementsByTagName に基づいています。したがって、jQuery は getElementById を直接呼び出して dom を取得するため、最も効率的なのは ID セレクターであることがわかります。を選択し、スタイルを通じて選択します。ブラウザは jQuery オブジェクトを取得するときに、多くの場合 getElementsByTagName を使用して取得してフィルターします。
b) 開発者がスタイル セレクターを使用して DOM を取得し、これらの DOM が同じタイプである場合、たとえば className が jquery であるすべての div を取得する場合、スタイル セレクターは tagName を明確に指定する必要があります。使用する必要がある記述方法は、$('.jquery') ではなく $( 'div.jquery') です。この方法で記述することの利点は、dom を取得するときに、代わりに jQuery が div を取得してフィルタリングすることになります。すべての dom を取得してからフィルタリングします。 c) 多くの学生は、jQuery を使用して指定されたコンテキストで DOM を取得するときに反復を使用することを好みます (例: $('.jquery .child') を使用して、className の DOM の下にある子として className を持つすべてのノードを取得します。実際、このようなコードを記述するコストは非常に高くなります。jQuery は、必要な要素を取得するために引き続き $(selector,context) などのメソッドを使用する必要があります。 、 $('selector1>selector2') 、 $(selector1).children(selector2)、 $(selector1).find(selector2) など。

コーディングを開始します


このトピックは少し現実離れしていますが、UI を明確に理解したら、js を使用して HTML を出力できます。
このスライダー プラグインの名前には jSlider を使用します (プラグインの競合を避けるために、プラグインの名前も非常に特殊なものにする必要があります。ここでは単純にします)。


コードをコピー

コードは次のとおりです。$.extend($.fn, { ///

/// スライダー UI を適用します

///

jSlider: function(setting) {
}
}) ;


プラグイン開発では、コード量を減らすために、メタデータを分離して API を開くのが標準的な方法です。書いていると、私はプラグイン内で直接値を割り当てることに慣れています。

コードをコピーします

コードは次のとおりです。次のように: var ps = $.extend({ renderTo: $(document.body), enable: true,

initPosition: 'max',

size: { barWidth: 200, sliderWidth: 5 },
barCssName: 'defaultbar ',
completedCssName: 'jquery-completed',
sliderCssName: 'jquery-jslider',
sliderHover: ' jquery-jslider-hover',
onChanging: function() { },
onChanged: function() { }
}, 設定);


標準的なアプローチ:

コードをコピー

コードは次のとおりです: $.fn.jSlider.default = { renderTo: $(document.body), enable: true,

initPosition: 'max',

size: { barWidth: 200, sliderWidth: 5 },
barCssName: ' defaultbar',
completedCssName: 'jquery-completed',
sliderCssName: 'jquery- jslider',
sliderHover: 'jquery-jslider-hover',
onChanging: function() { },
onChanged: function() { }
}
$.extend({ },$.fn.jSlider.default,setting);
わかりました。以下では、私が定義したこれらの API の機能について説明します。
renderTo: jSlider のキャリアおよびコンテナ。jQuery オブジェクトまたはセレクターにすることができます。
enable: jSlider プラグインが使用可能かどうか。true の場合、エンドユーザーはドラッグ アンド ドロップを行うことができます。それ以外の場合は禁止されます。
initPosition: jSlider の初期値、「max」または「min」、つまりスライダーの値、1 または 0。
size: jSlider パラメーター (2 つの値を含む) barWidth - バーの長さ、sliderWidth - スライダーの長さ。
barCssName: バーのスタイル名。エンドユーザーが自分でスタイルを簡単に拡張できるようにします。
completedCssName: 完成したスタイル名。
sliderCssName: スライダーのスタイル名。
sliderHover: スライダーがフォーカスされているときのスタイル名。
onChanging: スライダーがドラッグされたときにトリガーされるイベント。
onChanged: スライダーのドラッグが終了するとイベントがトリガーされます。

この時点で、renderTo を jQuery オブジェクト (セレクターの使用と互換性があります) に強制的に変換する必要があります:

ps.renderTo = (typeof ps.renderTo == 'string' ?
$ (ps.renderTo) : ps.renderTo);
次に、レンダリングする HTML ツリーを出力します:

/* ----------> 🎜 >

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

スライダーバー

----> 完成したバー

><- ----------*/
var sliderbar = $('

')
.attr('class', ps.barCssName)
.css('width', ps.size.barWidth)
.appendTo(ps.renderTo)
var completedbar; = sliderbar.find ('div:eq(0)')
.attr('class', ps.completedCssName);
var slider = sliderbar.find('div:eq(1)')
.attr( 'class', ps.sliderCssName)
.css('width', ps.size.sliderWidth);


このようにして、HTML を UI に直接表示します。レンダリングには、スライダーバー、完了バー、スライダーを使用して、必要な 3 つのオブジェクトをキャッシュします。

わかりました。UI が表示された後、スライダーのドラッグを実現するメソッドを提供する必要があります。その前に、completedbar のリアルタイム更新であるメソッドも実装する必要があります。つまり、スライダーがドラッグされると、コンプリートバーが常に左側の領域を埋めます:

コードをコピー

コードは次のとおりです。 var bw = sliderbar.width(), sw = slider.width(); //スライダーがバーに表示されていることを確認します(制限付きにする)

ps.limited = { 最小: 0, 最大: bw - sw };

if (typeof window.$sliderProcess == '未定義') {
window.$sliderProcess = new Function('obj1', ' obj2', 'left',
'obj1.css ('left',left);obj2.css('width',left);');
}
$sliderProcess(slider, completedbar, eval('ps.limited.' ps.initPosition));


bw、sw は、スライダーバーとスライダーの長さを保存するために使用されます。これを防ぐために、ここでは ps.size の値が直接使用されません。スタイルの border-width が幅を損なうのを防ぎます。

スライダー[左]の最大値と最小値を格納する限定プライベートメンバーを定義し、eval('ps.limited.' ps.initPosition)を直接使用して後で取得することでスイッチ操作を回避します。

同時に、完成したバーの塗りつぶしの長さとスライダーの左の距離を見つけるために、グローバル関数を定義する必要があります。これに $sliderProcess という名前を付けました。
次にしなければならないことは、スライダーをドラッグ アンド ドロップすることです。ここでは、以前にリリースされた jQuery ドラッグ アンド ドロップ プラグインを使用し、適切なカスタマイズを行います:





コードをコピー

コードは次のとおりです:// ドラッグ アンド ドロップ var slide = {

drag : function(e) {

var d = e.data;
var l = Math.min(Math.max(e.pageX - d.pageX d.left, ps.limited.min), ps.limited.max);
$sliderProcess(slider, completedbar, l);
//2 つのパラメータをプッシュします: 1 番目:percentage、2 番目:event
ps.onChanging(l / ps.limited.max) , e );
},
drop: function(e) {
slider.removeClass(ps.sliderHover);
// 2 つのパラメーターをプッシュします: 1 番目: パーセント、2 番目: イベント
ps. onChanged(parseInt(slider.css('left')) / sw - ps.limited.max, e);
$().unbind('mousemove', slide.drag).unbind('mouseup' , slide .drop);
}
};
if (ps.enable) {
//バインドイベント
slider.bind('mousedown', function(e) { var d = {
left: parseInt(slider.css('left')),
pageX: e.pageX
};
$(this).addClass(ps.sliderHover);
$().bind('mousemove', d, slide.drag).bind('mouseup', d, slide.drop)
}


このように、jSliderのenable属性がtrueの場合、エンドユーザーがマウスを押すとmousemoveイベントがバインドされ、マウスがポップアップすると削除されます。スライダーのleft属性を同期的に更新するだけで済みます。同時に、ドラッグの onChanging メソッドとドロップの onChanged メソッドをバインドします。これらの 2 つのメソッドにプッシュされるパラメータは同じで、1>パーセント、つまり 0 ～ 1 の範囲の値です。 2>イベント。

これで、jSlider プラグインが基本的に形になり、ユーザーにドラッグ可能なスライダーを提供できるようになりました。

[拡張機能]
ユーザーがそう簡単に満足しない場合があるため、「自分で値を設定したいのですが、この機能を提供したらどうですか?」と叫ぶ人がいました。

次に、jSlider の値を設定するメソッドをユーザーに公開する必要があります。最初に考慮すべきことは、このメソッドにはアクション オブジェクト (jSlider) が必要であるため、現時点ではこれを行いたくないということです。アクション オブジェクトをパラメータとして渡し、このメソッドをプラグインとして開発します。メソッドに setSliderValue という名前を付け、v (値) と callback (設定完了後のコールバック関数) の 2 つのパラメータを開きます。

つまり、$.fn.setSliderValue(v,callback);
OK、残りはアクション オブジェクトであることがわかります。スライダーがドラッグされると、主にアクションが実行されます。スライダーと completedbar の 2 つのオブジェクトに作用し、jSlider プラグインの最後にスライダー オブジェクトを返すコードを追加します:

コードをコピーします コードは次のようになります。

slider.data = { bar: sliderbar, completed: completedbar };
return slider;
この方法で、jSlider を直接初期化できます。変数を使用して jSlider オブジェクトを取得し、setSliderValue メソッドを呼び出します。

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

var slider = $.fn.jSlider({});

slider.setSliderValue(v,function(){ });
setSliderValue コード:

try {
//validate
if (typeof v == '未定義' || v 1) {
throw new Error(''v' は 0 から 1 までの Float 変数でなければなりません。');
}
var s = this;//validate
if (typeof s == '未定義' ||
typeof s.data == 'undependent ' ||
typeof s.data.bar == '未定義') {
throw new Error('メソッドをオブジェクトにバインドしましたそれはスライダーではありません!');
}
$sliderProcess(s, s.data.completed, v * s.data.bar.width());
if (typeof callback != '未定義') { callback(v); }
}
catch (e) {
alert(e.message);
}


ここではグローバル関数 $また、sliderProcess は completedbar[width] と slider[left] の更新を実行するために呼び出されます。ここで例外処理が実行されるため、エンドユーザーは setSliderValue が jSlider オブジェクトに適用されることを確認するときに、この例外処理コードを削除できます。
【スキン】

jSlider の API に従って、より簡単にスキンを設定できます。jSlider をよりプロフェッショナルなものにするために、2 つの写真が必要です:


として使用します。 completedbar の背景 'bar' と 'slider' をスライダーの背景として使用します。OK、スタイルを更新しましょう:
BlueSkin

コードをコピー コードは次のとおりです。 /**//*----青い肌----*/

.bluebar

{}{
margin-top: 10px;高さ: 4px;
背景:#F7F7F7;
位置: 相対;
.bluebar .jquery-completed
>高さ : 4px;
背景:url(../images/slider/blue/bar.gif) 左中央 繰り返しなし
左:0;絶対;
}
.bluebar .jquery-jslider
{}{
高さ: 17px;
background:url(../images/slider/blue/slider.gif) 中心 0 no- 繰り返し;
トップ: -4px;
カーソル: ポインタ;
.bluebar .jquery-jslider-hover
{ }{
background-position:center -17px;
}


スタイルを設定するときに子ノードのスタイルに API のデフォルト値を使用させるため、作成時にjSlider を barCssName に設定するだけです:





コードをコピー


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

var blue = $.fn.jSlider({
renderTo: '#slidercontainer',
size: { barWidth: 500, sliderWidth: 10 },

barCssName: 'bluebar', onChanging: function(percentage , e) { // ここにコードが入ります } });
表示された UI:


その値を次のように設定します:

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

// コールバック関数でパーセンテージを設定します
blue.setSliderValue(0.65, function(percentage) {
// ここにコードが入ります
});

【汎用性】
もちろん、jSlider をスライダーとして使用できるだけでなく、場合によってはプログレスバーとしても使用できます。
(コードは投稿しません。デモで直接確認してください ;-) )
[概要]
これで、jQuery プラグインの開発プロセスを簡単に紹介します。 、開発時に注意すべき詳細については、次の記事でユニバーサルオートコンプリートプラグインの作成方法を紹介します。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

レポ：チームメイトを復活させる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

4週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

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

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7360

15

Java チュートリアル

1628

14

CakePHP チュートリアル

1353

52

Laravel チュートリアル

1265

25

PHP チュートリアル

1214

29

もっと見る