angularjs+bootstrap菜单的使用示例代码


Posted in Javascript onMarch 07, 2017

需求背景:

使用yo angular生成的项目默认主页是这样的:

angularjs+bootstrap菜单的使用示例代码

body部分涉及具体的业务内容,后续研究。这里主要研究菜单项、页眉的处理。

页脚处理:

自动生成的项目中,菜单和页脚设置都是在index.html文件中实现的。

# index.html
  <div class="footer">
   <div class="container">
    <p><span class="glyphicon glyphicon-heart"></span> 京东金融·杭州研发中心</p>
   </div>
  </div>

设置css格式:

/* Custom page footer */
.footer {
 padding-top: 20px;
 color: rgba(204, 3, 8, 0.91);
 border-top: 1px solid #e5e5e5;
 text-align: center;
}
 .container {
  max-width: 730px;
  margin-left: auto;
  margin-right: auto;
 }

上述截图还可见页面格式问题,是因为创建工程时,没有依赖bootstrap还有compass,项目根目录下安装相关依赖即可:

bower install compass --save
bower install bootstrap --save

菜单处理:

菜单功能主要在index.html文件中的header代码段实现。

<div class="header">
   <div class="menu">
    <nav class="navbar navbar-default" role="navigation">
     <div class="navbar-header">
      <!--![](images/jdjr.jpg)-->
     </div>

     <div class="collapse navbar-collapse" id="">
      <ul class="nav navbar-nav">
       <li class="active dropdown">
        <a class="dropdown-toggle" href="#" rel="external nofollow" data-toggle="dropdown">网关信息</a>
        <ul class="dropdown-menu">
         <li><a href="">NAT网关</a></li>
         <li><a href="">ROUTER网关</a></li>
        </ul>
       </li>
      </ul>
     </div>
    </nav>
   </div>
  </div>

这些class设置了默认属性,所以能够呈现出较为友好的样式,所以如果使用自定义类名,那样式需要自己设置。如果需要鼠标移动到菜单上就能够显示子菜单,则需要设置css属性。

.dropdown:hover .dropdown-menu {
 display: block;
}

菜单增加跳转:

菜单的跳转主要通过href实现,如下代码就是操作日志菜单跳转到/oplog页面:

<li><a href="#!/oplog" rel="external nofollow" >操作日志</a></li>

然后需要在app.js中增加相关控制代码:

.when('/oplog', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl',
    controllerAs: 'about'
   })

由于这里我重用了项目初始化时就生成的about.html代码,所以,不需要开发相关html文件,实际开发中这个跳转后的网页是需要自己在views目录下创建并开发页面的,同时需要在controllers目录下开发相关控制(此处就为AboutCtrl.js)代码。

菜单效果:

angularjs+bootstrap菜单的使用示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js资料toString 方法
Mar 13 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
JQuery中Ajax的操作完整例子
Mar 07 #Javascript
js判断手机系统是android还是ios
Mar 07 #Javascript
jQuery设计思想
Mar 07 #Javascript
Node.js读取文件内容示例
Mar 07 #Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 #Javascript
AngularJS的Filter的示例详解
Mar 07 #Javascript
js上下视差滚动简单实现代码
Mar 07 #Javascript
You might like
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
美国校园市场:OCM
2017/06/08 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
客户经理岗位职责
2013/12/08 职场文书
迎接领导欢迎词
2014/01/11 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
房产公证书格式
2015/01/26 职场文书
公司规章制度范本
2015/08/03 职场文书
Python绘制分类图的方法
2021/04/20 Python
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP