آموزش ساخت پلاگین در 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({paddingLeft:opt.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>

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

بازدید : ۲۷۵۵

دی ۲۶, ۱۳۹۱ @ ۴:۱۰ ب.ظ

پلاگین باگ داره !!!
با موس تند تند و پشت سر هم برید روی گزینه ها میبینید .
برای رفع اون باید از stop() استفاده کنید

پاسخ دادن
    سعید
    دی ۲۶, ۱۳۹۱ @ ۵:۰۲ ب.ظ

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

    پاسخ دادن
محمد حسین
فروردین ۲۵, ۱۳۹۵ @ ۱۱:۰۹ ب.ظ

شما فوق العاده اید … ممنونم ممنونم ممنون 🙂
راستی قالب سایتتون هم خیلی خوب شده.

پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*