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