Angular Mobile UI API文档

时间：2020-12-08 03:38:11

这个是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;

}

相关文章