تَب

تب‌ها (tab) کشف و تعویض بین نما‌ها یا جنبه‌های عملکردی یک صفحه یا مرور مجموعه‌ای از داده‌های طبقه‌بندی شده را آسان می‌کند.

استفاده

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

نتیجه

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto.

Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris. Nam quibusdam, quos audio sapientes habitos in Graecia, placuisse opinor mirabilia quaedam (sed nihil est quod illi non persequantur argutiis): partim fugiendas esse nimias amicitias.

اچ‌تی‌ام‌ال

<div class="joqd tab">
  <ul class="joqd tab-links row grey-lighten-3">
    <li class="joqd desktop-2 laptop-3 tablet-3 mobile-6">
      <a href="farsi" class="joqd grey-darken-4-text thick-bottom-border pink-border active">فارسی</a>
    </li>
    <li class="joqd desktop-2 laptop-3 tablet-3 mobile-6">
      <a href="english" class="joqd grey-text grey-darken-3-text-hover thick-bottom-border grey-lighten-3-border">انگلیسی</a>
    </li>
    <li class="joqd desktop-2 laptop-3 tablet-3 mobile-6">
      <a href="french" class="joqd grey-text grey-darken-3-text-hover thick-bottom-border grey-lighten-3-border">فرانسوی</a>
    </li>
  </ul>

  <div class="joqd tab-contents row thin-border grey-lighten-3-border">
	<div id="farsi" class="joqd desktop-12 laptop-12 tablet-12 mobile-12 white active">
      <div class="joqd row grey-lighten-2-border">
        <!-- محتوای بخش فارسی -->
      </div>
    </div>
	<div id="english" class="joqd desktop-12 laptop-12 tablet-12 mobile-12 white active">
      <div class="joqd row grey-lighten-2-border">
        <!-- محتوای بخش انگلیسی -->
      </div>
    </div>
	<div id="french" class="joqd desktop-12 laptop-12 tablet-12 mobile-12 white active">
      <div class="joqd row grey-lighten-2-border">
        <!-- محتوای بخش فرانسوی -->
      </div>
    </div>
  </div>
</div>

جاواسکریپت

$('.tab').tab();

آپشن‌ها

برای تب‌ها آپشن‌های مختلفی وجود دارد.

توجه داشته باشید که ضمن مشخص کردن کلاس‌ آپشن‌ها، آن‌ها باید با کلاس‌های اولیه مشخص شده در اچ‌تی‌ام‌ال همخوانی داشته باشند.

آپشن	مقدار پیش‌فرض	توضیح
`duration`	`200`	به کمک این آپشن، می‌توان مدت زمان عوض شدن تب‌ها را مشخص کرد.
`normalClasses`	`grey-text grey-darken-3-text-hover`	به کمک این آپشن، می‌توان کلاس‌های عناوین تب را در حالت عادی مشخص کرد.
`activeClasses`	`grey-darken-4-text`	به کمک این آپشن، می‌توان کلاس‌های عناوین تب را در حالت فعال مشخص کرد.