保藏本站 保藏本站
188bet注册网主页 - 软件测验 - 常用手册 - 站长东西 - 技能社区
主页 > 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中的指令完成按钮的切换作用,期望对我们有所协助,假如我们有任何疑问请给我留言,小编会及时回复我们的。在此也非常感谢我们对188bet注册网网站的支撑!

AngularJS2中一种button切换作用的完成办法(二)
之前用三目表达式和ng-class完成了按钮切换作用,好像到达了我的预期,可是我觉得还有改善空间,网上找了一些材料,大约还有以下几种完成办法:路

Vue 过渡完成轮播图作用
Vue过渡Vue的过渡体系是内置的,在元素从DOM中刺进或移除时主动运用过渡作用。过渡的完成要在方针元素上运用transition特点,具体完成参阅Vue2过渡下面

Angular2运用组件与指令完成图片轮播组件
前语假如说模块体系是Angular2的魂灵,那其组件体系便是其躯体,在模块的支撑下烘托出一切用户直接看得见的东西,一个项目最表层的东西便是组件呈

本周排行

更新排行

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