تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (0)

تبلیغات

آموزش foundation-پیش ساخته ها

پیش ساخته ها

پیش ساخته ها زمانی کاربرد دارند که شما بخواهید با یک کلیک بر روی یک دکمه، محتوایی را نمایش دهید یا محو کنید:

مثال

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#demo">Simple Collapsible</a>
    <div id="demo" class="content">
      Lorem ipsum dolor sit amet....
    </div>
  </li>
</ul>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

نتیجه:

خودتان امتحان کنید »

توضیح مثال بالا

کلاس accordion. و خصوصیت data-accordion یک عنصر پیش ساخته را مشخص می کنند. کلاس accordion-navigation. عنصر پیش ساخته را استایل دهی می کند. محتوای اصلی که قرار است با کلیک بر روی دکمه، نمایش یابد یا محو شود، به وسیله ی کلاس content. مشخص می شود(<"div class="content>). 

برای کنترل کردن(نمایش دادن یا محو کردن) محتوای پیش ساخته، یک عنصر <a> را درون آیتم لیست قرار دهید. حالا لنگرگاه(anchor) را به محتوای پیش ساخته با استفاده از یک آی دی مشابه، متصل کنید(عنصر "a href="#demo> به "div id="demo> متصل می شود).

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

به طور پیش فرض، محتوای پیش ساخته، مخفی می باشد. برای اینکه محتوای ما به طور پیش فرض، نمایش یابد، کاس active. را به عنصر <div> اضافه کنید:

مثال

<div id="demo" class="content active">

نتیجه:

خودتان امتحان کنید »

آکاردئون

آکاردئون ها عناصری هستند که از آنها برای باز و بسته کردن محتوا استفاده می شود. 

برای ایجاد یک آکاردئون، چند آیتم لیست را اضافه کنید و در داخل این آیتم ها عناصر <a> را قرار دهید، به طوری که مقدار href از هر عنصر <a> برابر با آی دی عنصر <div> قرار گیرد:

مثال

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#demo">Accordion 1</a>
    <div id="demo" class="content active">
      Demo 1 - Lorem ipsum dolor sit amet....
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#demo2">Accordion 2</a>
    <div id="demo2" class="content">
      Demo 2 - Lorem ipsum dolor sit amet....
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#demo3">Accordion 3</a>
    <div id="demo3" class="content">
      Demo 3 - Lorem ipsum dolor sit amet....
    </div>
  </li>
</ul>

نتیجه:

خودتان امتحان کنید »

به طور پیش فرض، تنها یکی از آیتم های آکاردئون می توانند باز باشند. اگر که می خواهید قابلیت باز شدن تمامی آیتم ها را داشته باشید، بدون اینکه دیگر آیتم ها بسته شوند، کافیست خصوصیت ";data-options="multi_expand:true را اضافه نمایید:

مثال

<ul class="accordion" data-accordion data-options="multi_expand:true;">
  ..
</ul>

نتیجه:

خودتان امتحان کنید »

دیدگاه‌ها  

+1 # mahdi kalhor 1395-02-06 17:36
لطفا درست شد اطلاع بدین میخوام این موضوع ها رو رو مطالعه کنم نمیتونم....همش خرابه|:
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # mahdi kalhor 1395-02-06 17:35
مثالهای این موضوع هم عمگی درست کار نمیکنند
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-02-06 18:07
دوست گرامی همه ی مثال ها تست شده و به درستی کار می کنند. لطفا دقت کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی