jquery mobile案例

分享一个jquerymobile案例

    
    
    
    
    
    
    
    




    

        

        
豆瓣音乐app
        

            

                QQ
            
            

                新浪微博
            
            

                微信
            
            

                微信
            
        
    
    

        

            

                

                    home
                
                

                    sessions
                
                

                    where
                
                

                    about
                
                

                    feedback
                
            
        
    



    

        
sessions
        
    
    

        

        

        
    
    

        

            

                

                    home
                
                

                    sessions
                
                

                    where
                
                

                    about
                
                

                    feedback
                
            
        
    



    

        
Sessions Details
    
    

        

    
    

        

            

                

                    home
                
                

                    sessions
                
                

                    where
                
                

                    about
                
                

                    feedback
                
            
        
    



    

        
Where
    
    

        content
    
    

        

            

                

                    home
                
                

                    sessions
                
                

                    where
                
                

                    about
                
                

                    feedback
                
            
        
    



    

        
about
    
    

        

            
Orgnization
            
This congress is organized by ACME 
        
        

            
History<
            
First edition of this congress was.......
        
        

            
Sponsors
            
        
    
    

        

            

                

                    home
                
                

                    sessions
                
                

                    where
                
                

                    about
                
                

                    feedback
                
            
        
    
    
    

        

            
installation
        
        

            
installation
            

                
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"
            
            Open without installation
        


































    
    
    
    
    
    


    

        

            
feedback
        
        

            

                

                    Name:
                    
                
                

                    Email
                    
                
                

                    Comments
                    
                
                

                    
                    
                        No
                        Yes
                    
                
                
            
        
    













/**
 * 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+="
+data.slots[i].time+':'+data.slots[i].message+
"
        }else{
            /**/
            html+="
Sessions of " + data.slots[i].time + "
 "
        }
    }
    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";
            html+="
"+data.session[i].room+"
";
            html+="
speaker"+data.session[i].speaker+"
";
            html+="
"+data.session[i].descprition+"
";
            html+="
"
        }
    }
    /*提供前往的信息*/
    $("#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")
        }
    });
}