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

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۱۱ فروردین ۱۳۹۲

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

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

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

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

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

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

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

<script src="http://isotope.metafizzy.co/js/jquery-1.7.1.min.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>

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

<div>

<p class="number">1</p>

<h3 class="symbol">H</h3>

<h2 class="name">Hydrogen</h2>

<p class="weight">1.00794</p>

</div>

<div>

<p class="number">2</p>

<h3 class="symbol">He</h3>

<h2 class="name">Helium</h2>

<p class="weight">4.002602</p>

</div>

<div>

<p class="number">3</p>

<h3 class="symbol">Li</h3>

<h2 class="name">Lithium</h2>

<p class="weight">6.941</p>

</div>

<div>

<p class="number">4</p>

<h3 class="symbol">Be</h3>

<h2 class="name">Beryllium</h2>

<p class="weight">9.012182</p>

</div>

<div>

<p class="number">5</p>

<h3 class="symbol">B</h3>

<h2 class="name">Boron</h2>

<p class="weight">10.811</p>

</div>

<div>

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

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

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

<script>
$(function(){

var $container = $('#container');

$container.isotope({
itemSelector: '.element'
});

});
</script>

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

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

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

کلیک کنید

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

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

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

کلیک کنید

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

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

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

چه امتیازی به این مقاله می دید؟
نویسنده میلاد حیدری
19 ساله، ساکن تهران و دانشجوی مهندسی کامپیوتر ؛طراح وب سایت ، سئو کار با سابقه کاری ، مطالعه بسیار زیاد در امر سئو و برندینگ اینترنتی و آشنایی با زبان های همچون PHP,JavaScript,html5,CSS3, Jquery ، با زبان انگلیسی آشنایی کامل دارم و شدیدا طرفدار استقلال و فرهاد مجیدی هستم.

نظرات کاربران

طراحی سایت

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

جواد احمدی مقدم

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

وحید صالحی

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

mohammad

بعد من از جوملا استفاده میکنم کدهای indexهم به شکل زیر است

google+

Facebook

LinkedIn

RSS

Twitter

mohammad

سلام اول مرسی بابت آموزش های خوبی که میزاری
دوم این که بعد از ایمپورت کردن های فایلها
دایو اصلی من main هستش همه او containerها را به main تغیر بدم درسته؟

numberokta

سلام
میشه بگین چطور میشه div هارو راست چین نمایش داد. چون وقتی می خوام مطالب رو Responsive کنم به صورت چپ چین نمایش میده.

کیوان علی محمدی

شاید توی تنظیمات و option های خود پلاگین وجود داشته باشه،می تونید از float استفاده کنید،مقدارش رو right بذارید.

لاريسا

سلام داداشي خوبي اسم من باريساس من يه وب موزيك دارم ميخواستم بياي هم نظر بدي و هم اگه خواستي با هم تبادل بنر كنيم اگه موافقي بيا به سايت من سر بزن و بگو تا با هم تبادل بنر كنيم منتظرم عزيزم مرسييي 😳 😳 😳 😳

حسن سعادتي

سلام.
ممنون خيلي خوب بود.
ممنون مي شم اگر رسپانسيو كردن رو فقط با css هم اموزش بديد

faizan110

آيا در قالب جوملا 2.5 هم امکان استفاده از اين پلاگين دارد ؟ و به صورت ؟

میلاد حیدری

سلام
بله شما به راحتی در هر cms میتوانید این کار را انجام دهید حتی در میهن بلاگ چه برسد به جوملا !

فقط کافیست کد js رو در head سایت خودتون فراخونی کنید و از کد script مورد نظر استفاده نموده تا div مورد نظر خودتون رو Responsive کنید.

faizan110

لطفا براي درج اين کد در جوملا راهنمائي کنيد که آيا اين کد را در فائل انديکس اصلي اضافه کنيم يا در صفحه قالب و به چه صورت؟

ghalamyaz

سلام
من فقط یه خورده گیج شدم من از بلاگفا استفاده می کنم و با استفاده از این کد چه اتفاقی توی قالب من می افته؟ یعنی در نمونه ای که به عنوان دمو گذاشتید آرشیو و پست ها و موضوعات و لینک دوستان و… کجا قرار می گیره؟
دامنه متصل به وبلاگ من در بلاگفا اینه:
www.dargaz-news.info

Alireza crs

ممنون میلاد.اون سری های آموزشی که باحال بود.میشه سری آموزش جی کوءری رو شروع کنی یا حداقل همینجا یه منبع باحال بهم معرفی کنی؟

میلاد حیدری

سلام

برای آموزش مقدماتی من ویدئوهای سایت P30SAZAN.COM رو پیشنهاد میکنم … در ضمن W3C هم هست .

fajr highschool

خیلی مطلب جالبیه!
اما شیوه استفادشو یه کم نفهمیدم!
یعنی من الان کد زیر:

<script src="../js/jquery-1.9.1.min.js“>

<script src="../jquery.isotope.min.js“>

رو در قالب بذارم حله یا چیز دیگه!

میلاد حیدری

سلام ممنون

بله شما زمانی که فایل اسکریپت ISOPTOP و JQUERY رو به سایت خودتون IMPORT کنید ، پس از آن می توانید از تابع های ISOPTOP استفاده کنید .

وحید

سلام
ممنون میلاد جان کاربردی بود…

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :