jQuery
جی کوئری یک ابزار عالی، قوی و ساده برای طراحی سایت های تعاملی است. پلاگین های بسیار زیادی برای جی کوئری موجود است که حجم عظیمی از امکانات را برای شما فراهم می کنند. ولی اگر پلاگین های موجود کار مورد نظر شما را انجام ندادند چه باید کرد؟ پلاگین نویسی برای جی کوئری آنگونه که در دید اول بنظر می رسد سخت نیست. در زیر آموزش ساده ای برای پلاگین نویسی جی کوئری مشاهده می کنیم.

شروع به کار

قبل از شروع کار می بایست فایل اسکریپت لازم برای پلاگین خود را ایجاد کرده و آن را به فایل HTML خود وصل کنیم. بطور معمول اسم فایل پلاگین بدین صورت نامگذاری می شود که با jquery شروع شده و سپس اسم پلاگین نوشته می شود، مثل: “jquery.hello-world.js”
jQuery
سپس باید فایل پلاگین خود و همچنین برادر بزرگترش فایل jquery را به HTML وصل کنیم. ```
<h3>ساختار پلاگین جی کوئری</h3>
در جی کوئری هوک های کافی ای وجود دارد تا نتوانیم پلاگین خود را به آسانی طراحی و پیاده سازی کنیم. کد زیر پوسته اولیه یک پلاگین ساده جی کوئری است:

(function($) {
$.fn.helloWorld = function() {
// Future home of "Hello, World!"
}
}(jQuery));

اجازه دهید در چند دقیقه متوجه اتفاقات رخ داده در کد بالا شویم، با قرار دادن تمامی کد ها در دستور ```
(function() {})
``` این اطمینان حاصل می شود که تمامی متغییر های تعریف شده در پلاگین ما دیگر با متغییر های global تداخل ندارند.

$.fn


<h3>انجام عملیات در پلاگین</h3>
پلاگین ما قرار است کاری بسیار ساده و احمقانه، ولی در عین حال کاری کافی برای توضیح شیوه کار انجام دهد. قرار است متن تمامی المنت های مورد تاثیر پذیر را به مقدار “Hello, World!” تغییر دهد.

(function($) {
$.fn.helloWorld = function() {
this.each( function() {
$(this).text("Hello, World!");
});
}
}(jQuery));

فرض کنید ما می خواهیم متن تمامی تگ های `<h2>` را تغییر دهیم.
<div class="style"><img width="100%" src="http://blog.teamtreehouse.com/wp-content/uploads/2013/03/before.png" alt="jQuery" /></div>
می بایست پلاگین را بصورت زیر (همانطور برای همه شما آشنا است) فراخوانی کنیم:
و نتیجه نهایی
<div class="style"><img width="100%" src="http://blog.teamtreehouse.com/wp-content/uploads/2013/03/after.png" alt="jQuery" /></div>
همانطور که مشاهده می کنید، هر چند پلاگین بخوبی عمل می کند ولی اگر بخواهم دستور دیگری را نیز اجرا کنیم دیگر درست کار نخواهد کرد، برای اطمینان از صحت انجام کار پلاگین می بایست نتایج بازگشتی پلاگین را به ازای هر المنت انتخابی return کنیم.

(function($) {
$.fn.helloWorld = function() {
return this.each( function() {
$(this).text("Hello, World!");
});
}
}(jQuery));

شما اولین پلاگین جی کوئری خود را نوشتید.
<h3>کمی بیشتر (ورودی پلاگین)</h3>
درحالی که شما خوشحال هستید که پلاگین خود را کامل نوشته اید، رئیس شما برمی گردد و به شما می گوید که سایت باید بتواند به زبان اسپانیایی ترجمه شود. اوه اوه !! حالا چه کاری می توانیم بکنیم؟؟؟
خب ما میتوانیم یک آرگومان ورودی به پلاگین خود اضافه کنیم و به این نوشتن متن درون خود پلاگین آن را از آرگومان ورودی بخوانیم و اینگونه دیگر متن می تواند متغییر باشد.

(function($) {
$.fn.helloWorld = function( customText ) {
return this.each( function() {
$(this).text( customText );
});
}
}(jQuery));

حال می می توانید هم متن دلخواه را به پلاگین خود ارسال کنیم، دفتر ما در مادرید متن ترجمه شده مورد نظر ما را برای ما ارسال کرده است و ما می توانید از آن به عنوان پارامتر استفاده کنیم.
و درنهایت صفحه شبیه این خواهد بود:
<div class="style"><img width="100%" src="http://blog.teamtreehouse.com/wp-content/uploads/2013/03/despues.png" alt="jQuery" /></div>

در صورت نیاز می توانید فایل این آموزش را از <a href="https://github.com/taupecat/jquery-plugin">GitHub</a> بگیرید