Responsive کردن قالب با استفاده از Jquery

- visibility ۱۸ mode_comment

دوستان سلام . پس از مدت ها برگشتم و با آموزشی بسیار کاربردی در خدمتتون هستم . در این مقاله آموزشی – عملیاتی قصد دارم که آموزش Responsive ( یا همون قابل پشتیانی توسط موبایل ها و تبلت ها ) نمودن سایت را بدهم. با ما همراه باشید

در ابتدا بهتر است کمی در مورد Responsive صحبت کنم .

قالب Responsive یعنی اینکه شما قالب طراحی کرده باشید که در موبایل ها و تبلت ها بدون اسکرول افقی باشد . بهتر است به جای اینکه توضیح اضافی بدهم ، توضیح قالب Responsive را در دو عکس به شما نمایش بدهم :

 برای اینکه بتوانید یک قالب را با استفاده از jquery ، Responsive کنید کافیست که از یک پلاگین جی کوئری به نام isotope استفاده نمائید

این پلاگین jquery ، پلاگینی با قدرت و امکانات بسیار زیادی است و یکی از مهترین ویژگی های آن رایگان بودن آن است .

فقط یادتان باشد که برای استفاده از این پلاگین باید از نسخه های jQuery 1.4.3 به بالا استفاده کنید

در ابتدا باید دو فایل اسکریپی را به تگ head صفحه خود اضافه نمائید:

فرض کنید که شکل ساختاری کد شما بدین شکل است :

یعنی شما یک div اصلی دارید به نام container که دارای زیر div های می باشد که دارای کلاس element هستند .

حال تنها باید از کدی استفاده کنید که بتواند آنها را Responsive نماید :

برای فراخوانی کافیست از کد زیر استفاده نمائید :

پس از درج این کد مشاهده می کنید که Div که دارای کلاس container است  به صورت Responsive خواهد شد.

در ضمن شما با استفاده از تابع animate و همچنین css3 افکت های زیبائی برای تغییرات آن بدهید.

برای مشاهده یک نمونه استفاده از این پلاگین به لینک زیر مراجعه نمائید :

کلیک کنید

و همچنین برای دانلود این پلاگین از لینک زیر استفاده نمائید :

دانلود پلاگین

برای مشاهده سایت این پلاگین و راهنمایی های بیشتر :

کلیک کنید

در آخر باید بگم که معمولا برای Responsive کردن قالب ها از css و با استفاده از دستور زیر شکل می گیرد با استفاده از دستور زیر می توانید چیدمان هر div را در سایز های مختلف تغییر دهید . برای Responsive کردن قالب ها معمولا از سه دستور css زیر استفاده می شود :

  • 1) clear
  • 2) width
  • 3) float

اگر در آینده وقتی بود حتما آموزش قالب Responsive را خواهیم داد.

comment دیدگاه کاربران
جواد احمدی مقدم

سلام
در بلاگفا چطور باید استفاده نمود
در کد دومی به جای containerو element باید چه ایدی یا کلسی گذاشت
تشکر از شما

وحید صالحی

کلاس و آیدی توی قالبت رو باید به اینها تغییر بدی…

طراحی سایت

خیلی پلاگین خوبیه . مرسی

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2