angular自定义组件-----侧边菜单栏

最新推荐文章于 2023-10-09 14:08:56 发布

here962464

最新推荐文章于 2023-10-09 14:08:56 发布

阅读量5.2k

点赞数

分类专栏：前端框架

本文链接：https://blog.csdn.net/here962464/article/details/79308989

版权

前端框架专栏收录该内容

19 篇文章 0 订阅

订阅专栏

首先申明一下我用的代码编辑器是webstorm，在webstorm里打开网页调试的时候它会自动模拟一个服务器环境，如果是sublime直接打开会报错，直接双击HTML文件打开也会出错，如果你自己有配置wamp环境就把文件放到www文件夹下打开。
组件效果大概长这样，动画效果用的jQuery。
这里写图片描述
首先需要用到的有angular.min.js，jquery-1.10.2.js（1.0以上的版本就行），其实这个菜单效果很简单，用原生js也能写出来，但是用angular框架的好处是假如这个项目还有其他组件，整个项目管理起来会方便很多。这样HTML页面中就只需要引入各个可重复利用的组件，而不需要有太多的HTML标签

这里写图片描述

项目结构：

这里写图片描述

代码片：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="components/nav.css">
</head>
<body>
    <my-nav style="width:200px;" cur-index="1"></my-nav>
    <script src="js/angular.min.js"></script>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="./components/nav.js"></script>
    <script src="./components/nav-directive.js"></script>
    <script>
        var myApp = angular.module('myApp',['NavByZM']);
    </script>
</body>
</html>

css文件：
这里写图片描述

*{padding:0;margin:0;list-style:none;font-family:"微软雅黑";font-size: 14px;}
a,a:hover{text-decoration:none;color:#333;}
a:hover{color:orangered;}

.navByZM{margin:150px 0;}
.navByZM ul li{padding:10px 20px;background:#ccc;}
.navByZM ul li h5.selected a,.navByZM ul li h5 a:hover{color:orangered;}
.navByZM ul li dl{display:none;padding-left:10px;}

nav.js文件：

这里写图片描述
代码片：

/**
 * @Author : ZM
 * @Date : 2018/2/4
 * @Version : 1.0
 * @Last Modified by : ZM
 * @Last Modified time : 2018/2/4
 **/
angular.module('NavByZM',[]).
    directive('myNav',function(){
        return{
            restrict:'AE',
            scope:true,
            replace:true,
            templateUrl:'./components/template.html',
            controller:['$scope',function($scope){
                $scope.navList = [
                    {
                        title:"一级标题1",
                        list:[
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'}
                        ]
                    },
                    {
                        title:'一级标题2',
                        list:[
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'}
                        ]
                    },
                    {
                        title:'一级标题3',
                        list:[
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'}
                        ]
                    },
                    {
                        title:'一级标题4',
                        list:[
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'}
                        ]
                    },
                    {
                        title:'一级标题5',
                        list:[
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'}
                        ]
                    },
                    {
                        title:'一级标题6',
                        list:[
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'},
                            {title:'二级标题'}
                        ]
                    }
                ]
            }],
            link:function(scope,element,attr){
                //使用$watch来监听加载数据再实例化对象就不会发生找不到节点的现象
                //这种方法比设置定时器性能更佳（更快）
                scope.$watch('navList',function(){
                    var oNav = new NavFnByZM({
                        ele: $(element),
                        index: attr.curIndex
                    });
                },true)
            }
        }
    });

这个文件里需要引入一个HTML模板：
这里写图片描述
代码片：

<div class="navByZM">
    <ul>
        <li ng-repeat="item in navList">
            <h5><a href="#">{{item.title}}</a></h5>
            <dl>
                <dd ng-repeat="val in item.list">
                    <a href="#">{{val.title}}</a>
                </dd>
            </dl>
        </li>
    </ul>
</div>

组件封装：
这里写图片描述
代码片：

/**
 * @Author : ZM
 * @Date : 2018/2/4
 * @Version : 1.0
 * @Last Modified by : ZM
 * @Last Modified time : 2018/2/4
 **/
NavFnByZM = (function($){
    var Obj = function(options){
        this.pra(options);
        this.init();
    };
    Obj.prototype = {
        init: function(){
            this.cur();
            this.clickFn();
        },
        clickFn: function(){
            this.$element.on('click','h5',function(ev){
                var $this = $(this);
                ev.stopPropagation;
                if($this.hasClass('selected')){
                    $this.removeClass('selected').siblings().slideUp();
                }else{
                    $this.addClass('selected').siblings().slideDown();
                }
                $this.parent().siblings().find('h5').removeClass('selected').siblings().slideUp();
            });
        },
        //设置默认加载项
        cur: function(){
            var $curIndex = this.curIndex;
            var _this = this;
            //延时0毫秒加载数据，否则无法找到this.$element下面的节点。
            setTimeout(function(){
                _this.$element.find('li').eq($curIndex).find('h5').addClass('selected').siblings().show();
            },0);
        },
        pra: function(option){
            this.$element = option.ele;
            this.curIndex = option.index || 0;
        }
    };
    return Obj;
})(jQuery);

here962464

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angular自定义组件-----侧边菜单栏

首先申明一下我用的代码编辑器是webstorm，在webstorm里打开网页调试的时候它会自动模拟一个服务器环境，如果是sublime直接打开会报错，直接双击HTML文件打开也会出错，如果你自己有配置wamp环境就把文件放到www文件夹下打开。组件效果大概长这样，动画效果用的jQuery。首先需要用到的有angular.min.js，jquery-1.10.2.js（1.0以上的版本就...
复制链接

扫一扫