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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
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 创建标签云函数代码
2010/05/26 PHP
php 文本文件的读取效率
2012/02/10 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 正则表达式操作指南
2009/05/04 Python
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python的subprocess模块总结
2014/11/07 Python
Python实现购物程序思路及代码
2017/07/24 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
python3.6编写的单元测试示例
2019/08/17 Python
python批量处理文件或文件夹
2020/07/28 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
给同事的道歉信
2014/01/11 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
文言文辞职信
2015/02/28 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
DQL数据查询语句使用示例
2022/12/24 MySQL