Stworzyłem JSFiddle z rozwijanym navbarem za pomocą modułu kątowego-ui-boostrap "ui.bootstrap.dropdownToggle": http://jsfiddle.net/mhu23/2pmz5/
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"> <a class="brand" href="#">
My Responsive NavBar
</a>
<ul class="nav">
<li class="divider-vertical"></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle">
Menu 1 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#/list">Entry 1</a>
</li>
<li><a href="#/list">Entry 2</a>
</li>
</ul>
</li>
....
</ul>
</div>
</div>
</div>
O ile rozumiem, jest to właściwy, kanciasty sposób na wdrożenie takiego rozwijanego menu. "Zły" sposób, pod względem angularjs, miałby obejmować bootstrap.js i użycie "data-toggle =" dropdown "... Czy jestem tutaj?
Teraz chciałbym dodać responsywne zachowanie do mojego navbara, jak to zrobiono w następującym Fiddle:
http://jsfiddle.net/ghtC9/6/
ALE, jest coś, czego nie lubię w powyższym rozwiązaniu. Ten facet zawierał bootstrap.js!
Jaki byłby odpowiedni kątowy sposób dodawania responsywnego zachowania do mojego istniejącego paska nawigacyjnego?
Oczywiście potrzebuję użyć responsywnych klas navbarów takich jak "nav-collapse collapse navbar-responsive-collapse". Ale nie wiem jak ...
Byłbym wdzięczny za twoją pomoc!
Z góry dziękuję!
Michał
Możesz to zrobić za pomocą dyrektywy "zwijanie": http://jsfiddle.net/iscrow/Es4L3/
(sprawdź dwie "Uwaga" w HTML).
<!-- Note: set the initial collapsed state and change it when clicking -->
<a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
<div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
Oznacza to, że musisz zapisać stan zwinięty w zmiennej i zmienić zwinięty również przez (po prostu) zmianę wartości tej zmiennej.
Wersja 0.14 dodano a uib- przedrostek do komponentów:
https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes
Zmiana: collapse do uib-collapse.
Zaktualizuj 2015-06
Oparte na antoinepairet's comment / example:
Za pomocą uib-collapse atrybut zapewnia animacje: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- note the ng-init and ng-click here: -->
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<ul class="nav navbar-nav">
...
</ul>
</div>
</nav>
Starożytny..
Widzę, że pytanie jest sformułowane wokół BS2, ale pomyślałem, że wpadnę na rozwiązanie dla Bootstrap 3, używając rozwiązania klasy ng opartego na sugestiach ui.bootstrap problem 394:
Jedyna zmiana od oficjalny przykład bootstrapu jest dodanie ng- atrybuty odnotowane przez komentarze poniżej:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- note the ng-init and ng-click here: -->
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- note the ng-class here -->
<div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">
<ul class="nav navbar-nav">
...
Oto zaktualizowany przykład roboczy: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (wskazówka kapeluszowa Lars)
Wydaje się, że działa to dla mnie w prostych przypadkach, ale zauważysz w przykładzie, że drugie menu jest wyłączone ... Powodzenia!
Nie jestem pewien, czy ktoś ma ten sam problem, ale to było po prostu proste rozwiązanie dla mnie.
ten sam przykład
... ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
... div collapse="isCollapsed"> ...
z
@media screen and (min-width: 768px) {
.collapse{
display: block !important;
}
}
Moje solwety dla navbetu responsywnego / dropdown za pomocą funkcji arcular-ui bootstrap (przy aktualizacji do kąta 1.5 i, ui-bootrap 1.2.1)
index.html
...
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<input type="checkbox" id="navbar-toggle-cbox">
<div class="navbar-header">
<label for="navbar-toggle-cbox" class="navbar-toggle"
ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
<a class="navbar-brand" href="#">Project name</a>
<div id="navbar" class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">
<ul class="nav navbar-nav">
<li class="active"><a href="/view1">Home</a></li>
<li><a href="/view2">About</a></li>
<li><a href="#">Contact</a></li>
<li uib-dropdown>
<a href="#" uib-dropdown-toggle>Dropdown <b class="caret"></b></a>
<ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
app.css
/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
display: block;
}
/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
display:none
}