收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

使用AngularJS2中的指令实现按钮的切换效果

查看图片

之前在AngularJS2中一种button切换效果的实现(二)中实现了按钮的切换效果,但是方法比较low,这次我们使用Angular2的指令来实现。

指令实现hover效果

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
 selector: '[myHighlight]'
})
export class HighlightDirective {
 constructor(private el: ElementRef) { }
 @HostListener('mouseenter') onMouseEnter() {
 this.highlight('red');
 }
 @HostListener('mouseleave') onMouseLeave() {
 this.highlight(null);
 }
 private highlight(color: string) {
 this.el.nativeElement.style.backgroundColor = color;
 }
}
<button myHighlight class="btn">按钮一</button>
<button myHighlight class="btn">按钮二</button>
<button myHighlight class="btn">按钮三</button>
.btn{
 height: 50px;
 width: 100px;
 background-color: #3399ff;
 color: white;
 border: 0;
 outline: 0;
 cursor: hand;
}

hover的效果直接参考Angular官网的代码。

查看图片

指令实现click效果

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
 selector: '[myHighlight]'
})
export class HighlightDirective {
 constructor(private el: ElementRef) { }
 @HostListener('click') onMouseClick() {
 this.clickhighlight("black");
 }
 private clickhighlight(color: string) {
 let obj = this.el.nativeElement;
 let btns = obj.parentNode.children;
 //背景色全部重置
 for(let i=0; i<btns.length; i++){
 btns[i].style.backgroundColor = "#3399ff";
 }
 //设置当前点击对象的背景色
 obj.style.backgroundColor = color;
 }
}
<div>
<button myHighlight class="btn">按钮一</button>
<button myHighlight class="btn">按钮二</button>
<button myHighlight class="btn">按钮三</button>
</div>
.btn{
 height: 50px;
 width: 100px;
 background-color: #3399ff;
 color: white;
 border: 0;
 outline: 0;
 cursor: hand;
}

click效果仍然用@HostListener装饰器引用属性型指令的宿主元素,首先把所有button的背景颜色重置,然后再设置当前点击对象的背景颜色,这样就达到了点击后背景颜色变化的效果。

查看图片

指令实现click加hover效果

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
 selector: '[myHighlight]'
})
export class HighlightDirective {
 constructor(private el: ElementRef) { }
 @HostListener('click') onMouseClick() {
 this.clickhighlight("black");
 }
 private clickhighlight(color: string) {
 let obj = this.el.nativeElement;
 let btns = obj.parentNode.children;
 //背景色全部重置
 for(let i=0; i<btns.length; i++){
 btns[i].style.backgroundColor = "#3399ff";
 }
 //设置当前点击对象的背景色
 obj.style.backgroundColor = color;
 }
}
<div>
<button myHighlight class="btn">按钮一</button>
<button myHighlight class="btn">按钮二</button>
<button myHighlight class="btn">按钮三</button>
</div>
.btn{
 height: 50px;
 width: 100px;
 background-color: #3399ff;
 color: white;
 border: 0;
 outline: 0;
 cursor: hand;
}
.btn:hover{
 background: black !important;
}

配合上文click效果,只要加上一行css代码就可以实现click和hover的组合效果,此处务必使用hover伪类,并用!important来提升样式的优先级,如果用@HostListener装饰器,mouseenter、mouseleave、click三者会打架:

查看图片

以上所述是小编给大家介绍的使用AngularJS2中的指令实现按钮的切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

AngularJS2中一种button切换效果的实现方法(二)
之前用三目表达式和ng-class实现了按钮切换效果,似乎达到了我的预期,但是我觉得还有改进空间,网上找了一些资料,大概还有以下几种实现方式:路

Vue 过渡实现轮播图效果
Vue过渡Vue的过渡系统是内置的,在元素从DOM中插入或移除时自动应用过渡效果。过渡的实现要在目标元素上使用transition属性,具体实现参考Vue2过渡下面

Angular2利用组件与指令实现图片轮播组件
前言如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号