angularjs使用bootstrap在modal中使用nav并且不让modal外的数据
发布时间:2020-12-17 09:49:39 所属栏目:安全 来源:网络整理
导读:1.今天的一点小总结 今天写前端的时候碰到了要使用导航条的情况,而使用nav-bar感觉自己不好控制,而且放在modal上不好看.就使用nav来进行. modal页面如下: div role = "navigation" ng-init = "other_hide=true" div class = "modal-header" role = "navigati
1.今天的一点小总结今天写前端的时候碰到了要使用导航条的情况,而使用nav-bar感觉自己不好控制,而且放在modal上不好看.就使用nav来进行. <div role="navigation" ng-init="other_hide=true">
<div class="modal-header" role="navigation">
<h4 class="modal-title">表</h4>
<ul class="nav nav-tabs">
//class="active"默认显示一个head
<li class="active">
//注意这里的onclick,因为我这里的href只是转换下面的tab页,onclick不需要起作用,所以直接return false,这样可以防止modal外的页面被重置了.
//如果需要onclick功能,那么这么写 onclick="yourfunction(); return false"即可.
<a href="#detail_info" onclick="return false;" style="color: #0059b3" data-toggle="tab">详细信息</a>
</li>
<li>
<a href="#other_info" onclick="return false;" style="color: #0059b3" data-toggle="tab">配置</a>
</li>
</ul>
</div>
<div class="tab-content">
//注意这里的in active,之前一直不知道怎么默认显示一个tab.还用上了ng-hide,白费力气,查了好半天才查到.
<div class="modal-body tab-pane fade in active" style="margin-top: 1px" id="detail_info">
一个tab
</div>
<div class="modal-body tab-pane fade " id="other_info">
另一个tab
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" ng-click="save()">保存</button>
<span style="margin-left: 20px"></span>
<button class="btn btn-default" type="button" ng-click="ok()">返回</button>
</div>
</div>
值得注意的两点在注释里面有.
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 在vim中使用Matlab进行自动命令?
- scala sbt test在多个项目上运行setup和cleanup命令
- 阉割bootstrap-2.3.2,只需要bootstrap的icon和button样式
- 函数工作(boot.stepAIC)但在另一个函数 – 环境问题中引发错
- 对Bootstrap的一点点认识
- angular – 从EventEmitter事件中最佳重新输入ngZone
- twitter-bootstrap – 如何获取fontawesome工作在Azure网页
- Axis2.x WebService开发
- 使用wget / curl下载Github构建工件(发布)
- angularjs – Angular ui-select不包含在包含在角ui-bootst