آکادمی کدنویسان با هدف برگزاری آموزش های آنلاین راه اندازی شد. با ثبت نام در دوره های پیش رو، تابستان پرباری داشته باشید

جلسه سیزدهم- ساخت منوهای جمع شدنی (collapsible) در متریالایز

طراحی واکنش گرا با متریالایز

نام کلاس توضیحات
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>

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

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

برچسب ها

, , , , ,

محصولات پیشنهادی


نظرات کاربران


نظرات برای آموزش چارچوب متریالایز | بدون نظر »

کاربر عزیز، لطفاً دیدگاه ارزشمند خود را از طریق فرم زیر برای ما ارسال کنید:

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


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.