آموزش foundation-برابر کننده
برابر کننده ی ارتفاع در فریم ورک foundation
با استفاده از برابر کننده، می توانید محتوایی را با ارتفاع برابر، ایجاد کنید:
برای ایجاد یک ظرف(container) با ارتفاع برابر، خصوصیت data-equalizer را به عنصر ظرف(container) اضافه کنید و سپس خصوصیت data-equalizer-watch را به هر عنصر فرزندی که باید دارای ارتفاع برابر باشد اضافه کنید. بلند ترین عنصر، ارتفاع دیگر عناصر را تعیین می کند.
نکته: به خاطر داشته باشید که فایل جاوااسکریپت foundation را مقدار دهی اولیه کنید:
مثال
<div class="medium-4 columns panel" data-equalizer-watch>
Lorem ipsum...
</div>
<div class="medium-4 columns panel" data-equalizer-watch>
Sed ut...
</div>
<div class="medium-4 columns panel" data-equalizer-watch>
Lorem ipsum...
</div>
</div>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
استفاده از برابر کننده ها برای صفحه های نمایش مختلف
برای اینکه مشخص کنید که برابر کننده، چه زمانی باید یک ظرف(container) با ارتفاع برابر را برای اندازه های مختلف صفحه ی نمایش ایجاد کند، خصوصیت "data-equalizer-mq="value را اضافه کنید. به جای مقدار value در خصوصیت ذکر شده، یکی از مقادیر زیر را قرار دهید:
| مقدار | توضیحات | مثال |
|---|---|---|
medium-up |
پیش فرض. برای صفحه های نمایش پهن تر از 40.063em یک ظرف با ارتفاع برابر را ایجاد می کند. |
|
large-up |
برای صفحه های نمایش پهن تر از 64.063em یک ظرف با ارتفاع برابر را ایجاد می کند. |
امتحان کنید |
xlarge-up |
برای صفحه های نمایش پهن تر از 90.063em یک ظرف با ارتفاع برابر را ایجاد می کند. |
امتحان کنید |
xxlarge-up |
برای صفحه های نمایش پهن تر 120.063em یک ظرف با ارتفاع برابر را ایجاد می کند. |
امتحان کنید |
مثال
<div class="row" data-equalizer data-equalizer-mq="xlarge-up">
..
</div>
محتوای تو در تو
برای اینکه برابر کننده ها به یکدیگر متصل شوند، کافیست مقدار خصوصیت data-equalizer و data-equalizer-watch را با با یکدیگر برابر قرار دهید. برای اینکه برابر کننده های تو در تو ایجاد کنید، کافی است این کار را چندین بار انجام دهید- فقط توجه کنید که مقدار آنها با یکدیگر برابر قرار گیرد:
مثال
<div class="row" data-equalizer="first">
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="first">
<h3>Panel</h3>
<!-- An Equalized Container Inside The Equalized Container -->
<div class="row" data-equalizer="second">
<div class="panel" data-equalizer-watch="second">
<h3>Nested Panel</h3>
<p>Lorem ipsum...</p>
</div>
<div class="panel" data-equalizer-watch="second">
<h3>Nested Panel</h3>
<p>Lorem ipsum...</p>
</div>
<div class="panel" data-equalizer-watch="second">
<h3>Nested Panel</h3>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- End Nested Equalized Container -->
</div>
</div>
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="first">
<h3>Panel</h3>
<p>Ut enim...</p>
</div>
</div>
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="first">
<h3>Panel</h3>
<p>Lorem ipsum....</p>
</div>
</div>
</div>
- نوشته شده توسط احسان عباسی
- بازدید: 3311
