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 相关文章推荐
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
简单的Jquery全选功能
Nov 07 Javascript
jQuery is()函数用法3例
May 06 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
微信小程序canvas动态时钟
Oct 22 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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
JS定时器实例
2013/04/17 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Python跳出多重循环的方法示例
2019/07/03 Python
浅析python内置模块collections
2019/11/15 Python
python mysql中in参数化说明
2020/06/05 Python
总裁岗位职责
2013/12/04 职场文书
初中学生期末评语
2014/04/24 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
地雷战观后感
2015/06/09 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书