سبد (0)

تبلیغات

آموزش foundation-برابر کننده

برابر کننده ی ارتفاع در فریم ورک foundation

با استفاده از برابر کننده، می توانید محتوایی را با ارتفاع برابر، ایجاد کنید:

برای ایجاد یک ظرف(container) با ارتفاع برابر، خصوصیت data-equalizer را به عنصر ظرف(container) اضافه کنید و سپس خصوصیت data-equalizer-watch را به هر عنصر فرزندی که باید دارای ارتفاع برابر باشد اضافه کنید. بلند ترین عنصر، ارتفاع دیگر عناصر را تعیین می کند. 

نکته: به خاطر داشته باشید که فایل جاوااسکریپت foundation را مقدار دهی اولیه کنید:

مثال

<div class="row" data-equalizer>
  <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 یک ظرف با ارتفاع برابر را ایجاد می کند. 

امتحان کنید

مثال

<!-- Create an equal height container for screens wider than 90.063em -->
<div class="row" data-equalizer data-equalizer-mq="xlarge-up">
  ..
</div>
خودتان امتحان کنید »

محتوای تو در تو

برای اینکه برابر کننده ها به یکدیگر متصل شوند، کافیست مقدار خصوصیت data-equalizer و data-equalizer-watch را با با یکدیگر برابر قرار دهید. برای اینکه برابر کننده های تو در تو ایجاد کنید، کافی است این کار را چندین بار انجام دهید- فقط توجه کنید که مقدار آنها با یکدیگر برابر قرار گیرد:

مثال

<!-- The Equalized Container -->
<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>
خودتان امتحان کنید »
 
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی