移动端框架 （2019.4.3）
一、 移动端js库了解
jquery
jqueryUI
bootstrap 栅格结构
layUI
amazeUI
zepto
hammer
jquery mobile
二、 hammer.js
1．简介
用于检测触摸手势的 JavaScript 库
添加对触摸手势的支持并移除了点击的 300ms
支持最常见的单点和多点触摸手势，并且可以完全扩展以添加自定义手势
[图片上传中...(image.png-f6f032-1554773291083-0)]
2．CDN
<u>https://cdnjs.com/libraries/hammer.js</u>
3．主要事件
1) tap
在指定的 DOM 区域内，一个手指轻拍或点击时触发该事件（类似 PC 端的 click），该事件最大点击时间为 250ms，如果超过 250ms 则按 press 事件处理
2) press
在指定的 DOM 区域内，这个事件相当于 PC 端的 Click 事件，不能包含任何的移动，最小按压时间为 500ms，常用于我们在手机上用的复制粘贴等功能
该事件事分别对以下事件进行监听并处理
pressup: 点击事件离开时触发
3) pan
在指定的 DOM 区域内，一个手指放下并移动事件，即触屏中的拖动事件
该事件事分别对以下事件进行监听并处理
panstart: 拖动开始
panmove: 拖动过程
panend: 拖动结束
pancancel: 拖动取消
panleft: 向左拖动
panright: 向右拖动
panup: 向上拖动
pandown: 向下拖动
4) swipe
在指定的 DOM 区域内，一个手指快速的在触屏上滑动，即平时用到最多的滑动事件
该事件事分别对以下事件进行监听并处理
swipeleft: 向左滑动
swiperight: 向右滑动
swipeup: 向上滑动
swipedown: 向下滑动
5) pinch
在指定的 DOM 区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件
该事件事分别对以下事件进行监听并处理
pinchstart: 多点触控开始
pinchmove: 多点触控过程
pinchend: 多点触控结束
pinchcancel: 多点触控取消
pinchin: 多点触控时两手指越来越近
pinchout: 多点触控时两手指越来越远
6) rotate
在指定的 DOM 区域内，当两个手指或更多手指呈圆型旋转时触发
该事件事分别对以下事件进行监听并处理
rotatestart: 旋转开始
rotatemove: 旋转过程
rotateend: 旋转结束
rotatecancel: 旋转取消
4．使用
const app = document.querySelector('#app');
const hammertime = new Hammer(app);
hammertime.on('pan', function(ev) {
console.log(ev);
});
1) 默认禁用pinch 和rotate
hammer.js 提供了 tap, doubletap, press, horizontal pan, swipe 和多点触控的 pinch, rotate，默认情况下 pinch 与 rotate 是禁用的，因为它们会阻塞元素，可以通过以下命令来启用。
hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });
2) pan与swipe的垂直方向是禁用的
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
尽量避免使用垂直方向的pan与swipe。垂直 pan 用于滚动页面，一些（旧）浏览器不会触发这个事件，所以 hammer.js 无法识别。
3) 删除 Windows Phone 上的突出显示
Windows Phone 上的 IE10 和 IE11 在点击某个元素时会突出显示一个小点，添加这个 meta 来删除。
<meta name="msapplication-tap-highlight" content="no" />
4) 需要选择文本
hammer.js 会设置 user-select 来提高 PC 的平移体验，如果需要文本选择，需要在创建实例前执行此操作。
delete Hammer.defaults.cssProps.userSelect;
5．事件对象
image.png
image.png
三、 zepto.js
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。
[<u>https://github.com/madrobby/zepto</u>](https://github.com/madrobby/zepto)
1．$.contains(parent,child)
检查父节点是否包含给定的dom节点，如果两者是相同的节点，则返回 false。
注意：传入的参数不是zepto对象。而是一个原生的js dom对象。
可以使用zepto对象的0下标产生原生dom对象。
alert($.contains($('.se')[0],$('#nav')[0]));
2．$.extend
通过源对象扩展目标对象的属性，源对象属性将覆盖目标对象属性。
默认情况下为，复制为浅拷贝（浅复制）。如果第一个参数为true表示深度拷贝（深度复制）。
$.extend(true, target, [source, ...])
对象数组默认的是浅拷贝，如果改变最外层数据的类型，那么就变成深拷贝。如果改变的是里面的内容，那么是浅拷贝。
四、 Jquery Mobile
1．data角色
data-role="page" 是在浏览器中显示的页面。同一个页面可以具有多个page，可以使用锚点技术进行跳转。
data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。
"ui-content" 类用于在页面添加内边距和外边距。
data-role="footer" 用于创建页面底部工具条。
1) page角色可以用作为弹出框（对话框）。
只需要设置data-dialog=true .
2．过度
image.png
<a href="#anylink" data-transition="slide">切换到第二个页面</a>
3．按钮
1) 创建方式：
使用 <button> 元素
使用 <input> 元素
使用带有 data-role="button" 的 <a> 元素
设置元素的class=”ui-btn”
2) 设置按钮为行内
设置data-inline=“true”
与class=”ui-btn ui-btn-inline”
3) 返回按钮
在按钮上设置 data-rel="back"
4) 修改按钮的颜色
class=“ui-btn-b”可以设置按钮的颜色为黑色。字体为白色。
5) 为按钮添加圆角
默认情况下 <input> 按钮有圆角及阴影效果。 <a> 和 <button> 元素没有。
class=“ui-corner-all”
6) 小一号的按钮
设置class=“ui-mini”
7) 为按钮添加阴影
设置class=“ui-shadow”
4．按钮图标
1) 设置方式
设置类为ui-icon-* 针对a标签与button
data-icon=“search” 针对input a标签以及li
icon的种类：
点击转至页面查看：http://www.runoob.com/jquerymobile/jquerymobile-ref-icons.html
2) 定位图标
您也可以规定图标定位在按钮的什么部位：顶部（top）、右侧（right）、底部（bottom）、左侧（left）。
请使用 ui-btn-icon 属性来指定位置：ui-btn-icon-*
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">顶部</a>
3) 如果只需要图标，不需要文字
设置class 为 ui-btn-icon-notext
4) 移出圆圈
默认情况下，所有的图标都有一个灰色的圆圈。如果你不需要它，可以在元素中使用 "ui-nodisc-icon" 类：
5) 设置没有文本的圆型图标
设置class 为 ui-corner-all
6) 使用黑色图标
设置class 为 ui-alt-icon
5．弹窗
创建一个弹窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性， <div> 元素添加 data-role="popup" 属性。 接着我们为 <div> 指定 id， 然后设置 <a> 的 href 值为 <div> 指定的 id。 <div> 中的内容为弹窗显示的内容。
注意: <div> 弹窗与点击的 <a> 链接必须在同一个页面上。
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>
<div data-role="popup" id="myPopup">
<p>这是一个简单的弹窗</p>
</div>
1) 添加边距
如果你需要为弹窗添加内边距与外边距可以在 <div> 中添加 "ui-content" 类:
2) 添加关闭按钮
默认情况下，点击弹窗之外的区域或按下 "Esc" 键即可关闭弹窗。 如果你不想点击弹窗之外的区域关闭弹窗可以在添加上添加 data-dismissible="false" 属性（不推荐）。 你也可以在弹窗上添加关闭按钮，按钮上使用 data-rel="back" 属性，并通过样式来控制按钮的位置。
右侧关闭：
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
左侧关闭：
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-left">关闭</a>
data-dismissible=“false” 点击弹窗外不关闭弹窗。
3) 定位弹窗
默认情况下，弹窗会直接显示在点击元素的上方，如果需要控制弹窗的位置，可以在用于打开弹窗的点击链接上使用 data-position-to 属性。
image.png
4) 过渡
默认情况下，弹窗是没有过渡效果的。如果你需要你可以通过 data-transition="value" 属性来添加过渡效果
5) 弹窗对话框开口方向
如果需要添加弹窗方向小边框，可以使用 data-arrow 属性，并指定值 "l" (左边), "t" (顶部), "r" (右边) or "b" (底部):
<a href="#myPopup" data-rel="popup" class="ui-btn">打开弹窗</a>
<div data-role="popup" id="myPopup" class="ui-content" data-arrow="l">
<p>左边框的方向。</p>
</div>
6) 弹窗的背景覆盖
你可以使用 data-overlay-theme 属性在弹窗后添加背景颜色。
默认情况下覆盖的背景色的透明的。使用 data-overlay-theme="a" 添加浅色背景，使用 data-overlay-theme="b" 添加深色的覆盖背景：
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup" data-overlay-theme="b">
<p>在我身后有个深色背景。</p>
</div>
6．工具栏
1) 头部栏
头部栏一般包含页面标题/logo 或一两个按钮（通常是首页、选项或搜索）。
您可以添加按钮到头部的左侧或右侧。
头部可以包含一个或两个按钮，而尾部没有限制。
可以使用ui-btn-left 或者ui-btn-right改变按钮的位置。
如果是一个按钮默认在左边，俩个按钮默认一左一右。
2) 尾部
尾部栏比头部栏更灵活 - 在整个页面中它们更具功能性和可变性，因此可以包含尽可能多的按钮。
尾部的样式与头部不同（没有内边距和空间，且按钮不居中）。居中可以设置父标签内容居中。
您还可以将尾部中的按钮进行水平或垂直组合：
<div data-role="footer" style="text-align:center;">
<div **data-role="controlgroup" data-type="horizontal"****>**
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a>
</div>
</div>
3) 定位
Inline - 默认。头部栏和尾部栏与页面内容内联。
Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕，这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下。
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
