آموزش ساخت منوی کشویی یا Dropdown در بوت استرپ

پلاگین Dropdown

پلاگین های بوت استرپ

با استفاده از پلاگین Dropdown ، ما می توانیم منوهای کشویی را به هر مؤلفه ایی مانند نوارهای ناوبری ،  tab ها ، pill ها و کلیدها اضافه کنیم.

اگر بخواهیم این پلاگین را به صورت جداگانه وارد کنیم ، در این صورت به فایل dropdown.js نیاز خواهیم داشت. در موارد دیگر ، همان طور که در فصل "مروری بر پلاگین های بوت استرپ" ذکر شد ، می توانیم از یکی از فایل های bootstrap.js یا bootstrap min.js.min.js استفاده نماییم.

نحوه استفاده

ما می توانیم محتوای پنهان پلاگین کشویی را به صورت زیر تغییر دهیم :

از طریق ویژگی های داده : مقدار "data-toggle=”dropdown”را به یک لینک و یا یک کلید اضافه می کنیم تا یک dropdown را همان طور که در مثال زیر نشان داده شده است ، تغییر دهیم :

<div class = "dropdown">
   <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>

• اگر نیازی به نگه داشتن لینک های سالم نداشته باشیم (این حالت در مواردی که مرورگر ، جاوا اسکریپت را فعال نکند ، مفید می باشد) ، ویژگی data-target را به جای "#"=href استفاده می کنیم :

<div class = "dropdown">
   <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
      Dropdown 
      <span class = "caret"></span>
   </a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>

• از طریق جاوا اسکریپت : برای فراخوانی dropdown toggle  با استفاده از جاوا اسکریپت ، از متد زیر استفاده می کنیم :

$('.dropdown-toggle').dropdown()

مثال

در داخل نوار نوابری

مثال زیر کاربرد منو کشویی درون یک نوار ناوبری (navbar) را نشان می دهد :

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class="caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

خروجی قطعه کد فوق به صورت زیر می باشد :

درون Tab ها

مثال زیر کاربرد منوی کشویی درون tab ها را نشان می دهد :

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

خروجی قطعه کد فوق به صورت زیر می باشد :

آپشن ها

این پلاگین هیچ آپشنی ندارد.

متدها

Dropdown toggle یک متد ساده برای نشان دادن یا مخفی کردن کشو دارد :

$().dropdown('toggle')

مثال

مثال زیر کاربرد متد پلاگین dropdown را نشان می دهد :

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>

   <div id = "myexample">
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>
            
            <ul class = "dropdown-menu">
               <li><a id = "action-1" href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
			
      </ul>
   </div>
   
</nav>

<script>
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
   }); 
</script>

خروجی قطعه کد فوق به صورت زیر می باشد :