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 開発に従事している、または一時的に集中している学生は、このプラグインに精通しているはずです。

スケッチ


実際にコーディングを開始する前に、プラグインの「外観」を説明するスケッチも必要です (イベント駆動型または API でカプセル化されたプラグインは、無視されます）。
多くの学生は、UI 開発を行う前にさまざまな小さな画像を集めるのに忙しいことがよくあります (PS やアイコンワークショップに熟練していない学生)。実際、美しいアイコンは確かに UI を美しくしますが、私の一般的なアプローチは、簡単に作成することです。 CSS を展開すると、初期の UI プレゼンテーションでは画像の使用量ができるだけ少なくなり、より多くの行が使用されます。
OK、本題に戻りましょう。私のスライダー デザイン スケッチは次のとおりです。


以下で使用される単語について説明します。
スライダー: この部分はドラッグ ハンドルとして使用されます。使用するには、ユーザーはこの部分をドラッグすることで完成したバーの位置を更新できます。
completed: この部分はバーの埋め込み要素として使用され、スライダーと開始点の間の距離を表示するための特殊効果として使用されます。つまり、スライダーの値に関連付けられます。
バー: スライダーのキャリア、complete の完全な値。

アイデア:
スライダーは、ドラッグ機能を提供するハンドルとして機能します。ドラッグ処理中に、完成したバー (長さ) が更新される必要があります。影響を受ける領域は、スライダーからバーの左端までの距離です。

[コーディング]

jQuery UI/Effect プラグインの開発では、UI を何度も操作する必要があるため、プラグインを描画するための Html ツリーを提供する必要があります。最後に、出力は js dom を介して行われるため、単純な dom 構造を描画する場合は、js を直接使用して完成させます。ただし、ネストがより複雑な場合は、最初に html を使用して完成させる必要があります。次に、それをjs出力に変換します。

html ツリー:

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

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 までご連絡ください。

前の記事：jquery Firefox3.5_jquery での選択に関する問題次の記事：jquery Firefox3.5_jquery での選択に関する問題

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved