0

私はjQuery Mobileを初めて使用します。

Android フォンにアプリをデプロイすると、コードで奇妙な動作が発生しました。

最初の問題については、物理的な戻るボタンを押すと Web アプリケーションが終了しました。物理的な戻るボタンを押したときにアプリが終了しないようにするにはどうすればよいですか? 戻るボタンを押すと、アプリが前のページに戻るようにします。

2 番目の問題については、いくつかの xml データを読み込んで、それらをリストビューに解析しています。これは、ピザ ボタンを押したときに呼び出される onload 関数で発生します。ただし、最初の結果のみがリストビューに表示されます。誰でも私の問題を解決できますか? 私の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>
4

1 に答える 1

0

これは、戻るボタンの問題を処理する方法です。

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

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

これにより、ユーザーは履歴で利用可能な前のページに移動します。2番目の問題についてはこれまでのところわかりません。

于 2013-10-29T14:47:40.517 に答える