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;
}