分享一個jquerymobile案例
<!DOCTYPE html>
<html lang="en" manifest="manifest.php">
<head>
<meta charset="UTF-8">
<title>作品</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../style/jquery.mobile-1.4.5.min.css" type="text/css"/>
<link rel="stylesheet" href="../style/index.css"/>
<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
</head>
<body>
<!--主頁-->
<div data-role="page" id="home">
<div data-role="content">
<p></p>
<h3 id="douban_title">豆瓣音樂app</h3>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="" data-role="button" >QQ</a>
</div>
<div class="ui-block-b">
<a href="" data-role="button" >新浪微博</a>
</div>
<div class="ui-block-a">
<a href="" data-role="button" >微信</a>
</div>
<div class="ui-block-b">
<a href="" data-role="button" >微信</a>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-id="toolbar">
<div data-role="navbar">
<ul>
<li>
<a href="#home" data-icon="home" data-transition="fade" class="ui-btn-active">home</a>
</li>
<li>
<a href="#sessions" data-icon="grid" data-transition="fade" >sessions</a>
</li>
<li>
<a href="#where" data-icon="info" data-transition="fade">where</a>
</li>
<li>
<a href="#about" data-icon="star" data-transition="fade">about</a>
</li>
<li>
<a href="../html/feedback.html" data-icon="plus" data-rel="dialog">feedback</a>
</li>
</ul>
</div>
</div>
</div>
<!--會議列表項-->
<div data-role="page" id="sessions">
<div data-role="header">
<h2>sessions</h2>
<a href="" data-icon="refresh" id="refresh" class="ui-btn-left" data-iconpos="notext"></a><!--data-iconpos="notext" 純圖標按鈕-->
</div>
<div data-role="content">
<p id="console"></p>
<ul data-role="list-view" data-inset="true" id="slots">
</ul>
</div>
<div data-role="footer" data-position="fixed" data-id="toolbar">
<div data-role="navbar">
<ul>
<li>
<a href="#home" data-icon="home" data-transition="fade" class="ui-btn-active">home</a>
</li>
<li>
<a href="#sessions" data-icon="grid" data-transition="fade" >sessions</a>
</li>
<li>
<a href="#where" data-icon="info" data-transition="fade">where</a>
</li>
<li>
<a href="#about" data-icon="star" data-transition="fade">about</a>
</li>
<li>
<a href="../html/feedback.html" data-icon="plus" data-rel="dialog">feedback</a>
</li>
</ul>
</div>
</div>
</div>
<!--會議詳細內容-->
<div data-role="page" id="details" data-add-back-btn="true">
<div data-role="header">
<h1>Sessions Details</h1>
</div>
<div data-role="content">
<div id="sessionInfo"></div>
</div>
<div data-role="footer" data-position="fixed" data-id="toolbar">
<div data-role="navbar">
<ul>
<li>
<a href="#home" data-icon="home" data-transition="fade" class="ui-btn-active">home</a>
</li>
<li>
<a href="#sessions" data-icon="grid" data-transition="fade" >sessions</a>
</li>
<li>
<a href="#where" data-icon="info" data-transition="fade">where</a>
</li>
<li>
<a href="#about" data-icon="star" data-transition="fade">about</a>
</li>
<li>
<a href="../html/feedback.html" data-icon="plus" data-rel="dialog">feedback</a>
</li>
</ul>
</div>
</div>
</div>
<!--位置頁面-->
<div data-role="page" id="where">
<div data-role="header">
<h1>Where</h1>
</div>
<div data-role="content">
content
</div>
<div data-role="footer" data-position="fixed" data-id="toolbar">
<div data-role="navbar">
<ul>
<li>
<a href="#home" data-icon="home" data-transition="fade" class="ui-btn-active">home</a>
</li>
<li>
<a href="#sessions" data-icon="grid" data-transition="fade" >sessions</a>
</li>
<li>
<a href="#where" data-icon="info" data-transition="fade">where</a>
</li>
<li>
<a href="#about" data-icon="star" data-transition="fade">about</a>
</li>
<li>
<a href="../html/feedback.html" data-icon="plus" data-rel="dialog">feedback</a>
</li>
</ul>
</div>
</div>
</div>
<!--關于內容-->
<div data-role="page" id="about">
<div data-role="header">
<h1>about</h1>
</div>
<div data-role="content">
<div data-role="collapsible">
<h3>Orgnization</h3>
<p>This congress is organized by ACME </p>
</div>
<div data-role="collapsible">
<h3>History<</h3>
<p>First edition of this congress was.......</p>
</div>
<div data-role="collapsible">
<h3>Sponsors</h3>
</div>
</div>
<div data-role="footer" data-position="fixed" data-id="toolbar">
<div data-role="navbar">
<ul>
<li>
<a href="#home" data-icon="home" data-transition="fade" class="ui-btn-active">home</a>
</li>
<li>
<a href="#sessions" data-icon="grid" data-transition="fade" >sessions</a>
</li>
<li>
<a href="#where" data-icon="info" data-transition="fade">where</a>
</li>
<li>
<a href="#about" data-icon="star" data-transition="fade">about</a>
</li>
<li>
<a href="../html/feedback.html" data-icon="plus" data-rel="dialog">feedback</a>
</li>
</ul>
</div>
</div>
<!-- **** iOS 安裝窗口頁面**** -->
<div data-role="page" id="ios">
<div data-role="header">
<h1>installation</h1>
</div>
<div data-role="content">
<p id="consoleInstall">installation</p>
<div id="install">
<p>To finish the installation, you must add this webapp to your
Home Screen. To do that, touch the arrow and select "Add to
Home Screen"</p>
</div>
<a href="javascript:openWithoutInstallation()" class="openWithoutInstall">Open without installation</a>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>feedback</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../style/jquery.mobile-1.4.5.min.css" type="text/css"/>
<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="dialog">
<div data-role="header">
<h1>feedback</h1>
</div>
<div data-role="content">
<form action="" method="post" data-transition="none">
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" required/>
</div>
<div data-role="fieldcontain">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" required>
</div>
<div data-role="fieldcontain">
<label for="comments">Comments</label>
<textarea name="comments" id="comments" cols="40" rows="8"></textarea>
</div>
<div data-role="fieldcontain">
<label for="contacted"></label>
<select name="contacted" id="contacted" data-role="slider">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<input type="submit" value="Send" data-theme="a" />
</form>
</div>
</div>
</body>
</html>
/**
* Created by tiantan on 2015-10-5.
*/
/*IOS全屏檢測
* 會議信息下載
* 會議列表以及會議信息頁面動態生成
* */
var data;
$(document).on("mobileinit",function(){
if(navigator.platform=="iPhone"||navigator.platform=="iPad"||navigator.platform=="iPod"||navigator.platform=="iPad"||navigator.platform=="iPhone Simulator"){
if(!navigator.standalone){
showIOSfunction();
}
}
/*pageshow 在頁面已完成加載過渡并正顯示在屏幕上時執行。*/
$("#sessions").live("pageshow",function(){
if(window.localStorage!=undefined){
if(window.localStorage.getItem("data")!=undefined&&window.localStorage.getItem("data")!=null){
/*檢測更新的同時，加載離線會議信息*/
showSessions(window.localStorage.getItem("data"));
$("#console").html("checking data update")
}else{
/*沒有本地存儲*/
$("#console").html("Downloading ession data...")
}
}
else{
/*不支持本地HTML5存儲，每次從服務器下載數據*/
$("console").html("Downloading ession data...");
}
loadSessionAjax();
});
});
function showIOSfunction(){
setTimeout(function(){
/*隱藏保存信息，直到web應用下載完成*/
$("#install").hide();
//打開IOS提示，引導用戶創建首頁快捷圖標
$.mobile.changePage("#ios",{
transition:"slideup",
changeHash:false
})
},100);
/*捕捉HTML5應用緩存事件，提供有用的信息*/
if(window.applicationCache!=undefined){
window.applicationCache.addEventListener("checking",function(){
$("consoleInstall").html("checking version")
});
window.applicationCache.addEventListener("downloading",function(){
$("#consoleInstall").html("Downloading application.Please wait...");
});
window.applicationCache.addEventListener('cached', function () {
$("#consoleInstall").html("Application downloaded");
$("#install").show();
});
window.applicationCache.addEventListener('updateready', function () {
$("#consoleInstall").html("Application downloaded");
$("#install").show();
});
window.applicationCache.addEventListener('noupdate', function () {
$("#consoleInstall").html("Application downloaded");
$("#install").show();
});
window.applicationCache.addEventListener('error', function (e) {
$("#consoleInstall").html("There was an error downloadingthis app");
});
window.applicationCache.addEventListener('obsolete', function (e) {
$("#consoleInstall").html("There was an error downloadingthis app");
});
}
}
var isFirstLoad=true;
function showSessions(string){
//如果服務器返回的是json形式的字符串不需要解析
/*if(window.JSON!=undefined){
data=JSON.parse(string);
}else{
data=eval("("+string+")");
}*/
if(window.localStorage!=undefined){
/*把對象保存為字符串*/
window.localStorage.setItem("data",string);
}
/*提前清空信息存放的表*/
$("slots").html("");
for(var i=0;i<=data.slots.length;i++){
if(data.slots[i].message!=null){
/*添加一個特殊分隔*/
html+="<li data-role='list-divider' data-groupingtheme='e'>+data.slots[i].time+':'+data.slots[i].message+</li>"
}else{
/**/
html+="<li><a href='javascript:showDetails("+i+")'>Sessions of " + data.slots[i].time + "</a></li> "
}
}
if(isFirstLoad){
$("#slots").listview();
isFirstLoad=false;
}else{
$("slots").listview("refresh");
}
}
function showDetails(index){
$("#details h1").html("sesson of"+data.slots[index].time);
var html="";
for(var i=0;i<data.sessions.length;i++){
if(data.session.lenght.timeId==data.slots[i].id){
/*為每一條信息創建一個新的信息類*/
html+="<div data-role='collapsible'>";
html+="<h3>"+data.session[i].tittle+"<h3/>";
html+="<h3>"+data.session[i].room+"<h3/>";
html+="<h4>speaker"+data.session[i].speaker+"<h4/>";
html+="<p>"+data.session[i].descprition+"<p/>";
html+="</div>"
}
}
/*提供前往的信息*/
$("#sessionInfo").html(html);
$("#sessionInfo").collapsible();
/*導向詳細頁面*/
$.mobile.changePage($("#details"));
}
function refresh(){
$("#console").html("refreshing");
loadSessionAjax();
}
function openWithoutInstallation(){
$.mobile.changePage($("#home"),{transition:"slideup",reverse:true})
}
function loadSessionAjax(key){
//把JSON對象用文本表示，更容易本地存儲
$.ajax("https://api.douban.com/v2/music/search?q="+key,{
complete:function(xhr){
if(window.localStorage!=undefined){
if(window.localStorage.getItem("data")!=undefined&&window.localStorage.getItem("data")!=null){
/*檢驗ajax返回的信息是否與window.localStorage相同*/
if(xhr.responseText==window.localStorage.getItem("data")){
$("#console").html("is updated")
}else{
/*有新的內容*/
if(confirm("There is an update in theschedule available, do you want toload it now?")){
$("#console").html("is updated");
showSessions(xhr.responseText);
}else{
$("#console").html("will be updated later");
}
}
}else{
/*支持本地存儲，但是沒有緩存*/
$("#console").html("is updated");
showSessions(xhr.responseText);
}
}else{
/*不支持本地存儲，顯示的信息不進行保存*/
$("#console").html("is updated");
showSessions(xhr.responseText);
}
},
dataType:'text',
error:function(){
$("#console").html("error")
}
});
}
