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

در مقاله قبلی از این آموزش(چطور اولین پلاگین خود را در جی کوئری بنویسیم؟ قسمت اول)، یک پلاگین جی کوئری ساده را پیاده سازی کردیم. اما مشکلی که این پلاگین داشت این بود که کاربران کنترلی بر روی ظاهر تول تیپ نداشتند، در این مقاله کدهایی را به پلاگین خود اضافه می کنیم که به کاربران اجازه می‌دهند استایل پیش فرض پلاگین را تغییر دهند.

ایجاد آپشن های پلاگین

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

$.fn.tooltipMe = function() {

برای انجام این کار را پارامتری به نام options را به صورت زیر برای پلاگین خود در نظر می‌گیریم :

$.fn.tooltipMe = function(options) {

ساخت مشخصه های پیش فرض

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

var defaults = $.extend({},{
    background: '#000',
    color: '#fff',
    rounded: '3px',
    opacity: 0.8
}, 

متغیری که در بالا تعریف کرده ایم باید درست بعد از نامگذاری پلاگین قرار بگیرد. در این متغیر ابتدا از jQuery.extend برای ترکیب مشخصه های پیش فرض و مشخصه هایی که کاربر از طریق پارامتر ارسال میکند، استفاده کرده ایم.

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

var settings = {
    background: '#000',
    color: '#fff',
    rounded: '3px',
    opacity: 0.8
}
defaults = $.extend({},settings, options);

تغییر مشخصه های متد CSS.

وقتی کار تنظیم متغیرها به شکلی که در بالا آمده است به اتمام رسید همچنان نمی توانیم از پلاگین خود به شکلی که میخواهیم استفاده کنیم. اگر نگاهی به متد CSS. در پلاگین مورد نظر بیاندازید، خواهید دید مشخصه‌ها همگی با مقادیر ثابتی مقداردهی شده اند. برای داینامیک کردن این مشخصه ها باید مقادیر مشخصه ها را به صورت پویا از متغیرهای تعریف شده دریافت کنیم :

they do we need to make them dynamic:

.css({
    backgroundColor: defaults.background,
    color: defaults.color,
    borderRadius: defaults.rounded,
    opacity: defaults.opacity,
    position: 'absolute',
    float: 'left'
})

در انتها دو مشخصه به صورت ثابت باقی خواهند ماند(position و float) که عملکرد پلاگین بر اساس آنها تعیین می شود. اکنون می توانید همه کدهای که برای نوشتن این پلاگین نیاز است را در زیر مشاهده کنید :

function($){
$.fn.tooltipMe = function(options) {
    var	defaults = $.extend({},{
        background: '#000',
        color: '#fff',
        rounded: '3px',
        opacity: 0.8
    }, options);
this.each(function() {
    if($(this).is('a')) {
    $(this).hover(function(e) {
        var text = $(this).attr('data-tooltip');
        $('<div id="tooltip"/>').appendTo($(this)).text(text).hide()
        .css({
            backgroundColor: defaults.background,
            color: defaults.color,
            borderRadius: defaults.rounded,
            opacity: defaults.opacity,
            position: 'absolute',
            float: 'left'
        }).fadeIn('slow');		  
        }, function() {
        $('#tooltip').remove();
        });	
    }

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

فراخوانی پلاگین

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

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

 هم اکنون که مقادیر پیش فرض تنظیم شده است، میتوانیم پارامترهایی را برای پلاگین خود به صورت زیر در نظر بگیریم و سپس آن را فراخوانی کنیم :

$('a.tooltip').tooltipMe({  
       background: '#fff',
       color: '#000',
       rounded: '20px',
       opacity: 1
});

نتیجه

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

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