Bootstrap menu rozwijane (rozwijane) widget
Bootstrap rozwijanego menu W tym rozdziale opisano menu rozwijane, ale nie związane z częścią interakcji, rozdział ten będzie szczegółowo wyjaśnić interakcję z menu rozwijanego. Użyj menu rozwijanego (rozwijane) plug-in, można dodać do menu rozwijanego, aby którykolwiek ze składników (takich jak pasku nawigacyjnym, zakładek, kapsułki, menu nawigacyjnych, przycisków itp).
Jeśli chcesz zapoznać się z poszczególnymi funkcjami typu plug-in, trzeba odwołaćdropdown.js.Albo, jak Bootstrap Przegląd wtyczki rozdziale wspomniano, można zwrócić się dobootstrap.jslub skompresowanej wersjibootstrap.min.js.
zwyczaj
Można przełączać menu rozwijane Ukryj rozwijaną (plug-in):
- Poprzez dane atrybuty: link lub przycisk, aby dodać dane-przełączanie = "listy rozwijanej"rozwijanego menu, aby przełączyć się w następujący sposób:
<Div class = "listy rozwijanej">
<a data-toggle="dropdown" menu rozwijane href="#"> (rozwijane) </a> wyzwalania
<Class Ul = "rozwijana-Menu" role = "menu" aria-labelledby = "dlabel">
...
</ Ul>
</ Div>
Jeśli trzeba zachować link nienaruszone (przydatne, gdy przeglądarka nie obsługuje JavaScript), należy użyć atrybutudanych docelowej zamiast href = "#":
<Div class = "listy rozwijanej">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Rozwijanego menu (rozwijane) <span class = "daszka"> </ span>
</a>
<Class Ul = "rozwijana-Menu" role = "menu" aria-labelledby = "dlabel">
...
</ Ul>
</ Div>
- Przez JavaScript: JavaScript poprzez wywołanie menu rozwijane, aby przełączyć, należy stosować następujące metody:
$ ( '. Rozwijane-przełącznik "). Rozwijane ()
Przykłady
W pasku nawigacyjnym
Poniższy przykład demonstruje użycie menu rozwijanym paska nawigacji:
Przykłady
<Nav class = "navbar navbar-default" role = "nawigacji">
<div class = "pojemnik płynu">
<div class = "navbar-header">
<a class = "navbar marki" href = "#"> Tutorial </ a>
</ Div>
<Div>
<ul class = "nav navbar-nav" >
<Li class = "aktywny"> <a href = "#"> iOS < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "listy rozwijanej">
<a href = "#" class = "rozwijana-przełącznik" Dane-przełączania = "listy rozwijanej"> Java <b class = "daszka"> </ b>
</ A>
<ul class = "rozwijana-Menu">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Jasper Zgłoś </ a> </ li>
<Li class = "rozdzielacz"> </ li>
<Li> <a href = "#"> pojedyncze ogniwo </ a> </ li>
<Li class = "rozdzielacz"> </ li>
<Li> <a href = "#"> kolejny izolowane łącza </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
Wyniki przedstawiają się następująco:
W karcie wewnątrz
Poniższy przykład demonstruje użycie zakładki w menu rozwijanego:
Przykłady
<P> tag z rozwijanego menu strony </ p>
<ul class = "nav nav-tabs" >
<Li class = "aktywny">
<a href = "#"> Start < / a> </ li>
<Li>
<a href = "#"> SVN < / a> </ li>
<Li>
<a href = "#"> iOS < / a> </ li>
<Li>
<a href = "#"> VB.Net < / a> </ li>
<Li class = "listy rozwijanej">
<a class = "rozwijana-przełącznik" Dane-przełączania = "listy rozwijanej" href = "#"> Java < rozpiętość class = "daszka"> </ span> </ a>
<ul class = "rozwijana-Menu">
<Li>
<a href = "#"> Swing < / a> </ li>
<Li>
<a href = "#"> jmeter < / a> </ li>
<Li>
<a href = "#"> EJB < / a> </ li>
<Li class = "rozdzielacz"> </ li>
<Li>
<a href = "#"> pojedyncze ogniwo </ a> </ li>
</ Ul>
</ Li>
<Li>
<a href = "#"> PHP < / a> </ li>
</ Ul>
Wyniki przedstawiają się następująco:
Opcje
Nie ma opcji.
sposób
Rozwijane menu można przełączyć istnieje prosty sposób, aby wyświetlić lub ukryć menu rozwijane.
$ (). Rozwijane ( "przełącznik")
Przykłady
Poniższy przykład pokazuje menu rozwijanego (rozwijane) Metoda plug-in:
Przykłady
<Nav class = "navbar navbar-default" role = "nawigacji">
<div class = "pojemnik płynu">
<div class = "navbar-header">
<a class = "navbar marki" href = "#"> W3Cschool < / a>
</ Div>
<div id = "myExample">
<ul class = "nav navbar-nav" >
<Li class = "aktywny">
<a href = "#"> iOS < / a>
</ Li>
<Li>
<a href = "#"> SVN < / a>
</ Li>
<Li class = "listy rozwijanej">
<a href = "#" class = "rozwijana-przełącznik" Dane-przełączania = "listy rozwijanej"> Java <b class = "daszka"> </ b>
</ A>
<ul class = "rozwijana-Menu">
<Li>
<a id = "action-1" href = "#"> jmeter < / a>
</ Li>
<Li>
<a href = "#"> EJB < / a>
</ Li>
<Li>
<a href = "#"> Jasper Zgłoś </ a>
</ Li>
<Li class = "rozdzielacz"> </ li>
<Li>
<a href = "#"> pojedyncze ogniwo </ a>
</ Li>
<Li class = "rozdzielacz"> </ li>
<Li>
<a href = "#"> kolejny izolowane łącza </ a>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
</ Div>
<Script> $ (function () {$ ( "rozwijana-przełączający.") Rozwijane ( "przełącznik") ;.}); </ script>
Wyniki przedstawiają się następująco:
