آموزش ساخت پلاگین در jQuery

مدیر سایت

دوشنبه 9 دی 1392 | 0:53

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

آموزش ساخت پلاگین در jQuery

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

پلاگینی که قراره بسازیم یک پلاگین ساده است که میتونید پیش نمایشش رو در لینک زیر مشادهد کنید.

Demo

برای ساخت منوی بالا بدون استفاده از پلاگین باید کدهای زیر رو بنویسید :
$('#animate-menu').find('li a').each(function(index, element) {
$(this).hover(function(){
$(this).animate({paddingLeft:'20px'},250);
},function(){
$(this).animate({paddingLeft:'0px'},250);
});

همینطور که میبینید نوشتن این کدها برای هرپروژه کار سختیه مخصوصا اگه کدهای زیادی داشته باشیم.
بعد از تبدیل کدهای بالا به پلاگین با استفاده از خط زیر میتونیم از پلاگین در پروژه های مختلف استفاده کنیم :
$(document).ready(function() {

$('.container').animateMenu();

});

خب بریم سراغ آموزش.

ساختار پلاگین های jQuery

برای ساخت پلاگین باید از ساختار زیراستفاده کنیم :
$.fn.animateMenu= function(options){
// plugin code here
};

بدنه همه پلاگین های جی کوئری باید مثل بالا باشه.اما سایت خود jQuery گفته که برای اینکه بتونیم از علامت $ استفاده کنیم بدون اینکه با بقیه کتابخانه های جاوااسکریپت مثل MooTools , prototype و … تداخل نداشته باشه از ساختار زیر استفاده کنید :
با اینکار کتابخانه jQuery در علامت $ قرار میگیره تا مطمئن بشیم با بقیه کتابخانه ها تداخل پیدا نمیکنه.

حالا وقت اینه که کدهای مربوط به پلاگین رو بنویسیم.
(function($){
$.fn.animateMenu= function(option){

var def = {
padding:20,
speed : 250
}
var opt = $.extend(def,option);
$(this).find('li a').each(function(index, element) {
$(this).hover(function(){
$(this).animate({paddingLeftpt.padding},opt.speed);
},function(){
$(this).animate({paddingLeft:'0px'},opt.speed);
});
});
};
})(jQuery);

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

یک شیء به نام def تعریف کردیم که مقادیر پیش فرض رو داخلش مشخص کردیم.

با استفاده از متد extend شیء def و option رو باهم ادغام کردیم و داخل opt قرار میدیم.اگر در option چیزی وجود نداشته باشه مقادیر def داخلش قرار میگیرن در غیر اینصورت مقادیر option داخل opt قرار میگیرن.

اگر دقت کنید میبینید که از $(this) استفاده کردیم.$(this) به عنصری اشاره میکنه که به پلاگین ما ارسال شده.اگرپلاگین رو به صورت زیر فراخوانی کنیم :
$('#menu'(.animateMenu();

در $(this) عنصر#menu قرار میگیره.

در خط بعد با استفاده از تابع each و find تمام تگهای a که در li قرار دارند رو پیدا کردیم و در تابع hover (وقتی موس میره روی یک عنصر این تابع اجرا میشه) گفتیم که padding-left برابر با مقداری بشه که در شیء opt.padding قرار داره.وقتی هم موس از روی تگ a رفت کنار padding-left ش بشه ۰

حالا برای اینکه از این پلاگین استفاده کنید یک فایل جدید با پسوند js بسازید.محتویات زیر رو داخلش کپی کنید :
(function($){
$.fn.myPlugin = function(option){

var def = {
padding:20,
speed : 250
}
var opt = $.extend(def,option);
$(this).find('li a').each(function(index, element) {
$(this).hover(function(){
$(this).animate({paddingLeft:'20px'},opt.speed);
},function(){
$(this).animate({paddingLeft:'0px'},opt.speed);
});
});
};
})(jQuery);

این فایل رو با نام animateMenu.js ذخیر کنید.

حالا در فایل index.html محتویات زیر رو بنویسید :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery.js"></script>
<script src="animateMenu.js"></script>
<script>
$(function(){
$('.container').animateMenu();
});
</script>
<style>
.container {
width: 520px;
height: 200px;
position: relative;
margin: 15px 0 0 10px;
overflow: hidden; margin: 0; padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
background: #1d1d1d;
}
ul#animate-menu {
margin: 10px 0 20px;
padding: 0;
font-size: 1.1em;
clear: both;
float: left;
width: 520px;
}
ul#animate-menu li{
margin: 0;
padding: 0;
overflow: hidden;
height:40px;
}

ul#animate-menu a {color: #7bc441; }

</style>
<title>jQuery Plugin</title>
</head>

<body>
<div class="container">
<ul id="animate-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="http://phpro.ir">PHPro.ir</a></li>

</ul>
</div>
</body>
</html>

دیدگاه شما

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

نمایش مشخصات من