angular-ui 부트스트랩(올바른 angular 방식으로 처리)을 갖춘 응답성 드롭다운형 내비게이션 바
angular-ui-boostrap의 모듈 "ui.bootstrap.dropdownToggle"을 사용하여 드롭다운 네비게이션 바를 사용하여 JSFidle을 만들었습니다.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>
이러한 드롭다운 메뉴를 구현하기 위한 적절한 각도의 방법인 것으로 알고 있습니다.angularjs에 관해서는 bootstrap.discluse를 포함하여 data-discluse="discluse"를 사용하는 방법이 있습니다.내가 여기 있는 거야?
이제 다음 Fielle에서처럼 반응하는 동작을 내 내비게이션에 추가하겠습니다.http://jsfiddle.net/ghtC9/6/
하지만 위의 해결책에 대해 마음에 들지 않는 점이 있습니다.Bootstrap.js도 포함되었어!
그렇다면 기존 내비게이션 바에 반응하는 동작을 추가하는 올바른 각도 방법은 무엇일까요?
"nav-collapse collapse navbar-response-collapse"와 같은 부트스트랩 응답형 navbar 클래스를 사용해야 합니다.하지만 어떻게...
도와주시면 정말 감사하겠습니다!
잘 부탁드립니다!마이클.
2015-06년 갱신
antopaire의 코멘트/예시에 근거합니다.
사용.uib-collapseattribute는 애니메이션을 제공합니다.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>
고대...
질문은 BS2에 관한 것으로 알고 있습니다만, 저는 ui.bootstrap 문제 394에 기재된 제안을 바탕으로 ng-class 솔루션을 사용하여 Bootstrap 3을 위한 솔루션을 제안하고 싶습니다.
공식 부트스트랩의 예에서 유일하게 다른 것은 다음 명령어를 추가하는 것입니다.ng-다음 코멘트에 기재되어 있는 속성:
<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">
...
다음으로 최신 작업 예를 제시하겠습니다.http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (hat tip Lars)
이 방법은 단순한 사용 사례에서 사용할 수 있는 것처럼 보이지만, 두 번째 드롭다운이 잘린 것을 볼 수 있습니다.
http://jsfiddle.net/iscrow/Es4L3/ (HTML의 2개의 "주"를 체크)라는 명령어를 사용하여 이 작업을 수행할 수 있습니다.
<!-- 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">
즉, 접힌 상태를 변수에 저장해야 하며, 접힌 상태도 해당 변수의 값을 간단히 변경하여 변경해야 합니다.
Release 0.14에서는uib-컴포넌트 접두사:
https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes
★★★★★★collapse로로 합니다.uib-collapse.
같은 문제를 안고 있는 사람이 있는지 모르겠지만, 그것은 단순한 css 솔루션이었습니다.
같은 예
... ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
... div collapse="isCollapsed"> ...
와 함께
@media screen and (min-width: 768px) {
.collapse{
display: block !important;
}
}
1.5 .2 Angular-ui 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
}
언급URL : https://stackoverflow.com/questions/16268606/responsive-dropdown-navbar-with-angular-ui-bootstrap-done-in-the-correct-angula
'programing' 카테고리의 다른 글
| Mongoose 한계/오프셋 및 카운트 쿼리 (0) | 2023.03.25 |
|---|---|
| Angular의 지시문에서 지시문 추가JS (0) | 2023.03.25 |
| CSS 배경 이미지가 모바일로 표시되지 않음 (0) | 2023.03.25 |
| PLS-00103: "CREATE" 기호가 발견되었습니다. (0) | 2023.03.25 |
| jQuery에서 Div 요소 회전 (0) | 2023.03.25 |