پلاگین در جی کوئری
استفاده از پلاگینها یکی از امکانات جیکوئری هستند که باعث فراگیر شدن جیکوئری با سرعت زیاد شدند. امکان استفاده از کدهای آماده و نوشته شده توسط اشخاص دیگر و به اصطلاح پلاگین های آماده، استفاده از این کتابخونه جاوا اسکریپتی رو بسیار ساده و لذت بخش کردهاست. پلاگینها مجموعهای از کدهای جاوا اسکریپت هستند که برای هدفی به خصوص نوشته شدهاند و میتوان از آنها به سادگی استفاده کرد بدون اینکه در مورد چگونگی عملکرد آنها نیازی باشد که چیزی بدانیم.
البته از همان ابتدای کار، سایت jQuery محلی رو برای معرفی پلاگینهای نوشته شده، معرفی کرد و همین باعث شد تا تمامی پلاگینها به سادگی قابل دسترس باشند و بتوان کدهایی که نیاز داریم رو به سادگی با جشتجو و دسته بندیی که انجام شده پیدا کنیم. این مساله هم کمک بسیار زیادی در پراستفاده بودن jQuery در دنیای طراحی وب امروز شد. مجموعهای از پلاگینهای جیکوئری با بیش از 4000 پلاگین رو در این لینک میتونید ببینید.
استفاده از پلاگین در jQuery
استفاده از پلاگینها در جیکوئری بسیار ساده هست و میتوان آن را مرحله به مرحله به صورت زیر نشون داد:
1. پیدا کردن پلاگین مورد نظر با استفاده از جستجو در سایت پلاگینهای جیکوئری و یا در سرچ انجینهای اینترنت مثل بینگ و گوگل و یاهو.
2. دانلود کردن فایل js مربوط به پلاگین. توجه کنید در برخی موارد ممکن است این پلاگین در یک CDN پیوست شده باشه و دیگر نیازی با دانلود کردن اون نیست و فقط باید از آدرس اینترنتی اون CDN استفاده کنید. (در مورد CDN بیشتر بخوانید.)
3. اضافه کردن پلاگین به سورس html با استفاده از تگ <script>. دقت کنید که این پلاگین بعد از کتابخونه اصلی jQuery به سورس اضافه بشه.
4. تنظیمات مربوط به پلاگین و کدهایی که برای کار کردن این پلاگین در jQuery باید نوشت. تمامی این اطلاعات رو میتونید از همونجایی که پلاگین رو دانلود کردید، پیدا کنید. سازندگان پلاگین در سایت خود یا در مطلبی که مربوط به اون پلاگین نوشته شده، در اکثر موارد نحوه استفاده از پلاگین رو هم به همراه مثال، نوشتهاند.
در ادامه این پست یک پلاگین را معرفی کرده و نحوه استفاده از اون توضیح داده خواهد شد. سعی میشه که در ادامه مطالب در موضوع jQuery در جعبه ابزار، پلاگینهای کاربردی و مفید معرفی بشه.
پلاگین فید خوان
در پست قبلی دیدید که چگونه با استفاده از یک API از گوگل، تونستیم RSS Feed سایت دیگری را به JSONP تبدیل کرده و با jQuery بخوانیم. در ادامه پلاگینی معرفی میشه که فقط کافی هست اون رو در سورس html اضافه کرده و با دستورالعملی که در ادامه خواهید دید، از اون در خواندن فید های دیگر استفاده کنید.
نسخه اصلی این پلاگین که jGFeed نام داره رو میتونید از آدرس اصلی سازنده اون دانلود کنید. البته شما میتونید این پلاگین رو بعد از اعمال یک سری تغییرات برای Error Handling بهتر و استفاده ساده تر، از سایت جعبه ابزار دانلود کنید. برای دانلود این پلاگین، روی لینک زیر کلیک کنید و فایل دانلود شده را از حالت زیپ خارج کنید.
پلاگین فیدخوان برای جیکوئری، بر اساس پلاگین اصلی jGFeed
سپس این پلاگین را به همراه کتابخونه اصلی jQuery در سورس html اضافه کنید. مثال پست قبلی رو با استفاده از پلاگین، به صورت زیر تغییر بدید: (در این مثال از RSS Feed مربوط به سایت iDevCenter برای پیشفرض استفاده شدهاست.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jQuery Feed Reader Plugin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="jgfeed.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$("#getfeed").click(function() {
$("#feeds").text("loading...");
var feedcount =4 ;
$.jGFeed($("#feedinput").val(), feedcount, function(feeds){
// کنترل خطا
if(!feeds){
// خطایی رخ داده
$("#feeds").html("ERROR!");
return false;
}
// اطلاعات فید به درستی برگشت داده شده
var webtitle;//Website title
webtitle = feeds.title;
var weblink;//Website Link
weblink = feeds.link;
$("#feeds").html("<div><b><a href=\"" + weblink + "\">" + webtitle + "</a></b></div>");
for(var i=0; i<feeds.entries.length; i++){
var entry = feeds.entries[i];
$("#feeds").append("<div><a href=\"" + entry.link + "\">" + entry.title + "</a></div>" );
}
});
});
});
</script>
<div>
<input id="feedinput" style="width:300px;" type="text"
value="http://www.idevcenter.com/links/upcoming/feed/"/>
<br />
<input type="button" value="Load" id="getfeed" />
<hr />
<div id="feeds"></div>
</div>
</body>
</html>
در این مثال از Google CDN استفاده شده (در مورد CDN بیشتر بخوانید.) و فایل پلاگین jgfeed.js هم بعد از آن به سورس اضافه شده. اگر در مثال دقت کنید، از دستور jGFeed استفاده شده که در واقع این دستور از پلاگین به کد جیکوئری ارسال میشود.
برای اینکه سادگی استفاده از پلاگین رو ببینید، به کد زیر دقت کنید که تنها نشان دهنده استفاده از پلاگین هست:
$.jGFeed(feedurl, feedcount, function(feeds){
// کنترل خطا در متغیر و خواندن و نوشتن آن
}
در واقع در مثالی که زده شد، برنامه کامل نوشته شد، اما اصل قضیه دستور jGFeed هست که به آن 2 مقدار آدرس فید و تعداد فید رو پاس میدیم و این پلاگین به ما مقدار feeds رو برمیگردونه. اگر feeds برابر false باشد یعنی خطایی رخ داده، مثلا آدرس فید اشتباه است.
اگر مقدار feeds برابر false نباشد، بنابراین حاوی فید مورد نظر به فرمت JSON هست که میتوان آن را به هر شکل و فرمتی خواند و نوشت که یک نمونه آن در کد بالا گفته شد. در واقع، انتظار نداشته باشید با استفاده از پلاگین، از نوشتن کد جیکوئری بینیاز هستید. میبینید که در این مثال بعد از استفاده از پلاگین حدود 15 خط دستورات JQuery نوشته شده. البته پلاگین مربوط به این مثال، یک نمونه ساده بود و برخی پلاگینها کدهای بسیار سنگینی دارند که فوق العاده کار رو راحت تر و سریعتر میکنند.
این مطلب به صورت اختصاصی برای
وبلاگ جعبه ابزار نوشته شده است. استفاده از این مطلب به شرط ذکر منبع، آزاد میباشد.