Question

Jquery Mobile新手并创建第一个应用程序（天气应用程序）

我使用jquery mobile创建了一个天气应用程序，允许我从我的位置和英国另外十个城市收集当前天气，我可以检索当前信息，但我不知道如何添加5天预测对于每个城市。

这是我的代码;

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>MyWeather</title>
    <!-- Include meta tag to ensure proper rendering and touch zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Include jQuery Mobile stylesheets -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- Include the jQuery library -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- Include the jQuery Mobile library -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <!-- Stylesheet CSS -->
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="css/weather.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.icons.min.css">



    <!-- Ajax Request -->
    <script type="text/javascript">

        var icons = { "clear-day" : "B",
            "clear-night" : "C",
            "rain": "R",
            "snow": "G",
            "sleet": "X",
            "wind": "S",
            "fog": "N",
            "cloudy": "Y",
            "partly-clody-day" : "H",
            "partly-cloudy-night" : "I"
        };

        var cities = {
            "glasgow" : { coords : { latitude:55.864237 , longitude:4.251806}},
            "edinburgh" : { coords : { latitude:55.953252 , longitude:3.188267}},
            "aberdeen" : { coords : { latitude:57.149717 , longitude:2.094278}},
            "dundee" : { coords : { latitude:56.462018 , longitude:2.970721}},
            "london" : { coords : { latitude:51.507351 , longitude:0.127758}},
            "newcastle" : { coords : { latitude:54.978252 , longitude:1.61778}},
            "manchester" : { coords : { latitude:53.480759 , longitude:2.24263}},
            "liverpool" : { coords : { latitude:53.408371 , longitude:2.991573}},
            "swansea" : { coords : { latitude:51.62144 , longitude:3.943646}},
            "cardiff" : { coords : { latitude:51.481581 , longitude:3.17909}},
            "current location" : ""

        };

        function loadweather(cityCoords){

            var latlng = cityCoords.coords.latitude + "," + cityCoords.coords.longitude;

            var forecastURL = "https://api.forecast.io/forecast/"+latlng;

            $.ajax({
                url:forecastURL,
                jsonCallback: 'jsonCallback',
                contentType: "application/json",
                dataType: 'jsonp',
                success: function(json){
                    console.log(json);
                    $("#current_temp").html(Math.round(json.currently.temperature)+"&#176;F");
                    $("#current_summary").html(json.currently.summary);
                    $("#current_temp").attr("data-icon",icons[json.currently.icon]);
                },
                error: function(e){
                    console.log(e.message);
                }
            });
        }

        function loadCity(city){
            $("#location").html(city);

            if (city.toLowerCase() == "current location"){
                if (navigator.geolocation)
                navigator.geolocation.getCurrentPosition(loadweather,loadDefualtCity);
                else{loadDefualtCity()}
            }else{
            loadweather(cities[city.toLowerCase()]);
        }

            function loadDefualtCity(){
            loadCity("glasgow")}
        }


        $(document).ready(function(){
            loadCity("glasgow");

            $("a.city").bind("click",function(){
               loadCity($(this).html());
            });
        });
    </script>



</head>
<body>
<div data-role="page">
    <div data-role="panel" id="left-panel" data-theme="a">
        <ul data-theme="b" data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
            <li data-role="list-divider">Select a City</li>
            <li><a href="#" class="city" data-rel="close">Current location</a></li>
            <li><a href="#" class="city" data-rel="close">Glasgow</a></li>
            <li><a href="#" class="city" data-rel="close">Edinburgh</a></li>
            <li><a href="#" class="city" data-rel="close">Aberdeen</a></li>
            <li><a href="#" class="city" data-rel="close">Dundee</a></li>
            <li><a href="#" class="city" data-rel="close">London</a></li>
            <li><a href="#" class="city" data-rel="close">Newcastle</a></li>
            <li><a href="#" class="city" data-rel="close">Manchester</a></li>
            <li><a href="#" class="city" data-rel="close">Liverpool</a></li>
            <li><a href="#" class="city" data-rel="close">Swansea</a></li>
            <li><a href="#" class="city" data-rel="close">Cardiff</a></li>
        </ul>
    </div>
    <div data-role="header" data-position="fixed" data-theme="a">
        <h1>MyWeather</h1>
        <a href="#left-panel" data-role="button" data-icon="bars" data-iconpos="notext" data-iconshadow="false">Menu</a>
    </div>

    <div data-role="main" class="ui-content">
        <h1 id="current_temp" class="icon" data-icon="B">65&#176;F</h1>
        <p id="current_summary">Partly Cloudy</p>
        <p id="location">Current location</p>

    </div>
</div>
</body>
</html>

任何帮助将不胜感激

谢谢

Jquery移动天气应用程序

0 个答案: