收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > 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號
手游棋牌游戏运营
天津快乐10分开奖同步 北京pk拾前后技巧 重庆快乐十分开奖 天津时时视频直播 一肖中特期期准 广东麻将白板做鬼什么意思 一分快三稳赢技巧 扫码app 四川时时下载手机版式 新疆时时彩开奖84期 老时时号码记录 二码二码中特 福建时时开奖 重庆时时官网 最新平特一肖 pk10冠军追号计划表