收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > 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中一種button切換效果的實現方法(二)

查看圖片

之前用三目表達式和ng-class實現了按鈕切換效果,似乎達到了我的預期,但是我覺得還有改進空間,網上找了一些資料,大概還有以下幾種實現方式:

路由

<button class="btn1" routerLink="component1" routerLinkActive="active" type="submit">btn1</button>
<button class="btn2" routerLink="component2" routerLinkActive="active" type="submit">btn2</button>
.active {
 background-color: white;
}

將button切換的頁面寫成一個component,通過routerLink鏈接到對應的component并顯示出來,routerLinkActive來控制路由鏈接激活后button的樣式應用的class。

但是這個有局限性,適合button按下去后,整個頁面會有大幅變化的應用場景,那么還有其他方法嗎?答案是肯定的。

[class]與(click)

還是通過ngclass和ngclick配合,不過方法和之前寫的略有不同。

字符串數組形式

<button [class]="{true:'btn1',false:'btn2'}[isChange]" (click)="isChange=true">btn1</button>
<button [class]="{false:'btn1',true:'btn2'}[isChange]" (click)="isChange=false" >btn2</button>
.btn1{
 width: 120px;
 height: 43px;
 border: 1px solid #EEEEEE;
 background: white;
 border-bottom: none;
 text-align: center;
}
.btn2{
 border: 1px solid #EEEEEE;
 border-top: 2px solid #238FF9;
 width: 120px;
 height: 42px;
 background: white;
 border-bottom: none;
 text-align: center;
}

字符串數組形式是針對class簡單變化,具有排斥性的變化,true是什么class,false是什么class。若要設置初識狀態的class,可以在component中的構造函數中預先賦值。

對象key/value處理

<button [class]="{'one':'btn1','two':'btn2','three':'btn3','four':'btn4'}[isChange]" (click)="isChange='one'">btn1</button>
 <button [class]="{'one':'btn1','two':'btn2','three':'btn3','four':'btn4'}[isChange]" (click)="isChange='two'">btn2</button>
 <button [class]="{'one':'btn1','two':'btn2','three':'btn3','four':'btn4'}[isChange]" (click)="isChange='three'">btn3</button>
 <button [class]="{'one':'btn1','two':'btn2','three':'btn3','four':'btn4'}[isChange]" (click)="isChange='four'">btn4</button>

這種方法可以對多個對象賦不同的class。或者可以實現多個button互斥性變化:

<button [class]="{'one':'btn1','two':'btn2','three':'btn2','four':'btn2'}[isChange]" (click)="isChange='one'">btn1</button>
 <button [class]="{'one':'btn2','two':'btn1','three':'btn2','four':'btn2'}[isChange]" (click)="isChange='two'">btn2</button>
 <button [class]="{'one':'btn2','two':'btn2','three':'btn1','four':'btn2'}[isChange]" (click)="isChange='three'">btn3</button>
 <button [class]="{'one':'btn2','two':'btn2','three':'btn2','four':'btn1'}[

以上所述是小編給大家介紹的AngularJS2中一種button切換效果的實現方法(二),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對積木網網站的支持!

Vue 過渡實現輪播圖效果
Vue過渡Vue的過渡系統是內置的,在元素從DOM中插入或移除時自動應用過渡效果。過渡的實現要在目標元素上使用transition屬性,具體實現參考Vue2過渡下面

Angular2利用組件與指令實現圖片輪播組件
前言如果說模塊系統是Angular2的靈魂,那其組件體系就是其軀體,在模塊的支持下渲染出所有用戶直接看得見的東西,一個項目最表層的東西就是組件呈

深入理解AngularJS中的ng-bind-html指令
前言在為html標簽綁定數據的時,如果綁定的內容是純文本,你可以使用{{}}或者ng-bind。但在為html標簽綁定帶html標簽的內容的時候,angularjs為了安全考慮

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
36选7走势图大全 浙江12下载 金冠手机在线娱乐版金字招牌 天津时时彩走势图五星 K线猎手 广东快乐十分走势图彩经网 极速时时彩预测器 云南11选五胆拖表 江苏十一选五前三组走势图 山东体彩扑克三 股票推荐排行榜 广东快乐十分专家杀号 天津时时彩最快开奖 2010年10月上证指数 四川快乐12开奖手机版直播 天津快乐十分和值 股票推荐