Mr.Moghadam
دوشنبه 25 دی 1391, 11:11 صبح
سلام
برای امروز آموزش ساخت پلاگین جی کوئری و براتون میذارم امیدوارم خوشتون بیاد.
ساخت پلاگین جی کوئری شاید به نظر کسانی که در jQuery مبتدی هستن یک کار سخت و پیچیده باشه.توی این آموزش میبینید که این کار خیلی هم سخت نیست و با داشتن دانش اندکی درمورد جی کوئری هم میتونید پلاگین هاتون رو بنویسید.
پلاگینی که قراره بسازیم یک پلاگین ساده است که میتونید پیش نمایشش رو در لینک زیر مشادهد کنید.
Demo (http://url.phpro.ir/QLfbbWr)
برای ساخت منوی بالا بدون استفاده از پلاگین باید کدهای زیر رو بنویسید :
$('#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(); });خب بریم سراغ آموزش.
ساختار پلاگین های جی کوئری
برای ساخت پلاگین باید از ساختار زیراستفاده کنیم :
$.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.spee d); },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 ش بشه 0
حالا برای اینکه از این پلاگین استفاده کنید یک فایل جدید با پسوند 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="animateMenuPadding.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> موفق باشید.
منبع : PHPro.ir (http://phpro.ir/?p=1242)
برای امروز آموزش ساخت پلاگین جی کوئری و براتون میذارم امیدوارم خوشتون بیاد.
ساخت پلاگین جی کوئری شاید به نظر کسانی که در jQuery مبتدی هستن یک کار سخت و پیچیده باشه.توی این آموزش میبینید که این کار خیلی هم سخت نیست و با داشتن دانش اندکی درمورد جی کوئری هم میتونید پلاگین هاتون رو بنویسید.
پلاگینی که قراره بسازیم یک پلاگین ساده است که میتونید پیش نمایشش رو در لینک زیر مشادهد کنید.
Demo (http://url.phpro.ir/QLfbbWr)
برای ساخت منوی بالا بدون استفاده از پلاگین باید کدهای زیر رو بنویسید :
$('#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(); });خب بریم سراغ آموزش.
ساختار پلاگین های جی کوئری
برای ساخت پلاگین باید از ساختار زیراستفاده کنیم :
$.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.spee d); },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 ش بشه 0
حالا برای اینکه از این پلاگین استفاده کنید یک فایل جدید با پسوند 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="animateMenuPadding.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> موفق باشید.
منبع : PHPro.ir (http://phpro.ir/?p=1242)