移動端庫

標籤：單選框   很多   div   com   zepto   color   inline   參數   tst   

1. 移動端js事件

移動端的操作方式和PC端是不同的，移動端主要用手指操作，所以有特殊的touch事件，touch事件包括如下幾個事件：

1、touchstart: //手指放到螢幕上時觸發
2、touchmove: //手指在螢幕上滑動式觸發
3、touchend: //手指離開螢幕時觸發
4、touchcancel: //系統取消touch事件的時候觸發，比較少用

移動端一般有三種操作，點擊、滑動、拖動，這三種操作一般是組合使用上面的幾個事件來完成的，所有上面的4個事件一般很少單獨使用，一般是封裝使用來實現這三種操作，可以使用封裝成熟的js庫。

2. 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/

touch模組封裝了針對移動端常用的事件，可使用此模組進行移動端特定效果開發，這些事件有：

• tap 元素tap的時候觸發，此事件類別似click，但是比click快。
• longTap 當一個元素被按住超過750ms觸發。
• swipe, swipeLeft, swipeRight, swipeUp, swipeDown 當元素被划過時觸發。(可選擇給定的方向)

3. swiper

swiper.js是一款成熟穩定的應用於PC端和移動端的滑動效果外掛程式，一般用來觸屏焦點圖、觸屏整屏滾動等效果。 swiper分為2.x版本和3.x版本，2.x版本支援低版本瀏覽器(IE7)，3.x放棄支援低版本瀏覽器，適合應用在移動端。

2.x版本中文網址：http://2.swiper.com.cn/
3.x版本中文網地址：http://www.swiper.com.cn/

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使用參數：

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：是否首尾銜接
11、onSlideChangeEnd：回呼函數，滑動結束時執行

swiper製作執行個體：

1、swiper製作移動端焦點圖執行個體
2、swiper製作整頁滾動效果

4.bootstrap

簡單、直觀、強悍的前端開發架構，讓web開發更迅速、簡單。 來自Twitter，是目前很受歡迎的前端架構之一。 Bootrstrap是基於HTML、CSS、JavaScript的，讓書寫代碼更容易。 移動優先，響應式布局開發。

bootstrap中文網址：http://www.bootcss.com/

bootstrap 容器

• container-fluid 流體
• container
  • 1170
  • 970
  • 750
  • 100%

bootstrap 柵格系統

bootstrap將頁面橫向分為12等分，按照12等分定義了適應不同寬度等分的樣式類，這些樣式類組成了一套響應式、行動裝置優先的流式柵格系統：

1、col-lg-
2、col-md-
3、col-sm-
4、col-xs-

bootstrap響應式查詢區間：

1、大於等於768
2、大於等於992
3、大於等於1200

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 表單控制項組物件為按鈕的樣式
10、form-group-lg 大尺寸表單
11、form-group-sm 小尺寸表單

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 定義按鈕組

bootstrap 圖片

img-responsive 聲明響應式圖片

bootstrap 隱藏類

1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg

bootstrap 字型表徵圖

通過字型代替表徵圖，font檔案夾需要和css檔案夾在同一目錄

bootstrap 下拉式功能表

1、dropdown-toggle
2、dropdown-menu

bootstrap 選項卡

1、nav
2、nav-tabs
3、nav-pills
4、tab-content

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 定義導航條中的文本
9、navbar-left 菜單靠左
10、navbar-right 菜單靠右

bootstrap 模態框

1、modal 聲明一個模態框
2、modal-dialog 定義模態框尺寸
3、modal-lg 定義大尺寸模態框
4、modal-sm 定義小尺寸模態框
5、modal-header
6、modal-body
7、modal-footer

bootstrap 響應式專題網站執行個體

 

移動端庫