ایجاد اولین پلاگین JQuery شما

ایجاد پلاگین JQuery

گاهی اوقات مفید است که یک تکه از قابلیت های موجود در کد شما داشته باشید. شاید شما می خواهید یک تابع تک که شما می توانید بر روی یک انتخابگر جی کوئری تماس بگیرید که اقدام خاصی را در مورد این انتخابگر انجام می دهد.

یا شاید شما یکی از ویژگی های عملکرد خود را در یکی از پروژه های خود نوشتید و حالا می خواهید قادر به حرکت آن به راحتی به سایر پروژه ها باشید. در هر صورت نوشتن یک افزونه بهترین گزینه شماست.

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

اما گاهی اوقات مقدار زیادی کافی نیست، اگر نتوانید پلاگین درست را با توجه به نیازهای شما پیدا کنید، یا شاید یک پلاگین وجود داشته باشد اما خیلی بزرگ است و شما فقط بخشی از آن را می خواهید.

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

راه اندازی شما می توانید کل پروژه را از GitHub دانلود کنید برای این آموزش، ما یک پلاگین آکوردئون ساده ایجاد خواهیم کرد. بیایید یک فایل js ایجاد کنیم و آن را در دایرکتوری “js” وب سایت ما قرار دهیم.

این سنت است که تمام فایل های js plugin را با “jquery dot” شروع کنیم و سپس نام پلاگین واقعی آن را بنویسیم، بنابراین ما “jquery.simple-accordion.js” را با ما تماس خواهیم گرفت.

 – فایل پلاگین ما در داخل دایرکتوری js

در دایرکتوری وب سایت ما حالا ما باید فایل پلاگین ما را همراه با کتابخانه جی کوئری به صفحه HTML اصلی (index.html) اضافه کنیم.

بهتر است که کتابخانه جی کوئری را مستقیما از سرورهای Google API بگنجانیم، زیرا آنها به جای محل سرور تک سرور شما در سراسر جهان توزیع شده اند: سرورهای نزدیک تر معمولا به معنای پاسخ سریع تر به بازدید کننده می باشند.

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

محتویات پیش ذخیره شده به معنی بارگذاری بار سریع برای بازدید کننده است. ساختار پلاگین جی کوئری jQuery با تمام قلاب های لازم برای کمک به شما در توسعه پلاگین ما بسته بندی شده است.

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

(function($) {

$.fn.simpleAccordion = function() {

//TODO: code for simple accordion plugin

}

}(jQuery));

بیایید به سرعت از آنچه که در اینجا اتفاق می افتد برویم. با وارد کردن همه چیز در الگوی جاوااسکریپت self-enclosed (function () {}) ما مطمئن هستیم که تمام متغیرهای موجود در پلاگین ما با خیال راحت در خارج از فضای نامیش جهانی باقی خواهند ماند.

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

باز هم، ما در تلاش برای جلوگیری از برخورد با دیگر جاوا اسکریپت در صفحه است، بنابراین ما می خواهیم اطمینان حاصل کنیم که افزونه ما وابسته به $ default نیست، که می تواند توسط یک کتابخانه دیگر مورد استفاده قرار گیرد. 

در نهایت، $ .fn راه جی کوئری است که به شما اجازه می دهد پلاگین خود را تعریف کنید، که ما آن را SimpleAccordion نامیدیم. با تمام قطعات ما در محل، بیایید آشپزی کنیم! 

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

با استفاده از کلمه کلیدی “این” ما می توانیم پلاگین خود را اعمال توابع مرتبط با دسترسی به هر عنصر در یک حلقه بدون در نظر گرفتن نوع عنصر. گرفتن بخش HTML آماده – ساخت آکاردئوناز آنجایی که ما در حال ساخت آکاردئون ما می خواهیم ساختار HMLT برای آن را داشته باشیم، بنابراین در اینجا بروید: 

Heading 1 

Cras dolor elit, porttitor ac diam bibendum, eleifend aliquam erat.

Heading 2

Donec blandit risus nec est tristique interdum.

Heading 3

Fusce sit amet arcu id justo malesuada faucibus.

Heading 4

Aliquam tincidunt lobortis sem at porttitor.

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

این است که چگونه باید به نظر می رسد:

فقط به نظر می رسد که ما باید برخی از سبک های ساده را اضافه کنیم. پس بزن که بریم:

.accordion {

width: 600px;

border: 1px solid #ccc;

border-bottom: none;

}

.accordion dt,.accordion dd {

border-bottom: 1px solid #ccc;

margin: 0px;

}

.accordion dt {

background: rgba(193, 221, 252, 0.24);

cursor: pointer;

padding: 8px 4px;

font-size: 14px;

font-weight: bold;

}

.accordion dd {

padding: 12px 8px;

}

در حال حاضر ساختار آکوردئون ما باید چنین باشد:

 

بخش جی کوئری – زمان برای انجام کاری!

 

برای اضافه کردن قابلیت به پلاگین ما قصد داریم فایل js را ویرایش کنیم و کد زیر را اضافه کنیم:

(function($) {

$.fn.simpleAccordion = function(options) {

return this.each(function() {

var dts = $(this).children(‘dt’);

dts.click(accordionClick);

dts.each(reset);

});

function accordionClick() {

$(this).siblings(‘dt’).each(hide);

$(this).next().slideDown(‘fast’);

return false;

}

function hide() {

$(this).next().slideUp(‘fast’);

}

function reset() {

$(this).next().hide();

}

}

})(jQuery);

به سرعت به آنچه که این کد انجام می دهید بروید. ابتدا باید بدانید که جی کوئری یک کتابخانه است که زبان جاوا اسکریپت را گسترش می دهد. هنگام ایجاد هر پلاگین جی کوئری، اساسا گسترش کتابخانه جی کوئری، که جاوا اسکریپت را گسترش می دهد.

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

بنابراین در شرایط ساده، شما افزونه خود را از جی کوئری با استفاده از fn “your-plugin-name”

علاوه بر این، می توانیم گزینه هایی برای انتقال به پلاگین ما اضافه کنیم. پلاگین جی کوئری می تواند پیش فرض ها و گزینه ها را شامل شود. گزینه ها استدلالی است که می توانید به پلاگین خود منتقل کنید.

به جای ارسال چندین استدلال، با یک شی گزینه ای می توانید چندین خواص را ارسال کنید، که عمل استاندارد جی کوئری است. هنگامی که اجازه می دهد گزینه در پلاگین خود، بهترین روش برای تنظیم گزینه های پیش فرض با استفاده از شیء پیش فرض است.

مانند گزینه ها، پیش فرض ها یک الگوریتم شی هستند که باید شامل ویژگی هایی باشد که شما اجازه می دهید به پلاگین خود منتقل شوند.

بیایید به سرعت برخی از گزینه های اضافه شده به پلاگین خود را برای نشان دادن این ساده است. ما قصد داریم پارامتر گزینه را برای اولین بار از اولین آکوردئون ما باز کنیم.

(function($) {

$.fn.simpleAccordion = function(options) {

var state = $.extend({}, {open: false}, options);

return this.each(function() {

var dts = $(this).children(‘dt’);

dts.click(accordionClick);

dts.each(reset);

if(state.open)

$(this).children(‘dt:first-child’).next().show();

});

function accordionClick() {

$(this).siblings(‘dt’).each(hide);

$(this).next().slideDown(‘fast’);

return false;

}

function hide() {

$(this).next().slideUp(‘fast’);

}

function reset() {

$(this).next().hide();

}

}

})(jQuery);

اگر متوجه شدید، ما از مقدار پیش فرض open استفاده می کنیم: false، بنابراین اگر هیچ گزینه ای منتقل شده باشد، افزونه فرض می کند که شما وقتی می خواهید اولین آیتم را در آکاردئون بسته کنید، بسته می شود.

هنگامی که افزونه گزینه ها را دریافت می کند، می توانید به روش $ .extend تکیه کنید تا حقیقت اصلی را اعمال کنید. چه روش $ .extend این است که دو یا چند اشیا را ادغام می کند.

بنابراین شما آن را اولین پلاگین جی کوئری خود را، بسیار ساده است. امیدوارم از این آموزش لذت ببرید و مفید واقع شود..

امکان ارسال دیدگاه وجود ندارد!