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

tags: `jQuery Mobile`

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

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

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

程式碼如下























<!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>

實際完成顯示樣式:

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

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

























<!-- 照片列表 -->
<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`