jquery mobile 學習總結

時間  2019-11-18
標籤 jquery mobile 學習 總結 欄目 JQuery 简体版
原文   原文鏈接

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>index.html</title><!--初始化顯示，可視窗寬度與設備寬度一致；不容許縮放-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.css">
<script src="js/jquery-1.11.1.js"></script><!--注意順序：css-jq-jq mobile，jq必須是1.8版本之後-->
<script src="js/jquery.mobile-1.4.3.js"></script>
<script>
$(document).on("pageinit","#index",function(){
$("#ajaxBtn").on("click",function(){
$.mobile.loading("show");//點擊請求以後，顯示正在加載的圖標
$.ajax({
type:"get",
url:"http://crossorigin.me/http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeDataSetByLikeTrainCode?TrainCode=G1&UserID=",

success:function(data){
console.log(data);
$.mobile.loading("hide"); //成功以後將圖標隱藏
}javascript

});
});
});

</script>
</head>
<body> <!-- //data屬性用於建立外觀
在一個html中能夠建立多個頁面，經過id分隔每一個頁面，用href屬性連接彼此。-->
<!--data-transition="";設置過渡效果，屬性值：slide：右到左（默認）；slideup：向上滑動；slidedown：向下滑動；none：沒有效果 -->
<div data-role="page" id="index" data-transition="slide"> <!-- index表明首頁，默認顯示 -->
<div data-role="header" >
<h1>我是標題1</h1>
<div data-role="navbar">
<ul>
<li><a href="###" data-icon="camera">首頁</a></li>
<li><a href="###" data-icon="carat-l">搜索</a></li>
<li><a href="###" data-icon="carat-r">查詢</a></li>
</ul>
</div>
</div>
<div role="main" class="ui-content" >
<!--<p><a href="#index2">我是內容1</a></p>
<ul data-role="listview" data-inset="true">
<li><a href="###">
<h3>G次</h3>
<p>南寧-廣州</p>
<p class="ui-li-aside">9:00開</p>
</a></li>
<li><a href="###">項目2</a></li>
<li><a href="###">項目3</a></li>
<li><a href="###">項目4</a></li>
</ul>
<form action="###">
<div class="ui-field-contain">
<label for="start">發車站</label>
<input type="text" name="start" id="start">
</div>
<div class="ui-field-contain">
<label for="end">終點站</label>
<input type="text" name="end" id="end">
</div>
<div class="ui-field-contain">
<label for="num">車次</label>
<input type="text" name="num" id="num">
</div>
</form>css

<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th>姓名</th>
<th>數學</th>
<th>語文</th>
<th>英語</th>
</tr>
</thead>
<tbody>
<tr>
<td>小紅</td>
<td>90</td>
<td>86</td>
<td>78</td>
</tr>
<tr>
<td>小明</td>
<td>99</td>
<td>80</td>
<td>60</td>
</tr>
</tbody>
</table>
</div>-->
<div data-role="footer">
<h1>我是頁腳1</h1>
<div data-role="navbar">
<ul>
<li><a href="javascript:void(0)">查詢</a></li>
<li><a href="javascript:void(0)">收藏</a></li>
<li><a href="javascript:void(0)">設置</a></li>
</ul>
</div>
</div>html

<input type="button" value="點我加載" id="ajaxBtn">java

</div>jquery

<div data-role="page" id="index2">
<div data-role="header" > <!-- index表明首頁，默認顯示 -->
<h1>我是標題2</h1>
</div>
<div role="mail" class="ui-content" >
<p><a href="#index">我是內容2</a></p>
</div>
<div data-role="footer">
<h1>我是頁腳2</h1>
</div>
</div>web

</body>
</html>
1、jquery mobile頁面事件：
頁面初始化事件：
pageboforecreate: 頁面即將初始化的時候
pagecreate 頁面已經建立，可是尚未加載元素以前
pageinit 頁面完成了全部dom的加載以後ajax

頁面加載事件：
pageboforeload 頁面加載請求以前
pageload 加載成功，並插入到dom中json

頁面過渡事件：page transition (假如從頁面a過渡到頁面b,那麼執行順序爲2 4 3 1)
pageboforeshow:2在過渡動畫開始以前
pageshow 4 :過渡動畫完成以後
pageboforehide:1
pagehide:3跨域

區別：
pageinit:頁面初始化時，只執行一次
pageshow:頁面顯示的時候每次都會執行服務器

2、按鈕：
建立按鈕：
若是是a button input則添加class="ui-btn"
若是是其它元素，則添加data-role="button"
<a class="ui-btn ui-btn-inline ui-btn-a">點擊</a>
<input type="submit" value="按鈕"> input已經默認是按鈕，而且已經默認有圓角和陰影，其它則沒有。

按鈕樣式：
ui-corner-all圓角
ui-shadow 陰影
ui-btn-inline 並排顯示
ui-btn-a 換皮膚
ui-btn-b 換皮膚

3、導航欄（導航欄有一組水平排列的連接構成，一般位於頁眉或者頁腳）
一、使用data-role="navbar",導航欄中的連接會自動轉換爲按鈕。
二、在頁眉和頁腳中使用data-position="fixed",導航欄就會固定在上部和下部，不隨滾動滾動。
三、導航欄若是5個之內就會顯示在同一排，查過5個，就會分紅多。
四、給導航欄增長圖標：data-icon="",默認在文字上方，具體樣式可參考官方文檔。

<div data-role="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="###" data-icon="carat-l">首頁</a></li>
<li><a href="###" data-icon="carat-r">搜索</a></li>
<li><a href="###" data-icon="camera">查詢</a></li>
</ul>
</div>
</div>

4、列表
只須要在ul、ol中使用data-role="listview",就會自動變成有樣式的列表，若是使用data-inset="true",四周就會自動增長外邊距。
添加class="ui-li-aside"，就會顯示到右上角。
<div role="main" class="ui-content" >
<p><a href="#index2">我是內容1</a></p>
<ul data-role="listview" data-inset="true">
<li><a href="###"><p class="ui-li-aside">9:00開</p></a></li>
<li><a href="###">項目2</a></li>
<li><a href="###">項目3</a></li>
<li><a href="###">項目4</a></li>

</ul>
</div>

5、表單
一、每一個input都要有一個label，一個name和一個id。
二、爲每個input增長class="ui-field-contain",就可讓表單自適應。
<form action="###" methor="post" id="myForm">
<div class="ui-field-contain">
<label for="start">發車站</label>
<input type="text" name="start" id="start">
</div>
<div class="ui-field-contain">
<label for="end">終點站</label>
<input type="text" name="end" id="end">
</div>
<div class="ui-field-contain">
<label for="num">車次</label>
<input type="text" name="num" id="num">
</div>
</form>

6、表格
迴流表格: <table data-role="table" data-mode="reflow" class="ui-responsive" ></table>
再添加一個class="table-stroke",就會自動增長下劃線。

<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th>姓名</th>
<th>數學</th>
<th>語文</th>
<th>英語</th>
</tr>
</thead>
<tbody>
<tr>
<td>小紅</td>
<td>90</td>
<td>86</td>
<td>78</td>
</tr>
<tr>
<td>小明</td>
<td>99</td>
<td>80</td>
<td>60</td>
</tr>
</tbody>
</table>

7、事件
jq-mobile中可使用jq中任何標準的jq事件，此外還有一些專門爲移動瀏覽定製的事件。
觸摸事件：
touch（用戶在觸摸屏幕時發生）
tap(用戶在短暫敲擊某個元素時觸發)
taphold（用戶在敲擊某個元素並保持一秒以上時觸發，即長按）
swipe：在某個元素上水平滑動超過30px時觸發

滾動事件：上下滾動時 scrollstart（開始滾動頁面時）scrollstop(中止滾動時)
方向事件：垂直或水平旋轉
頁面事件：頁面被顯示、隱藏、建立、加載或卸載時
pageinit（初始化完成）
pageload（加載完成）
pageshow（顯示完成）

注意：在jq中使用$(document).ready(function(){});
在jq mobile中使用$(document).on("pageinit","#page",function(){});
表示頁面已經初始化並完善樣式設置後發生

8、ajax
跨域問題：若是能夠修改後臺的話，返回格式爲：jsonp；並添加參數：callback=xxx;服務器返回xxx(...);
若是沒辦法修改後臺，可使用其餘的跨域中轉如：http://crossorigin.me/和http://atcors.herokuapp.com/；
<input type="button" value="點我加載" id="ajaxBtn">
<script>
$(document).on("pageinit","#index",function(){//參數1：初始化完成後，參數2：某個頁面的id；參數3：回調函數
$("#ajaxBtn").on("click",function(){
$.mobile.loading("show");//點擊請求以後，顯示正在加載的圖標
$.ajax({
type:"get",
url:"http://crossorigin.me/http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeDataSetByLikeTrainCode?TrainCode=G1&UserID=",
success:function(data){
console.log(data);
$.mobile.loading("hide"); //成功以後將圖標隱藏
}

}); }); });</script>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程