Angular Mobile UI API文檔

這個是angular-mobile-ui的主要模塊

應用這個模塊你也將同時獲取到mobile-angular-ui.core和mobile-angular-ui.components的特性

他不在須要其餘任何的css

使用

在你的應用中聲明如下代碼

 

angular.module('myApp', ['mobile-angular-ui']);

 

裏面包含了

• 手勢
  • 拖拽
  • 滑動
  • 觸碰
  • 變化
• 組件
  • 模式
  • 導航條
  • 滾動
  • 側邊欄
  • 開關
• 核心
  • 活動連接
  • 鋪貨
  • 外部點擊
  • 狀態共享
  • 默認觸碰移動

手勢

他用支持觸碰,滑動和拖拽的指令和服務

手勢的應用

.gestures模塊對於mobile-angular-ui來講不是必須的.也不附屬於其餘模塊,他意圖能夠與其餘的angular框架分開大度使用.

若是要使用你就必需要飲用mobile-angular-ui.gesture.min.js到你的程序中去

<script src="/dist/js/mobile-angular-ui.gestures.min.js"></script>

angular.module('myApp', ['mobile-angular-ui.gestures']);

包含如下模塊

• 拖拽
• 滑動
• 觸碰
• 變化

拖拽

mobile-angular-ui.gestures.drag顯示爲$drag服務用來處理拖拽的手勢.$drag服務報過了$touch服務加上了touchmove事件的CSS樣式

拖拽應用

angular.module('myApp', ['mobile-angular-ui.gestures']);

或者

angular.module('myApp', ['mobile-angular-ui.gestures.drag']);

var dragOptions = {
  transform: $drag.TRANSLATE_BOTH,
  start:  function(dragInfo, event){},
  end:    function(dragInfo, event){},
  move:   function(dragInfo, event){},
  cancel: function(dragInfo, event){}
};

$drag.bind(element, dragOptions, touchOptions);

• transfrom是function(element, currentTransform, touch) -> newTransform返回的一個會話元素,其 currentTransform 和返回 newTransform 的元素以響應觸摸 >。更多信息，請參閱 $transform默認爲 $drag.TRANSLATE_BOTHdragInfo 是touchInfo 來自$touch的擴展版本 touchInfo , 是經過:originalTransform來擴展的: $transform 對象是在$drag綁定以前相關的CSS變換.
• start, end, move, cancel 是 drag 移動階段的可選回調的響應.
• dragInfo 是 touchInfo 來自於$touch的touchInfo的擴展版本, 擴展了:
  • originalTransform:  $transform對象是$drag跳起以前關於CSS變化.
  • originalRect: The Bounding Client Rect在drag動做以前跟CSS變化有關.
  • startRect:  Bounding Client Rectstart事件用於綁定註冊的元素.
  • startTransform: $transform 在 start 事件.
  • rect: The current Bounding Client Rect 綁定元素.
  • transform: The current $transform.
  • reset: 一個給 originalTransform 恢復元素的功能.
  • undo:一個給 startTransform 恢復元素的功能.
• touchOptions 是一個給了經過 $touch 服務的可選對象.

 預先的變化

 

• $drag.NULL_TRANSFORM: 接下來的時刻沒有變化
• $drag.TRANSLATE_BOTH: Transform translate following movement on both x and y axis.
• $drag.TRANSLATE_HORIZONTAL: Transform translate following movement on x axis.
• $drag.TRANSLATE_UP: Transform translate following movement on negative y axis.
• $drag.TRANSLATE_DOWN: Transform translate following movement on positive y axis.
• $drag.TRANSLATE_LEFT: Transform translate following movement on negative x axis.
• $drag.TRANSLATE_RIGHT: Transform translate following movement on positive x axis.
• $drag.TRANSLATE_VERTICAL: Transform translate following movement on y axis.

• $drag.TRANSLATE_INSIDE: 是一種應該向下面那樣應用的功能:

  {
    transform: $drag.TRANSLATE_INSIDE(myElement)
  }

 

　　他返回了一個轉化功能包含了在專遞的元素內部的變化

.ui-drag-move 風格

當給一個元素附加上.ui-drag-move的class是,這個class的樣式是經過insertRule去定義,而且致力於修復大部分拖動時出現的問題,尤爲是:

• 把元素拖到其餘元素以前
• 禁用轉化
• 使得文本不可選

注意變化不可用時由於他會引入transition: transform和dragOptions.transform功能的衝突.

完成拖動以後就會可用,這也將會用來實現一些優美的特效

若是你在活動中須要變化而不包括轉化,你能夠申請他們爲一個誒不或者包裝元素

例子

<div class="viewport">
  <div class="drag-area">
    <div drag-me="" class="drag-me">
      <i class="fa fa-arrows"></i>
    </div>    
  </div>
</div>

　　

app.directive('dragMe', ['$drag', function($drag){
  return {
    controller: function($scope, $element) {
      $drag.bind($element,
        {
          transform: $drag.TRANSLATE_INSIDE($element.parent()),
          end: function(drag) {
            drag.reset();
          }
        },
        { // release touch when movement is outside bounduaries
          sensitiveArea: $element.parent()
        }
      );
    }
  };
}]);

　　

.viewport {
  height: 100%; 
  width: 100%; 
  padding: 40px;
}

.drag-area {
  height: 100%; 
  width: 100%; 
  border: 1px solid #444; 
  position: relative;
}

.drag-me {
  height: 100px;
  width: 100px;
  border-radius: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px auto auto -50px;
  -webkit-transition: -webkit-transform 500ms;
  -ms-transition: -ms-transform 500ms;
  -moz-transition: -moz-transform 500ms;
  transition: transform 500ms;
  background-color: #d9edf7;
  border: 1px solid #31708f;
  color: #31708f;
  line-height: 95px;
  font-size: 30px;
  text-align: center;
  box-shadow: 1px 1px 1px #ccc;
  text-shadow: 1px 1px #fff;
}