2013年12月18日 星期三

雙點後根據不同內容滑動出現視窗 使用 AngularJS

AngularJS Slide Editor

最近在做 UI 的時候有討論到希望盡量不要使用彈出視窗,於是想到用類似 mobile 的滑出頁,這次就用 Angular 實作看看。

準備 json 的 list ,我分成三類,等等會根據點到類別的不同開不一樣的滑出頁。
  1. $scope.list = [   
  2.         {   
  3.             type: 'type1',   
  4.             name: 'Jason',   
  5.             description: [email protected]'  
  6.         },   
  7.         {   
  8.             type: 'type2',   
  9.             name: 'Jack',   
  10.             description: [email protected]'  
  11.         },   
  12.         {   
  13.             type: 'type3',   
  14.             name: 'Tom',   
  15.             description: [email protected]'  
  16.         }   
  17.     ];  

用 ng-repeat 把 DOM 產出來
  1. <ul>  
  2.     <li ng-repeat="list in list" ng-dblclick="showDetail($index)">  
  3.         <div>{{list.name}}</div>  
  4.         <div class="description">{{list.description}}</div>  
  5.     </li>          
  6. </ul>  

準備要滑出的頁面
  1. <div class="edit type1" ng-class="{type1: 'active', type2: '', type3: '', '':''}[detail_block]">  
  2.     <div class="title">Type 1</div>  
  3.     <div class="content"></div>  
  4.     <div class="footer">  
  5.             <a class="btn" ng-click="hideEditBlock()">Save</a>  
  6.     </div>  
  7. </div>  

動畫是使用 css 完成的,基本原理就是外面用一層 div 包住,並設 overflow=hidden ,這樣超出去的範圍就看不到了,然後在雙點後,加上 active 這個 class 讓頁面跑出來,並使用 css 的 transition ,就會自動變成動畫了。

因為我要根據不同的內容滑出不同的頁面,所以用 ng-class 去判斷:
ng-class="{type1: 'active', type2: '', type3: '', '':''}[detail_block]" ,這邊的意思是我設一個 detail_block 的變數,當變數=type1 ,就會附加 active 這個 class 上去,其他類推。

我覺得 Angular 在這邊很神奇,切換變數後就可以控制 css 了,這邊判斷點到的項目的 type 是什麼改變變數。
  1. $scope.detail_block="";   
  2.     $scope.showDetail=function($index){   
  3.         $type=$scope.list[$index].type;   
  4.         if($type=="type1"){   
  5.             $scope.detail_block="type1";   
  6.         }else if($type=="type2"){   
  7.             $scope.detail_block="type2";   
  8.         }else{   
  9.             $scope.detail_block="type3";   
  10.     }   
  11. }  

最後加一個讓頁面收回去的控制,只要把變數給清空就可以了
  1. $scope.hideEditBlock=function(){   
  2.     $scope.detail_block="";   
  3. }  

Demo
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...