起手式、頁頭頁尾、頁面轉換特效

tags: `jQuery Mobile`

1.基本起手式
CSS與JS檔案從官網抓取，存放在電腦
要確認jQuery Mobile版本與jQuery版本是否相容(官網有寫)

2.確認封包images資料放入css資料夾中，3個jQuery檔案

程式碼如下























<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
	<script src="js/jquery-2.1.0.min.js"></script>
	<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
	<div data-role="page">
		<div data-role="header">
                    <!--頁首-->
		</div>
		<div role="main" class="ui-content">
                     <!--內容-->
		</div>
		<div data-role="footer">
                    <!--頁尾-->
		</div>
	</div>
</body>
</html>

練習:置底頁尾
加入 data-position="fixed" 程式碼在頁尾


<div data-role="footer" data-position="fixed">

練習:加入viewport(設定在head區域內)


<meta name="viewport" content="width=device-width,initial-scale=1">

練習:加入<datd-theme="b"> (預設是a灰色，b黑色，只有兩種顏色)







<!-- 頁首改為b黑色 -->
<div data-role="header" data-theme="b">	
</div>

<!-- 頁尾改為b黑色 -->
<div data-role="footer" data-position="fixed" data-theme="b">
</div>

練習:新增一個同樣式的產品頁面，並加上id屬性












<!-- 產品介紹 -->
<div data-role="page" id="product">
    <div data-role="header" data-theme="b">
        <h1>頁首</h1>
    </div>
    <div role="main" class="ui-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum maxime quis quam ad nesciunt explicabo sed ab in numquam amet voluptatem eaque porro neque quia, eveniet ipsum repellat quasi.</p>
    </div>
    <div data-role="footer" data-position="fixed" data-theme="b">
        <h6>頁尾</h6>
    </div>
</div>

練習:加入超連結，使用按鈕功能


<a href="#網址" data-role="button">產品介紹</a>





<div data-role="header" data-theme="b">
	<!-- 頁首超連結樣式jQuery會自動設定為按鈕樣式 -->
	<a href="#" data-rel="back" data-theme="a">Back</a>
	    <h1>產品介紹</h1>
</div>

實際完成顯示樣式:

練習:新增一頁加入圖片檔案

























<!-- 照片列表 -->
<div data-role="page" id="photo">
	<div data-role="header" data-theme="b">
		<a href="#" data-rel="back" data-theme="a">Back</a>
		<h1>照片列表</h1>
	</div>
	<div role="main" class="ui-content">
		<!-- 內容區塊 -->
		<img src="image/animals-01.jpg" alt="" width="32.5%">
		<img src="image/animals-02.jpg" alt="" width="32.5%">
		<img src="image/animals-05.jpg" alt="" width="32.5%">
		<img src="image/animals-04.jpg" alt="" width="32.5%">
		<img src="image/animals-08.jpg" alt="" width="32.5%">
		<img src="image/animals-04.jpg" alt="" width="32.5%">
		<img src="image/animals-05.jpg" alt="" width="32.5%">
		<img src="image/animals-09.jpg" alt="" width="32.5%">
		<img src="image/animals-06.jpg" alt="" width="32.5%">
		<img src="image/animals-10.jpg" alt="" width="32.5%">
		<img src="image/animals-11.jpg" alt="" width="32.5%">
		<img src="image/animals-12.jpg" alt="" width="32.5%">
	</div>
	<div data-role="footer" data-position="fixed" data-theme="b">
		<h6>頁尾</h6>
	</div>
</div>

練習:加入全螢幕功能(data-fullscreen="ture" 只能放在header內，header要有fixed屬性才能使用)


<div data-role="header" data-theme="b" data-position="fixed" data-fullscreen="ture">
</div>

練習:頁面轉換特效











<div data-transition="flip">
                     "fade"       //轉圈翻轉(左右)
                     "pop"        //刷淡顯示
                     "turn"        //左軸翻轉
                     "flow"        //縮小後右進左出
                     "slidefade"    //右進左出刷淡
                     "slide"        //右進左出
                     "slideup"      //向上滑入
                     "slidedown"    //向下滑入
                     "none"         //無動畫
</div>

練習:按鈕加入ICON圖案 (可參考官方文件，常用的圖示英文背起來)



<div data-icon="back">

</div>

起手式、頁頭頁尾、頁面轉換特效

tags: jQuery Mobile

Read more

短網址運作流程圖

Android Studio 複製專案，修改路徑位址

Android studio 安裝

Android Studio下拉式選單

tags: `jQuery Mobile`