قصد دارم که آموزش Responsive ( یا همون قابل پشتیانی توسط موبایل ها و تبلت ها ) نمودن سایت را بدهم. با ما همراه باشید
در ابتدا بهتر است کمی در مورد Responsive صحبت کنم .
قالب Responsive یعنی اینکه شما قالب طراحی کرده باشید که در موبایل ها و تبلت ها بدون اسکرول افقی باشد .
برای اینکه بتوانید یک قالب را با استفاده از jquery ، Responsive کنید کافیست که از یک پلاگین جی کوئری به نام isotope استفاده نمائید
این پلاگین jquery ، پلاگینی با قدرت و امکانات بسیار زیادی است و یکی از مهترین ویژگی های آن رایگان بودن آن است .
فقط یادتان باشد که برای استفاده از این پلاگین باید از نسخه های jQuery 1.4.3 به بالا استفاده کنید
در ابتدا باید دو فایل اسکریپی را به تگ head صفحه خود اضافه نمائید:
فرض کنید که شکل ساختاری کد شما بدین شکل است :
یعنی شما یک div اصلی دارید به نام container که دارای زیر div های می باشد که دارای کلاس element هستند .
حال تنها باید از کدی استفاده کنید که بتواند آنها را Responsive نماید :
برای فراخوانی کافیست از کد زیر استفاده نمائید :
در آخر باید بگم که معمولا برای Responsive کردن قالب ها از css و با استفاده از دستور زیر شکل می گیرد
با استفاده از دستور زیر می توانید چیدمان هر div را در سایز های مختلف تغییر دهید .
برای Responsive کردن قالب ها معمولا از سه دستور css زیر استفاده می شود :
- ۱) clear
- ۲) width
- ۳) float
پس از درج این کد مشاهده می کنید که Div که دارای کلاس container است به صورت Responsive خواهد شد.
