jQuery Mobile學習--第一篇
阿新 • • 發佈：2019-02-08
一、引用
1、從CDN引用
<head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head>
2、下載
<head>
<link rel=stylesheet href=jquery.mobile-1.3.2.css>
<script src=jquery.js></script>
<script src=jquery.mobile-1.3.2.js></script>
</head>二、頁面
例：
<body> <div data-role="page"> <div data-role="header"> <h1>歡迎訪問我的主頁</h1> </div> <div data-role="content"> <p>我是一名移動開發者！</p> </div> <div data-role="footer"> <h1>頁尾文字</h1> </div> </div> </body>
說明：
- data-role="page" 是顯示在瀏覽器中的頁面
- data-role="header" 建立頁面上方的工具欄（常用於標題和搜尋按鈕）
- data-role="content" 定義頁面的內容，比如文字、影象、表單和按鈕，等等
- data-role="footer" 建立頁面底部的工具欄
- 只要把容器寫好，裡面的內容就可以隨意添加了
在一個HTML檔案中可以建立多個頁面，只需要給page的不同的id即可，如下
<div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo">轉到頁面二</a> </div> </div>
三、過渡效果
格式：
<a href="#anylink" data-transition="slide">滑動到頁面二</a>相關效果：
fade:預設。淡入淡出到下一頁。flip:從後向前翻動到下一頁。
flow:丟擲當前頁面，引入下一頁。
pop:像彈出視窗那樣轉到下一頁。
slide:從右向左滑動到下一頁。
slidefade:從右向左滑動並淡入到下一頁。
slideup:從下到上滑動到下一頁。
slidedown:從上到下滑動到下一頁。
turn:轉向下一頁。
none:無過渡效果。
四、按鈕
<button></button>、<input>、<a href="#pageone" data-role="button">
button和input一般用於表單提交， data-role="button"用於建立頁面之間的連結