چطور اولین پلاگین خود را در جی کوئری بنویسیم؟ قسمت اول

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

Markup

هر پلاگینی در جی کوئری به مقداری Markup (کدهای html) نیاز دارد و در مثالی که در این مقاله بیان خواهد شد، تمام آن چیزی که نیاز داریم یک تگ لینک ساده بوده که دارای مشخصه  data attribute است. ما پلاگینی خواهیم ساخت که متن مشخصه ی data-tooltip را گرفته و به عنوان متن tooltip نمایش می‌دهد. پس کد های HTML ایی که برای این پلاگین استفاده می شود، حداقل بوده و شامل کدهای است که از یک تگ لینک بهره می‌برند :

<section>
<p>Your bones <a href="#" class="tooltip" data-tooltip="But mine do">don't break</a>
.That's clear. Your cells react to bacteria and viruses differently than mine. 
You don't get sick, I do. That's also clear. But for some reason, 
you and I react the exact same way to water. 
We swallow it too fast, we choke. We get some in our lungs, we drown.
However unreal it may seem, we are connected, you and I.
 We're on the 
<a href="#" class="tooltip" data-tooltip="just on opposite ends">same curve</a>.</p>
</section>

در نهایت باید بتوانیم به شکل زیر پلاگین مورد نظر را فراخوانی کنیم :

$('a.tooltip').tooltipMe();

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

ساخت پلاگین

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

(function ( $ ) {
//Our Code
}( jQuery ));

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

$.fn.tooltipMe = function() {

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

this.each(function() {
   if($(this).is('a')) {

بعد از آن کافی است که از تابع hover برای ذخیره سازی مشخصه data-tooltip و ایجاد یک تول تیپ استفاده کنیم :

$(this).hover(function(e) {
    var text = $(this).attr('data-tooltip');   
    $('<div id="tooltip"/>').appendTo($(this)).text(text).hide()
    .css({
        backgroundColor: '#000',
        color: '#fff',
        borderRadius: '3px',
        opacity: 0.8,
        position: 'absolute',
        float: 'left'
    }).fadeIn('slow');		  
},

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

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

کد هایی که تاکنون نوشته ایم یک تول تیپ را ایجاد میکند ولی همچنان با حرکت موس بر روی لینک و خروج از آن این تول تیپ حذف نمیشود. برای حل این مشکل نیاز است قسمت دوم تابع hover را تکمیل کنیم :

function() {
   $('#tooltip').remove();
});	
}

در مثال بالا تمام کاری که انجام داده ایم این است که وقتی موس کار از روی لینک خارج می شود تول تیپ ایجاد شده در مرحله قبل را حذف کنیم. کار آخری که باید انجام دهیم اضافه کردن مشخصه های top و left به div مورد نظر است. از آنجایی که برای تول تیپ مشخصه position با مقدار absolute مقداردهی شده است به راحتی می‌توان از مشخصه top و left برای تعیین مکان ظاهر شدن تول تیپ استفاده کرد :

$(this).mousemove(function(e) {
    $('#tooltip').css({
    top: e.pageY + 10,
    left: e.pageX + 10
    });
});
});
return this;
}
})(jQuery);

همانطور که در مثال بالا مشاهده می کنید از مقادیر e.pageY و e.pageX استفاده نموده ایم که مختصات دقیق نشانگر موس بر روی صفحه نمایش را تعیین می کنند. اکنون می توانید پلاگین خود را به شکل زیر فراخوانی کنیم :

$('a.tooltip').tooltipMe();

نتیجه

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

منبع: لرن سورس