نمایش آب و هوای شهر های ایران با جی کوئری

گروه : وب, وبلاگ | تگ ها : css, jQuery, آب و هوا, جي كوئري, سي اس اس, وب, پلاگين| تاريخ انتشار : ۸۹٫۰۲٫۹

به گمونم امروزه اکثر طراح های وب اسم جی کوئری ( jQuery ) به گوششون خورده. خوب اگه اطلاعاتی در مورد این کتابخونه جاوا اسکریپت ندارید میتونید از اینجا اطلاعاتی درموردش به دست بیارید.
امروز قصد دارم پلاگینی از جی کوئری بهتون معرفی کنم که شاید به درد اکثر طراح های وب بخوره. توسط این پلاگین شما میتونین آب و هوای تمامی شهر های جهان و از جمله ایران رو توسط سایت yahoo weather روی سایتتون مثل آب خوردن با گرافیک زیبایی نشون بدین. میتونین اینجا دمویی از این پلاگین رو ببینین ( و اگه علاقه داشتین الباقی آموزش رو بخونین ) .
امکاناتی  که این پلاگین داره عبارت است از :
۱-    تعریف یک یا چند مکان
۲-    انتخاب تصویر پس زمینه برای حالت نمایش وضعیت هوا
۳-    تفکیک نمایش عکس های روز و شب
۴-    توصیف درجه حرارت ، سرعت باد و بالاترین و کم ترین درجه در آن روز به صورت لحظه ای
۵-    لینک پیش بینی آینده آب و هوا در چند روز آینده به سایت yahoo weather
6-    کد ها تماما به صورت html و css هستند.
خوب کمی توضیح در مورد کد این پلاگین خدمتتون میگم، و نمونه ای که خودم طراحی کردم رو برای دانلود میزارم که بتونین راحت ازش استفاده کنین.
در ابتدا لازم هستش که فایل های js زیر رو به صفحه بچسبونیم:

 <script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.zweatherfeed.js" type="text/javascript"></script>

سپس شما یک تگ div، با نام آی دی test  به صفحتون اضافه میکنین .

<div id="test"><div>

اما قبل از افزودن تگ div لازم هستش که این اسکریپت کوچیکو توی صفحتون بزارین :

<script type="text/javascript">

$(document).ready(function () {
$('#test').weatherfeed(['IRXX0008','IRXX0018','IRXX0003','IRXX0015','IRXX0024','IRXX0048']);
});
</script>

کد نویسی شما دیگه تموم شد. ولی چه جوری میتونین آب و هوای شهر مورد علاقتون رو توی صفحه نشون بدین ؟
yahoo weather برای هر شهر یک آی دی در نظر میگیره . در واقع با استفاده از این آی دی میتونه آب و هوای اون شهر رو در Rss فراخوانی کنه. به عنوان مثال برای شهر مشهد آی دی IRXX0008 رو در نظر گرفته و این آدرس Rss رو براش در نظر میگیره. حالا شما لازمه این آی دی رو به دست بیارین و با جایگزینی در آی دی های بالا، آب و هوای شهر مورد علاقتون رو  ببینین. اگه خواسته باشم به صورت کلی بگم، این پلاگین، آب و هوا رو از روی Rss میگره و خروجی شو برای شما روی صفحه نشون میده.

مطلب آخری که باید در مورد این پلاگین بگم، تنظیماتی هستش که میتونین به صورت دستی برای نحوه نمایش آب و هوا انجام بدین. به آرایه زیر که در فایل jquery.zweatherfeed.js  هستش، دقت کنین.

// Set pluign defaults
var defaults = {
unit: 'c',
image: true,
highlow: true,
wind: true,
link: false,
showerror: true
};

شما در اندیس unit میتونین سانتی گراد یا فارنهایت بودن دما رو نشون بدین. برای سانتیگراد کاراکتر C و برای فارنهایت بودن دما کاراکتر F رو بزارین. اندیس image برای نمایش تصویر وضعیت هوا هستش. اگه دوست دارین تصویر نشون داده نشه میتونین اون رو False تعریف کنین. اندیس highlow بالاترین و پایین تر دما رو تعریف میکنه. اندیس wind هم سرعت وزش باد رو تعریف میکنه. اندیس لینک هم، وظیفش نمایش لینکی هستش که شما رو به پیش بینی وضعیت آب و هوا در چند روز آینده در سایت  yahoo weather میفرسته. اندیس showerror هم خطایی رو مبنی بر این که قادر نیست آب و هوا رو به شما نشون بده به کاربر نشون میده.

نکته : وقتی به صفحه آب و هوای شهری، در yahoo weather میرین، لینک rssی  رو میبینین که باید آی دی مورد نظر رو از اونجا به دست بیارین. و در ضمن ماکسیمم نمایش شهر با استفاده از این پلاگین ۱۰ تا هستش.

میتونین نمونه ای رو که طراحی کردم، از اینجا دانلود کنین.