Web—08-移動端庫和框架
阿新 • • 發佈:2018-12-17
移動端js事件
移動端的操作方式和PC端是不同的,移動端主要用手指操作,所以有特殊的touch事件,touch事件包括如下幾個事件:
1、touchstart: //手指放到螢幕上時觸發
2、touchmove: //手指在螢幕上滑動式觸發
3、touchend: //手指離開螢幕時觸發
4、touchcancel: //系統取消touch事件的時候觸發,比較少用
移動端一般有三種操作,點選、滑動、拖動,這三種操作一般是組合使用上面的幾個事件來完成的,所有上面的4個事件一般很少單獨使用,一般是封裝使用來實現這三種操作,可以使用封裝成熟的js庫。
zeptojs
Zepto是一個輕量級的針對現代高階瀏覽器的JavaScript庫, 它與jquery有著類似的api。 如果你會用jquery,那麼你也會用zepto。Zepto的一些可選功能是專門針對移動端瀏覽器的;它的最初目標是在移動端提供一個精簡的類似jquery的js庫。
[zepto官網](http://zeptojs.com/)
[zepto中文api](http://www.css88.com/doc/zeptojs_api/)
zepto包含很多模組,預設下載版本包含的模組有Core, Ajax, Event, Form, IE模組,如果還需要其他的模組,可以自定義構建。
[zepto自定義構建地址](http://github.e-sites.nl/zeptobuilder/)
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> <!-- 如果頁面引用了jquery或者zepto,就引用 swiper.jquery.min.js,它的容量比swiper.min.js <script src="path/to/swiper.jquery.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使用引數:
1、initialSlide:初始索引值,從0開始
2、direction:滑動方向 horizontal | vertical
3、speed:滑動速度,單位ms
4、autoplay:設定自動播放及播放時間
5、autoplayDisableOnInteraction:使用者操作swipe後是否還自動播放,預設是true,不再自動播放
6、pagination:分頁圓點
7、paginationClickable:分頁圓點是否點選
8、prevButton:上一頁箭頭
9、nextButton:下一頁箭頭
10、loop:是否首尾銜接
bootstrap
簡單、直觀、強悍的前端開發框架,讓web開發更迅速、簡單。 來自Twitter,是目前很受歡迎的前端框架之一。 Bootrstrap是基於HTML、CSS、JavaScript的,讓書寫程式碼更容易。 移動優先,響應式佈局開發。
bootstrap 容器
container-fluid 流體
container
1170
970
750
100%
<div class="container-fluid">流體容器</div>
<div class="container">響應式固定容器</div>
bootstrap響應式查詢區間:
1、大於等於768
2、大於等於992
3、大於等於1200
bootstrap 柵格系統
bootstrap將頁面橫向分為12等分,按照12等分定義了適應不同寬度等分的樣式類,這些樣式類組成了一套響應式、移動裝置優先的流式柵格系統:
1、col-lg- 大於1200排成一行,小於1200分別佔一行
2、col-md- 大於992排成一行,小於992分別佔一行
3、col-sm- 大於768排成一行,小於768分別佔一行
4、col-xs- 始終排列成一行
<style type="text/css">
div[class*='col-']{
background-color:cyan;
border:1px solid #ddd;
height:50px;
}
</style>
......
<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-5">col-lg-5</div>
<div class="col-lg-1">col-lg-1</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
<br>
<br>
<div class="row">
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<br>
<br>
<div class="row">
<div class="col-xs-3">col-xs-3</div>
<div class="col-xs-3">col-xs-3</div>
<div class="col-xs-3">col-xs-3</div>
<div class="col-xs-3">col-xs-3</div>
</div>
</div>
列偏移
1、col-lg-offset-
2、col-md-offset-
3、col-sm-offset-
4、col-xs-offset-
bootstrap 按鈕
1、btn 宣告按鈕
2、btn-default 預設按鈕樣式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 寬度是父級寬100%的按鈕
13、active
14、disabled
15、btn-group 定義按鈕組
<!-- 一般按鈕組 -->
<div class="btn-group">
<input type="button" name="" value="按鈕一" class="btn btn-primary">
<input type="button" name="" value="按鈕二" class="btn btn-warning">
<input type="button" name="" value="按鈕三" class="btn btn-danger">
</div>
<!-- 通欄按鈕組
如果用input標籤做按鈕,需要將它用 btn-group的容器包起來
-->
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="button" name="" value="按鈕一" class="btn btn-primary">
</div>
<div class="btn-group">
<input type="button" name="" value="按鈕二" class="btn btn-warning">
</div>
<div class="btn-group">
<input type="button" name="" value="按鈕三" class="btn btn-danger">
</div>
</div>
<!-- 通欄按鈕組,如果用a標籤做按鈕,就不用上面的結構,直接寫
-->
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">按鈕一</a>
<a href="#" class="btn btn-default">按鈕二</a>
<a href="#" class="btn btn-default">按鈕三</a>
</div>
bootstrap 表單
1、form 宣告一個表單域
2、form-inline 內聯表單域
3、form-horizontal 水平排列表單域
4、form-group 表單組、包括表單文字和表單控制元件
5、form-control 文字輸入框、下拉列表控制元件樣式
6、checkbox checkbox-inline 多選框樣式
7、radio radio-inline 單選框樣式
8、input-group 表單控制元件組
9、input-group-addon 表單控制元件組物件樣式
10、input-group-btn 表單控制元件組物件為按鈕的樣式
11、form-group-lg 大尺寸表單
12、form-group-sm 小尺寸表單
<!-- 表單 -->
<form role="form">
<div class="form-group form-group-lg">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter 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>
</form>
<!-- 表單控制元件組 -->
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">@</span>
</div>
<!-- 表單控制元件組 -->
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
bootstrap 圖片
img-responsive 宣告響應式圖片
bootstrap 字型圖示
通過字型代替圖示,font資料夾需要和css資料夾在同一目錄
bootstrap 導航條
1、navbar 宣告導航條
2、navbar-default 宣告預設的導航條樣式
3、navbar-inverse 宣告反白的導航條樣式
4、navbar-static-top 去掉導航條的圓角
5、navbar-fixed-top 固定到頂部的導航條
6、navbar-fixed-bottom 固定到底部的導航條
7、navbar-header 申明logo的容器
8、navbar-brand 針對logo等固定內容的樣式
11、nav navbar-nav 定義導航條中的選單
12、navbar-form 定義導航條中的表單
13、navbar-btn 定義導航條中的按鈕
14、navbar-text 定義導航條中的文字
15、navbar-left 選單靠左
16、navbar-right 選單靠右
<!-- 可伸縮選單 data-target="#.." 需要加# -->
<div class="navbar navbar-inverse navbar-static-top ">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="mymenu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">公司新聞</a></li>
<li><a href="#">行業動態</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
路徑導航
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
巨幕
<div class="jumbotron">
<div class="container">
...
</div>
</div>
bootstrap 模態框
1、modal 宣告一個模態框
2、modal-dialog 定義模態框尺寸
3、modal-lg 定義大尺寸模態框
4、modal-sm 定義小尺寸模態框
5、modal-header
6、modal-body
7、modal-footer
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">大彈出框按鈕</button>
<div class="modal fade" id="mymodal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
大尺寸彈出框
</div>
<div class="modal-body">
模態框主體
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
bootstrap 下拉選單
1、dropdown-toggle
2、dropdown-menu
<div class="row">
<div class="dropdown">
<div class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
下拉選單
<span class="caret"></span>
</div>
<ul class="dropdown-menu">
<li><a href="#">選單一</a></li>
<li><a href="#">選單二</a></li>
<li><a href="#">選單三</a></li>
</ul>
</div>
</div>
bootstrap 隱藏類
1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg