Angular.js与Bootstrap相结合实现手风琴菜单代码


Posted in Javascript onApril 13, 2016

标题定的是angularjs与bootstrap相结合实现手风琴菜单,其实也就是用的bootstrap的样式。

在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码。接着学习实现的Demo。

主要练习自定义指令,向指令中传递参数,老规矩先上效果图:

Angular.js与Bootstrap相结合实现手风琴菜单代码

<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>
Javascript 相关文章推荐
js压缩利器
Feb 20 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
浅谈javascript 面向对象编程
Oct 28 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
简单实现js页面切换功能
Jan 10 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 #Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 #Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 #Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 #Javascript
Bootstrap每天必学之折叠
Apr 12 #Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 #Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 #Javascript
You might like
十天学会php(2)
2006/10/09 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
图片自动更新(说明)
2006/10/02 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
python如何将多个PDF进行合并
2019/08/13 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
python GUI模拟实现计算器
2020/06/22 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
大学总结自我鉴定
2014/01/18 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
小学毕业教师寄语
2019/06/21 职场文书
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
python通过新建环境安装tfx的问题
2022/05/20 Python