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 相关文章推荐
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
详解javascript函数的参数
Nov 10 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
在vscode 中设置 vue模板内容的方法
Sep 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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
显示、隐藏密码
2006/07/01 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
python支持多继承吗
2020/06/19 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
外科实习自我鉴定
2013/10/06 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
公司周年庆活动方案
2014/08/25 职场文书
运动会广播稿20字
2015/08/19 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python
SQL Server中搜索特定的对象
2022/05/25 SQL Server