واکنش گرایی

کاری که انجام شده ...

قالب از پایه به نحوی طراحی شده که تا حدامکان واکنش گرا باشد. قالب عناصر مختلف رابط کاربری را حرکت داده، فرمت کرده، حذف کرده و به هر شکل آنها را با فضای در دسترس هماهنگ میکند و قالب بندی های زیر را به صورت درون ساخت ارائه میدهد :

بیشتر عناصر متحرک هستند تا بتوانند در سایز های مختلف جا بگیرند، شما میتوانید با کلاس های واکنش گرای ستون ها نحوه ی نمایش آنها را دقیقا در دست گرفته و کنترل کنید.

... و چگونه کنترلشان کنید

قالب خودش تمامی کارهای پایه ای یک طراحی واکنش گرا را انجام میدهد اما گاهی اسکریپت شما نیاز دارد بداند که در چه مدی در حال اجراست، قالب چندین ابزار برای این کار ارائه میدهد :

دریافت حالت فعلی

در هر زمان شما میتوانید نام حالت فعلی را دریافت کنید :

if ($.template.mediaQuery.name === 'desktop')
{
	// Do something only for widescreens
}

میخواهید بدانید که آیا کوئری چند رسانه ای فعلی کوچکتر از آنی است که ارائه شده؟

if ($.template.mediaQuery.isSmallerThan('tablet-portrait'))
{
	// Do something only for smaller screens
}

Also available: has() to check if a given media query is on.

گوش دادن برای تغییرات

دانستن حالت فعلی عالی است، اما چیزی که بهتر است این است که تغییرات حالت واکنش گرا دنبال شود. چندین واقعه در این شرایط فعال میشوند که میتوانند به اسکریپت شما کمک کنند :

init-queries
This event is fired at startup once the media queries tracking mode has started
change-query
This event will be fired for every mode change
enter-query-[name]
This event fire when entering the corresponding mode
quit-query-[name]
This event fire when leaving the corresponding mode

توجه داشته باشید که شما میتوانید به وقایع مربوط به یک گروه کوئری چند رسانه ای گوش کنید، به عنوان مثال : mobile-portrait و mobile-landscape به گروه mobile تعلق دارند, بنابراین شما میتوانید آنها را با استفاده از enter-query-mobile و quit-query-mobile دنبال کنید. توجه داشته باشید که این وقایع تنها در زمان تغییر گروه اتفاق می افتند و نه در زمانی که بین زیر دسته های یک گروه حرکت میکنید.

میخواهید امتحان کنید؟ اندازه پنجره را تغییر دهید و وقایع فعال شده را در زیر تماشا کنید :