`
duzhangtech
  • 浏览: 6188 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

AngularJS - 用Angular JS写个NavBar

 
阅读更多
HTML;

    <ul class="stats-sidebar-nav">
        <li class="item" ng-class="{'selected-1':statsView=='overview', 'item-hover': hover}" ng-mouseenter="hover1 = true" ng-mouseleave="hover1 = false"><a href="#/overview">课程总览</a></li>
        <li class="item" ng-class="{'selected':statsView=='satisfaction', 'item-hover': hover2}" ng-mouseenter="hover2 = true" ng-mouseleave="hover2 = false"><a href="#/satisfaction">课程满意度</a></li>
        <li class="item" ng-class="{'selected':statsView=='proactivity', 'item-hover': hover3}" ng-mouseenter="hover3 = true" ng-mouseleave="hover3 = false"><a href="#/proactivity">课程活跃度</a></li>
        <li class="item" ng-class="{'selected':statsView=='understanding', 'item-hover': hover4}" ng-mouseenter="hover4 = true" ng-mouseleave="hover4 = false"><a class="" href="#/understanding">授课消化度</a></li>
    </ul>

less:
@light-blue-bg: #1387C0;

a:hover{
    text-decoration: none;
}

.hide {
    display: hidden;
}
.border-fix {
    border-top: 1px solid @light-blue-bg; // pixel perfect
}

.stats-sidebar-nav {
    float: left;
    width: 200px;
    height: 700px; // actuall 500px
    background-color: #324056;
    .item {
        &.selected{
            background-color: @light-blue-bg;
            font-weight: bold;
        }

        &.selected-1{
            background-color: @light-blue-bg;
            font-weight: bold;
            .border-fix;
        }
        cursor: pointer;
        width: 200px;
        height: 40px;
        border-top: 1px solid #3D4A5D;
        padding-left: 18px;
        a {
            line-height: 40px;
            height: 100%;
            width: 100%;
            display: block;
            text-decoration: none;
            color: white;
        }
    }
    .item-hover {
        background-color: @light-blue-bg;
        // .border-fix;
    }
}

javascript: 无

解释:
在html中,ng-mouseenter 与 ng-mouseleave 给每个块定义了一个hover[i]变量,这个变量控制了ng-class中得item-hover。

css中,.stats-sidebar-nav .item a 定义了a的:
1. line-height 使得文字居中
2. height width 均为100%, display为block  使得a的大小与div相重合。(所以实现hover的另外一个思路就是用a:hover)
分享到:
评论

相关推荐

    angularjs-router-directive

    AngularJS 是一个强大的前端JavaScript框架,由Google维护,主要用于构建单页应用程序(SPA)。它提供了丰富的功能,包括数据绑定、依赖注入、指令等,而"angularjs-router-directive"则聚焦于AngularJS中的路由和...

    前端项目-angular-strap.zip

    在本文中,我们将深入探讨基于AngularJS的前端项目——Angular-Strap,它是一个将Bootstrap组件与AngularJS相结合的库,旨在提供更丰富的交互性和动态功能。Angular-Strap允许开发者利用AngularJS的强大功能和...

    angularjs和bootstrap开发的web控件的集合

    AngularJS,一个由Google维护的JavaScript框架,专注于数据绑定和依赖注入,使得前端开发更加模块化和易于维护。而Bootstrap,则是Twitter推出的一款用于快速构建响应式和移动优先网站的前端框架,它提供了丰富的UI...

    前端项目-angular-materialize.zip

    Angular-Materialize 是一个专门为 AngularJS 开发的库,它将 Google 的 Material Design 设计理念与 Materialize CSS 框架相结合,为前端开发者提供了一套强大的 UI 组件和交互效果。这个项目的目的是为了让 ...

    Angular.JS通过指令操作DOM的方法

    AngularJS内建了一个轻量级的jQuery库——jqLite,它提供了一些基本的DOM操作功能。 jqLite虽然不包含jQuery的所有方法,但足以满足大部分基础操作,如选择元素、事件处理、属性操作等。如果你的项目已经包含了...

    admin-angular:管理角度

    "admin-angular:管理角度"是一个基于AngularJS和Bootstrap构建的后台管理系统。这个项目的核心目标是为开发者提供一个高效、易用且功能丰富的管理界面框架,主要用于实现后台数据的展示、操作和管理。AngularJS,...

    sidebar-menu:基于 Angular UI Bootstrap 的侧边栏菜单

    在这个案例中,我们使用Angular UI Bootstrap的`collapse`指令来控制菜单项的展开和折叠,`navbar`组件则负责创建基础的菜单结构。 下面是如何使用Angular UI Bootstrap创建侧边栏菜单的基本步骤: 1. **引入依赖*...

    angularJS+bootstrap模板

    AngularJS,由Google维护,是一个强大的JavaScript框架,主要用于构建动态单页应用程序(SPA)。而Bootstrap,则是一个流行的前端开发框架,它提供了一套响应式设计、移动设备优先的HTML、CSS和JS组件,使得构建美观...

    angular-music-app:在 angularjs 课程中创建的音乐应用

    角度音乐应用程序在 angularjs 课程中创建的音乐应用 - firefox 插件使用这样的变量:(来自 navbar.html) '::' 导致 angular 仅在未定义之前监视此变量。 在初始化的那一刻 - 它停止观看。 用于限制观察者的数量...

    angular-strap-micro:只是 angular-strap 的精简版(包含的模块是

    所有这些Angular-Strap模块都是用JavaScript编写的,利用了AngularJS的依赖注入、指令和表达式等特性。JavaScript是一种广泛使用的客户端脚本语言,对于构建动态和交互性强的Web应用至关重要。AngularJS是基于...

    framework7.angular.js:开发该存储库是为了维护与AngularJs集成Framework7的工作。

    4. **模块化**:AngularJS支持模块化应用结构,`framework7.angular.js`可能封装成一个AngularJS模块,方便在项目中导入和使用。 5. **路由管理**:AngularJS的路由系统允许根据URL导航到不同的页面。`framework7....

    Angular 4环境准备与Angular cli创建项目详解

    Angular 4是Angular框架的一个重要版本,它带来了性能优化、体积减小以及更少的API变动。本篇文章将详细介绍如何准备Angular 4的开发环境以及使用Angular CLI来创建项目。 首先,开发环境的搭建至关重要。在开始...

    AngularJs bootstrap搭载前台框架——基础页面

    AngularJS是一个强大的JavaScript框架,用于构建动态Web应用,而Bootstrap则是一个流行的CSS框架,用于快速开发响应式和移动优先的网站。 首先,我们要在项目中引入所需的库文件。在`index.html`中,我们需要添加...

    sgdc.github.io:史蒂文斯游戏开发俱乐部网站-内置AngularJS和Bootstrap以延长使用寿命并易于使用

    该网站使用AngularJS和某些Bootstrap编写(出于移动兼容性)该网站的运作方式如果您不了解AngularJS,那么您会对该网站的某些部分感到困惑,但是基本要点是: Angular允许您创建自定义html标记,该标记按照/scripts/...

    ionic 聊天ui

    2. `js` - 存放JavaScript代码,可能包括AngularJS的服务、控制器、指令等。 3. `img` - 图片资源,可能包含应用图标、聊天表情等。 4. `templates` - HTML模板文件,用于构建应用的各个视图。 5. `lib` - 第三方库...

    简洁响应式Bootstrap后台管理系统模板

    同时,可以与其他库和框架(如jQuery、AngularJS、React等)结合使用,进一步扩展功能。 7. **最佳实践**: 在使用这个模板时,应注意遵循Web开发的最佳实践,例如,保持代码简洁、遵循语义化HTML、优化图片大小、...

    用于UI样式的框架组件库精选列表

    Angular Material是AngularJS的一个官方UI组件库,提供了许多美观的、响应式的组件。 2. **React**:Facebook推出的视图层库,强调组件化开发。虽然React本身不包含MVC模式,但与Redux或MobX等状态管理工具结合使用...

Global site tag (gtag.js) - Google Analytics