آموزش پلاگین Dropdown در بوت استرپ

4 سال پیش

امتیاز دهید post

آموزش پلاگین Dropdown در بوت استرپ

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش پلاگین Dropdown در بوت استرپ خواهیم پرداخت.

با استفاده از پلاگین Dropdown می توانید منوهای کشویی را به هر مولفه دیگری مانند نوارهای navbar، تب ها، قرص ها و دکمه ها اضافه کنید.

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

موارد استفاده

می توانید محتوای پنهان پلاگین کشویی را تغییر دهید –

از طریق ویژگی های Via data attributes − Add data-toggle = “dropdown”به یک پیوند یا دکمه برای تغییر حالت کشویی استفاده کرد، مانند تصویر زیر –

&lt;div class = "dropdown"&gt;
   &lt;a data-toggle = "dropdown" href = "#"&gt;Dropdown trigger&lt;/a&gt;
   
   &lt;ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel"&gt;
      ...
   &lt;/ul&gt;
    
&lt;/div&gt;

<a data-toggle = "dropdown" href = "#">Dropdown trigger</a>

...

</ul>

</div>

اگر می خواهید لینک ها را دست نخورده نگه دارید (که اگر مرورگر JavaScript را فعال نمی کند مفید است) ، به جای href = “#” از ویژگی data-target استفاده کنید –

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

Dropdown

</a>

...

</ul>

</div>

برای فراخوانی منوی کشویی از طریق جاوا اسکریپت، از روش زیر استفاده کنید –

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

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

مثال

درون Navbar

مثال زیر استفاده از منوی کشویی را در یک نوار نشان می دهد –

&lt;nav class = "navbar navbar-default" role = "navigation"&gt;

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

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

<div>

Java

</a>

<li><a href = "#">jmeter</a></li>

<li><a href = "#">Jasper Report</a></li>

<li><a href = "#">Separated link</a></li>

<li><a href = "#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

درون تب ها

مثال زیر استفاده از منوی کشویی درون برگه ها را نشان می دهد –

&lt;p&gt;Tabs With Dropdown Example&lt;/p&gt;

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

<p>Tabs With Dropdown Example</p>

Java

</a>

<li><a href = "#">Swing</a></li>

<li><a href = "#">jMeter</a></li>

<li><a href = "#">Separated link</a></li>

</ul>

</li>

</ul>

گزینه ها

هیچ گزینه ای وجود ندارد

متد ها

&lt;nav class = "navbar navbar-default" role = "navigation"&gt;
   &lt;div class = "navbar-header"&gt;
      &lt;a class = "navbar-brand" href = "#"&gt;TutorialsPoint&lt;/a&gt;
   &lt;/div&gt;

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

&lt;script&gt;
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
   }); 
&lt;/script&gt;

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

<li><a id = "action-1" href = "#">jmeter</a></li>

<li><a href = "#">Jasper Report</a></li>

<li><a href = "#">Separated link</a></li>

<li><a href = "#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

$(function(){

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

});

</script>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش پلاگین Dropdown در بوت استرپ

آموزش پلاگین Dropdown در بوت استرپ

موارد استفاده

مثال

درون Navbar

درون تب ها

گزینه ها

متد ها

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

آموزش پلاگین Dropdown در بوت استرپ

موارد استفاده

مثال

درون Navbar

درون تب ها

گزینه ها

متد ها

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه