Angular.js与Bootstrap相结合实现手风琴菜单代码
更新时间:2016年4月16日 10:00 点击:1548
标题定的是angularjs与bootstrap相结合实现手风琴菜单,其实也就是用的bootstrap的样式。
在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码。接着学习实现的Demo。
主要练习自定义指令,向指令中传递参数,老规矩先上效果图:
<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page>
上面是我自定义的指令,菜单存在标题和内容3条用了 ng-repeat来渲染。
指令基本API如下:
app.directive('myDirective',function(){ return { //restrict: 默认为A(属性,默认值)<div my-directive=''></div> E(元素)C(类名)M(注释) //这里考虑到浏览器的兼容性通常我们用所有浏览器都认识的A类型 restrict: 'A', //优先级设置,默认是0,较大的优先调用 priority: 0, //这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。 terminal: false, //字符串或函数: 字符串<a></a>(指令内容) //注:必须存在一个根DOM元素 //一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个代表模板的字符串 //function(tElement, tAttrs) { ... } template: '', //从指定的url地址加载模板 templateUrl: '', //如果设置了这个参数,值必须为true replace: false, //指定指令的作用域 scope:'', // transclude:'', //string //function(scope, element, attrs, transclude, otherInjectables) { ... } controller:'', // controllerAs: '', // require: '', //以编程的方式操作DOM,包括添加监听器等 link: function postLink(scope, iElement, iAttrs) {}, // compile: // 返回一个对象或连接函数,如下所示: function(tElement, tAttrs, transclude) { return { pre: function(scope, iElement, iAttrs, controller) { }, post: function(scope, iElement, iAttrs, controller) { } } // 或者 return function postLink() { } }; }; })
如何切换的时候让其他的隐藏呢,这里主要用到指令ng-show,记录当前点击的,来隐藏其他的。
具体代码注释如下:
<style type="text/css"> .con { margin: 0 auto; width: 600px; margin-top: 100px; } .panel { width: 580px; } .panel-heading { cursor: pointer; } </style> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" /> <div class="con" ng-app="myApp" ng-controller="myCtrl"> <my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page> </div> <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script> <script type="text/javascript"> var app = angular.module('myApp', []); app.directive('myPage', function () { return { restrict: 'EA', replace: true, transclude: true, //是否将元素内容转移到模版中 scope: { title: "=pageTitle" }, template: [ '<div class="panel panel-info">', '<div class="panel-heading" ng-click="toggle();">', '<h3 class="panel-title" >{{title}}</h3>', '</div>', '<div class="panel-body" ng-show="showMe" ng-transclude></div>', '</div>' ].join(""), link: function (scope, element, attrs) { scope.showMe = false; scope.$parent.addExpander(scope); //保存所有菜单 scope.toggle = function toggle() { scope.showMe = !scope.showMe; //隐藏显示 scope.$parent.goToExpander(scope); } } }; }) app.controller('myCtrl', function ($scope) { $scope.expanders = [{ title: 'AngularJS', text: 'AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。' }, { title: 'jQuery', text: 'JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。' }, { title: 'Bootstrap', text: 'Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。' }]; var expanders = []; //记录所有菜单 $scope.addExpander = function (expander) { expanders.push(expander); }; $scope.goToExpander = function (selectedExpander) { expanders.forEach(function (item, index) { if (item != selectedExpander) { //隐藏非当前选项卡 item.showMe = false; } }) } }); </script>
相关文章
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- AngularJS 通过路由支持多视图应用, 可以根据路由动态加载所需的视图, 在 AngularJS 的文档中有详细的介绍, 网上也有不少教程, 就不用介绍了!随着视图的不断增加,js文件会越来越多,而 AngularJS 默认需要把全部的js都一次性...2015-10-21
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料,感兴趣的小伙伴们可以参考一下...2016-07-06
- 本文主要介绍AngularJS 依赖注入的知识,这里整理了相关的基础知识,并附示例代码和实现效果图,有兴趣的小伙伴可以参考下...2016-08-24
- 这篇文章主要介绍了angularjs $http实现form表单提交示例,非常具有实用价值,需要的朋友可以参考下 ...2017-06-15
- 这篇文章主要介绍了AngularJS实现Model缓存的方式,分享了多种AngularJS实现Model缓存的方法,感兴趣的小伙伴们可以参考一下...2016-02-05
- 本文主要介绍AngularJS 视图,这里整理了相关知识,并附代码示例和实现效果图,有兴趣的小伙伴可以参考下...2016-08-27
- 这篇文章主要介绍了AngularJS自定义指令之复制指令实现方法,结合完整实例形式分析了AngularJS自定义指令实现复制功能的相关操作技巧,需要的朋友可以参考下...2017-05-22
- 这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
- 下面小编就为大家带来一篇浅谈AngularJs指令之scope属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一,下面通过本文给大家介绍AngularJs中route的使用方法和配置,感兴趣的朋友一起学习吧...2016-02-09
- 任何时候,如果我们想要为请求添加全局功能,例如身份认证、错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段...2016-01-05
AngularJS使用ngOption实现下拉列表的实例代码
这篇文章主要介绍了AngularJS使用ngOption实现下拉列表的实例代码的相关资料,需要的朋友可以参考下...2016-01-25Angularjs中如何使用filterFilter函数过滤
这篇文章主要介绍了Angularjs中如何使用filterFilter函数过滤的相关资料,需要的朋友可以参考下...2016-02-12- AngularJS 让人爱不释手的八种功能,想知道AngularJS哪八种功能让人喜欢就快点看下本文吧...2016-03-28
- 这篇文章主要为大家详细介绍了AngularJS内建服务$location及$location功能,感兴趣的小伙伴们可以参考一下...2016-07-06
- 本文主要介绍AngularJS表单的知识,这里整理了表单的基础知识和简单的示例代码,有需要的小伙伴可以参考下...2016-08-24
- 下面小编就为大家带来一篇Angularjs---项目搭建图文教程。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-07-25