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 相关文章推荐
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
jquery 手势密码插件
Mar 17 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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基础知识:类与对象(1)
2006/12/13 PHP
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
功能强大的php分页函数
2016/07/20 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
python实现bitmap数据结构详解
2014/02/17 Python
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
Python异常处理知识点总结
2019/02/18 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
中文系学生自荐信范文
2013/11/13 职场文书
服务宗旨标语
2014/07/01 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
Java实现房屋出租系统详解
2021/10/05 Java/Android