您的位置:首页 - 教程 - Bootstrap - 正文
Angular.js+Bootstrap实现手风琴菜单

说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了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属性设置为true
        scope: {
            ngModel: '=', // 将ngModel同指定对象绑定
            onSend: '&', // 将引用传递给这个方法
            fromName: '@' // 储存与fromName相关联的字符串
        }
        //如果设置了,其值必须为true,它的默认值是false。
        transclude:'',
        //string
        //function(scope, element, attrs, transclude, otherInjectables) { ... }
        controller:function($scope, $element, $attrs, $transclude) {
            // 控制器逻辑放在这里
        },
        //controllerAs参数用来设置控制器的别名,可以以此为名来发布控制器,并且作用域可以访问controllerAs
        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://hovertree.com/ziyuan/bootstrap/3.3.6/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>

评论: