Question

我是jQuery Mobile的新手。

当我在Android手机上部署我的应用程序时，我的代码遇到了一些奇怪的行为。

对于第一个问题，当我按下物理后退按钮时，我的Web应用程序退出了。当我按下物理按钮时，如何防止我的应用程序退出？当我按下后退按钮时，我希望我的应用程序返回到上一页。

对于第二个问题，我正在读取一些xml数据并将它们解析为listview。当按下比萨按钮时调用onload函数会发生这种情况。但是，只有第一个结果列在listview中。任何人都可以帮我解决问题吗？我的HTML代码的粘贴：http://pastebin.com/RYcF6eBn

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>IS3261 Project</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src = "http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js" charset="shift_jis"></script>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" type="text/css" media="all" />


    <style>

.ui-header .ui-title {
    margin-right: 10%;
    margin-left: 10%;
}



.bgimg {
    background-image: url(file:///android_asset/www/images/SPizza.png);
    background-repeat:no-repeat;
}

</style>

        <script type="text/javascript" charset="utf-8">

$(document).on('pagebeforehide', '[data-role="page"]',function(e,data){  
    var loader = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(loader);
    },1); 
}); 

$(document).on('pageshow', '[data-role="page"]',function(e,data){  
    var loader = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(loader);
    },1); 
}); 


function additems()
{
    $('#korean-data').append('<li>Hello Type: <span>Hello</span></li>');
      $('#korean-data').listview('refresh');  
    }



    function loaddata()
{
  $.ajax({

    type: "GET",
    url: "http://www.comp.nus.edu.sg/~wct90/Pizza2.xml",
    dataType: "xml",
    success: parseXml
  });
}

    function parseXml(xml)
    {
           var pizzaObject = {
                pizzaTitle : '',
                pizzaContact : '',
                pizzaOperating : '',
                pizzaMinOrder : '',
                pizzaDeliveryCharge : '',
                pizzaMenu : '',
                pizzaPic : ''
            }

        alert("It's working!")

      $(xml).find("PizzaOwner").each(function()
      {
        pizzaObject.pizzaTitle  = $(this).find('Title').text();
        pizzaObject.pizzaContact  = $(this).find('Contact').text();
        pizzaObject.pizzaOperating  = $(this).find('OperatingHours').text();
        pizzaObject.pizzaMinOrder  = $(this).find('MinOrder').text();
        pizzaObject.pizzaDeliveryCharge  = $(this).find('DeliveryCharge').text();
        pizzaObject.pizzaMenu  = $(this).find('Menu').text();
        pizzaObject.pizzaPic  = $(this).find('Pic').text();
        alert(pizzaObject.pizzaPic);
        $('#pizzas-data').append('<li><a href="#pizzas"><img src="' + pizzaObject.pizzaPic + '" title="sample" height="100%" width="100%"/><h3><span> '+pizzaObject.pizzaTitle+'</span></h3><p>' + pizzaObject.pizzaContact + '</p></a></li>');
        $('#pizzas-data').listview('refresh');


        $("#pizzas div[data-role='header'] h1").html(pizzaObject.pizzaTitle);
        $('#pizza-data').empty();

         $('#pizza-data').append('<li>Name:<span> ' + pizzaObject.pizzaTitle + '</span></li>');
         $('#pizza-data').append('<li>Contact:<span> ' + pizzaObject.pizzaContact + '</span></li>');
         $('#pizza-data').append('<li>Operating hours:<span> ' + pizzaObject.pizzaOperating + '</span></li>');        
         $('#pizza-data').append('<li>Min Order:<span> ' + pizzaObject.pizzaMinOrder + '</span></li>');  
         $('#pizza-data').append('<li>Delivery charge:<span> ' + pizzaObject.pizzaDeliveryCharge + '</span></li>');
         $('#pizza-data').append('<li><a href="'+ pizzaObject.pizzaMenu +'">Menu:<span> ' + pizzaObject.pizzaMenu + '</span></li>');
         $('#pizza-data').listview('refresh');   
         $('#pizza-img').attr('src' , pizzaObject.pizzaPic );    

      });

    }

    </script>
    </head>






   <body onload="">



    <div data-role="page"  id="home">
        <div data-role="header" >
            <h1>Food Delivery @SG</h1>
            <div class = "bgimg"></div>
        </div>

        <div data-role="content">   
                 <a id= "Pizza" href = "#indexPizza" data-role="button" data-icon="arrow-r" data-iconpos="right" 
                        data-transition="flow" onclick= "loaddata();" class ="bgimg" >Pizza</a>    

                 <a id="FastFood" href = "" data-role="button" data-icon="arrow-r" data-iconpos="right" 
                        data-transition="flow" onclick="">Fast Food.</a>

                 <a id="IndianFood" href = "" data-role="button" data-icon="arrow-r" data-iconpos="right" 
                        data-transition="flow" onclick="loaddata()">Indian Food</a>

                 <a id="KoreanFood" href = "#KoreanFood" data-role="button" data-icon="arrow-r" data-iconpos="right" 
                        data-transition="flow" onclick="additems();">Korean Food</a>

                 <a id="Restaurant" href = "" data-role="button" data-icon="arrow-r" data-iconpos="right" 
                        data-transition="flow" onclick= "">Restaurant</a>           
        </div>
    </div>

   <div data-role="page" id="indexPizza">
        <div data-role="header">
            <h1>List of Pizza deliverer</h1>
        </div>        
        <div data-role="content">
            <ul data-role="listview" data-inset="true" id="pizzas-data">

            </ul>
        </div>       
    </div>

    <div data-role="page" id="pizzas">
        <div data-role="header">
            <a data-role="button" data-transition="none" data-theme="a" href="#indexPizza">Back</a>          
            <h1></h1>
        </div>        
        <div data-role="content">
            <ul data-role="listview" data-inset="true" id="pizza-data">

            </ul>
            <img src=""width="100%" style="height: auto;" id="pizza-img"/>
        </div>
    </div>    


    <div data-role="page" id="KoreanFood">
        <div data-role="header">
            <h1>Korean</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-inset="true" id="korean-data">

            </ul>
        </div>
    </div>

</body>
</html>

Answer 1

这就是处理后退按钮问题的方法。

function onDeviceReady()
{
    // Register the event listener
    document.addEventListener("backbutton", onBackKeyDown, false);
}

//Handle back button press
function onBackKeyDown()
{
    navigator.app.backHistory();
}

这会将用户带到历史记录中的上一页。到目前为止对你的第二个问题一无所知。

jQuery Mobile嵌套listview奇怪的行为+后退按钮退出

1 个答案: