نمایش خروجی RSS سایتهای دیگر به کمک jQuery
دوشنبه 31 تیر 1392نمایش خروجی RSS سایتهای دیگر به کمک jQuery <br/> شاید خیلی از دوستان (مثل گذشته نه چندان دور خودم ) خیلی بیش از اندازه به برنامه نویسیهای سمت سرور اهمیت می دهند که این کار باعث از دست دادن ، سرعت و سادگی برنامه نویسی سمت کلاینت میشود.
شاید خیلی از دوستان (مثل گذشته نه چندان دور خودم ) خیلی بیش از اندازه به برنامه نویسیهای سمت سرور اهمیت می دهند که این کار باعث از دست دادن ، سرعت و سادگی برنامه نویسی سمت کلاینت میشود.
معمولا ما برای کار با خروجیهای XML از کدهای سمت سرور استفاده میکنیم ، بدون اینکه از قدرت جی کوئری در این زمینه اطلاعی داشته باشیم. البته در این مقاله خیلی به پردازش XML توسط جی کوئری نمیپردازیم و کار اصلی را گوگل برای ما انجام میدهد.
برای انجام این کار ما ابتدا توسط یکی از کتابخانههای گوگل ، خروجی RSS یک وب سایت رامی خوانیم و بعد به کمک jQuery آنها را نمایش میدهیم.
<script src="jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initializeda() { var feed = new google.feeds.Feed("http://www.drupaleasy.ir/rss.xml"); feed.setNumEntries(5); feed.setResultFormat(google.feeds.Feed.JSON_FORMAT); feed.load(function (result) { if (!result.error) { for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; $('#drupaleasy ul').append('<li><a href="' + entry.link + '">' + entry.title + '</a></li>'); } } }); } google.setOnLoadCallback(initializeda); </script>
توضیحات کد :
ابتدا نیاز داریم کتابخانه گوگل را به صفحه اضافه کنیم. شما میتوانید مستندات کامل این کتابخانه در این لینک بخوانید.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
در ابتدا معرفی میکنیم که به کدام امکان این کتابخانه نیاز داریم ، در این جا ما از ورژن "1" تابع feed استفاده میکنیم.بد نیست برای آشنایی بیشتر سری هم به این لینک بزنید.
google.load("feeds", "1");
ابتدا لینک مورد نظر که باید خروجی از آن گرفته شود را معرفی میکنیم و آن را در متغییری قرار میدهیم.
var feed = new google.feeds.Feed("http://www.drupaleasy.ir/rss.xml");
تنظیمات دلخواه خودمان را نظیر تعداد پست واکشی شده و نوع خروجی مشخص میکنیم. تجربه (شخصی )نشان داده که بهترین نوع خروجی JSON است.
feed.setNumEntries(5); feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
و بعد هم به کمک jQuery ساختار مورد نظر خودمان را تنظیم میکنیم. شما میتوانید به کمک مستندات ، و سلیقه شخصی خودتان این کار را انجام بدهید ، و در آخر هم تنظیم میکنید ، اجرای تابع شما در چه زمانی اتفاق بیافتید.
feed.load(function (result) { if (!result.error) { for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; $('#drupaleasy ul').append('<li><a href="' + entry.link + '">' + entry.title + '</a></li>'); } } });
در این جا من خروجی فید را به صورت یک لیست (ul) تنظیم کردم ، به این صورت که به ازای هر سطر یک li همراه با تگ a تولید کرده ام و به ul مورد نظر append کردم.
فایل HTML :
<div id="drupaleasy" class="feeds"> <span>DrupalEasy.ir</span> <ul> </ul> <a href="http://drupaleasy.ir">more</a> </div>
همچنین خیلی راحت میتوانید به کمک CSS استایلهای دلخواه خودتون رو اعمال کنید.
.feeds { float: right; background-color: rgba(234, 242, 243, 0.73); margin: 5px; border-radius: 20px; padding: 8px; width: 293px; height: 217px; border: 1px solid #293883; } #drupaleasy ul { list-style-image: url("img/drupal.png"); }
این هم شد خروجی کار من
- C#.net
- 1k بازدید
- 0 تشکر