وباکا

آموزش تخصصی برنامه نویسی وب

نام کلاس توضیحات
collapsible هنگامی که می خواهیم یک منو تاشو ایجاد کنیم این کلاس برای تگ <ul> مورد استفاده می شود.
collapsible-header این کلاس یک div را به عنوان هدر قرار می دهد.
collapsible-body یک div را به عنوان body (بدنه) منوتاشو قرار می دهد.
popout یک منوی تاشو ایجاد می کند.
active یک بخش از منو را باز می کند.
expandable شیء جمع شدنی را قابل بسط می کند
accordion شیء جمع شدنی را بصورت  accordion تبدیل می کند

مثال زیر را ببینید:

<html>
   <head>
      <title>The Materialize Collapsible Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">      
	  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container"> 
      <h4>Simple Accordion</h4>
      <ul class="collapsible" data-collapsible="accordion">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
            <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
            <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
            <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      <h4>Popout Accordion</h4>
      <ul class="collapsible popout" data-collapsible="accordion">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
            <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
            <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
            <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      <h4>Accordion with Preselected Section</h4>
      <ul class="collapsible" data-collapsible="accordion">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
            <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header active"><i class="material-icons">place</i>Second Section</div>
            <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
            <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>	  	 
      <h4>Expandables</h4>
      <ul class="collapsible" data-collapsible="expandable">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
            <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
            <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
            <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>	  		  
   </body>  
</html>

 خروجی بصورت زیر خواهد بود

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

مطالب مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فهرست مطالب