移动端js事件以及相关库
2018-09-24 本文已影响25人
凌屿
移动端js事件
移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：
- touchstart: //手指放到屏幕上时触发
- touchmove: //手指在屏幕上滑动式触发
- touchend: //手指离开屏幕时触发
- touchcancel: //系统取消touch事件的时候触发，比较少用
- 移动端一般有三种操作，点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库。
zeptojs
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库。
- touch模块封装了针对移动端常用的事件，可使用此模块进行移动端特定效果开发，这些事件有：
- tap 元素tap的时候触发，此事件类似click，但是比click快。
- longTap 当一个元素被按住超过750ms触发。
- swipe, swipeLeft, swipeRight, swipeUp, swipeDown 当元素被划过时触发。(可选择给定的方向)
swiper
swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。 swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)，3.x放弃支持低版本浏览器，适合应用在移动端。
swiper使用方法：
<script type="text/javascript" src="js/swiper.min.js"></script>
......
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
initialSlide :1,
paginationClickable: true,
loop: true,
autoplay:3000,
autoplayDisableOnInteraction:false
});
</script>
swiper使用参数：
- initialSlide：初始索引值，从0开始
- direction：滑动方向 horizontal | vertical
- speed：滑动速度，单位ms
- autoplay：设置自动播放及播放时间
- autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
- pagination：分页圆点
- paginationClickable：分页圆点是否点击
- prevButton：上一页箭头
- nextButton：下一页箭头
- loop：是否首尾衔接
- onSlideChangeEnd：回调函数，滑动结束时执行
bootstrap
简单、直观、强悍的前端开发框架，让web开发更迅速、简单。 来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。 移动优先，响应式布局开发。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container" style="background:gold;">固定宽度的容器</div>
<br>
<br>
<div class="container-fluid" style="background:gold;">流体布局的容器</div>
</body>
</html>
bootstrap 容器
- container-fluid 流体
- container
- 1170
- 970
- 750
- 100%
bootstrap 栅格系统
bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：
- col-lg-
- col-md-
- col-sm-
- col-xs-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>栅格系统</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
div[class*='col-']{
height: 50px;
border: 1px solid black;
background-color: gold;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container" style="background: cyan;">
container样式左右有15px的padding
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<br>
<br>
<div class="row">
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<br>
<br>
<div class="row">
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-7">col-xs-7</div>
<div class="col-xs-4">col-xs-4</div>
</div>
</div>
</body>
</html>
bootstrap响应式查询区间：
- 大于等于768
- 大于等于992
- 大于等于1200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.container{
background-color: cyan;
}
.pic{
height: 200px;
max-width: 200px;
background-color: gold;
border: 1px solid black;
margin: 0 auto 20px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="pic"></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="pic"></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="pic"></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="pic"></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="pic"></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="pic"></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="pic"></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="pic"></div>
</div>
</div>
</div>
</body>
</html>
bootstrap 表单:
- form 声明一个表单域
- form-inline 内联表单域
- form-horizontal 水平排列表单域
- form-group 表单组、包括表单文字和表单控件
- form-control 文本输入框、下拉列表控件样式
- checkbox checkbox-inline 多选框样式
- radio radio-inline 单选框样式
- input-group 表单控件组
- input-group-addon 表单控件组物件样式 10、input-group-btn 表单控件组物件为按钮的样式
- form-group-lg 大尺寸表单
- form-group-sm 小尺寸表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<!--
<div class="container">
<h1>表单</h1>
<div class="form">
<div class="form-group">
<label for="">姓名</label>
<input type="text" class="form-control" id="" placeholder="姓名">
</div>
<div class="form-group">
<label for="">密码</label>
<input type="password" class="form-control" id="" placeholder="密码">
</div>
</div>
<br>
<br>
<h1>表单</h1>
<div class="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
<br>
<br>
<div class="container">
<h1>内联表单域</h1>
<div class="form-inline">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
<br>
<br>
<div class="container">
<h1>水平排列的表单</h1>
<div class="form-horizontal">
<div class="form-group">
<label for="exampleInputEmail1" class="col-xs-2">Email address</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</div>
</div>
</div>
-->
<br>
<br>
<div class="container">
<h1>表单控件组</h1>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon1">@</span>
</div>
</div>
<br>
<br>
<div class="container">
<h1>按钮表单控件组</h1>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-btn" id="basic-addon1">
<button class="btn btn-primary">go</button>
</span>
</div>
</div>
<br>
<br>
<div class="container">
<h1>字体图标表单控件组</h1>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-btn" id="basic-addon1">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-repeat"></span>
</button>
</span>
</div>
</div>
</body>
</html>
bootstrap 按钮
- btn 声明按钮
- btn-default 默认按钮样式
- btn-primay
- btn-success
- btn-info
- btn-warning
- btn-danger
- btn-link
- btn-lg
- btn-md
- btn-xs
- btn-block 宽度是父级宽100%的按钮
- active
- disabled
- btn-group 定义按钮组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<h1>按钮</h1>
<button class="btn btn-default btn-lg">button按钮</button>
<input type="button" class="btn btn-primary btn-sm" value="input按钮">
<a href="#" class="btn btn-success btn-xs">a标签按钮</a>
<a href="#" class="btn btn-info">a标签按钮</a>
<a href="#" class="btn btn-warning">a标签按钮</a>
<a href="#" class="btn btn-danger">a标签按钮</a>
</div>
<br>
<br>
<div class="container">
<button class="btn btn-success btn-block">通栏按钮</button>
</div>
<br>
<br>
<!-- 按钮组 -->
<div class="container">
<div class="btn-group">
<a href="#" class="btn btn-info">按钮01</a>
<a href="#" class="btn btn-warning">按钮02</a>
<a href="#" class="btn btn-danger">按钮03</a>
</div>
</div>
<br>
<br>
<!-- 通栏按钮组，用于选项卡切换 -->
<div class="container">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-info">按钮01</a>
<a href="#" class="btn btn-warning" style="margin: 10px;">按钮02</a>
<a href="#" class="btn btn-danger">按钮03</a>
</div>
</div>
<br>
<br>
<!-- 通栏按钮组用input标签做的话，要在每个外面包一层btn-group -->
<div class="container">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="button" class="btn btn-primary" value="按钮一">
</div>
<div class="btn-group">
<input type="button" class="btn btn-warning" value="按钮二">
</div>
<div class="btn-group">
<input type="button" class="btn btn-danger" value="按钮三">
</div>
</div>
</div>
</body>
</html>
bootstrap 图片
- img-responsive 声明响应式图片
bootstrap 隐藏类
- hidden-xs
- hidden-sm
- hidden-md
- hidden-lg
bootstrap 字体图标
- 通过字体代替图标，font文件夹需要和css文件夹在同一目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.glyphicon-music{
color: yellow;
font-size: 20px;
}
.edit{
color: red;
font-size: 20px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<h1>字体图标</h1>
<button class="btn btn-primary">
音乐
<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
</button>
<br>
<br>
<p><span class="glyphicon glyphicon-pencil edit" aria-hidden="true"></span>这是一个段落</p>
</div>
</body>
</html>
bootstrap 下拉菜单
- dropdown-toggle
- dropdown-menu
bootstrap 选项卡
- nav
- nav-tabs
- nav-pills
- tab-content
bootstrap 导航条
- navbar 声明导航条
- navbar-default 声明默认的导航条样式
- navbar-inverse 声明反白的导航条样式
- navbar-static-top 去掉导航条的圆角
- navbar-fixed-top 固定到顶部的导航条
- navbar-fixed-bottom 固定到底部的导航条
- navbar-header 申明logo的容器
- navbar-brand 针对logo等固定内容的样式
- navbar-left 菜单靠左
- navbar-right 菜单靠右
- nav navbar-nav 定义导航条中的菜单
- navbar-form 定义导航条中的表单
- navbar-btn 定义导航条中的按钮
- navbar-text 定义导航条中的文本
bootstrap 模态框
- modal 声明一个模态框
- modal-dialog 定义模态框尺寸
- modal-lg 定义大尺寸模态框
- modal-sm 定义小尺寸模态框
- modal-header
- modal-body
- modal-footer
