1

こんにちは、アプリの 1 つに天気機能を実装したいと考えています。そのため、天気APIを使用する必要があります。天気APIを提案し、jquery Mobileを使用してこれを実装する方法をチュートリアルできますか。

4

1 に答える 1

5

ここにはいくつかの解決策があります。それはすべて、あなたがどこまで進んでいくかにかかっています。最終結果をすぐに表示しますか、それとも自分で解析しますか?

完全なソリューション

ヤフー！jQuery 用天気フィード プラグイン

HTML :

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <div id="test"></div>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

Javascript : 

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).ready(function () {
        $('#test').weatherfeed(['UKXX0085','EGXX0011','UKXX0061','CAXX0518','CHXX0049']);
    });
});

作業例: http://jsfiddle.net/Gajotres/7qvJH/

シンプルな天気プラグイン

実行可能なプラグインを取得できますが、それを使用して、いつでもどこでも好きな方法でデータを表示できるため、おそらく最良のプラグインです。

実際の例 (私のものではありません): http://jsfiddle.net/fleeting/a4hbL/

HTML : 

<!-- Docs at http://simpleweather.monkeecreate.com -->
<div id="weather"></div>

Javascript : 

// Docs at http://simpleweather.monkeecreate.com
$(document).ready(function() {
  $.simpleWeather({
    zipcode: '',
    woeid: '2357536',
    location: '',
    unit: 'f',
    success: function(weather) {
      html = '<h2>'+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      html += '<li>'+weather.tempAlt+'&deg;C</li></ul>';

      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});

チュートリアル

チュートリアル 1

出典： Google天気フィード

これは簡単なチュートリアルです。そこでは、自分でそれを行うためのすべてが見つかります。ただし、PHP と jQuery が必要です。

チュートリアル 2

出典： Yahoo天気フィード

別の素晴らしいチュートリアル。jQuery のみが必要です。そこでは、それを機能させるために必要なすべてが見つかります。

デモ : http://demo.tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/

このチュートリアルにはいくつかの欠陥がありますが (ジオロケーションが必要です)、新しい天気プラグインを手動で作成するために使用できます。

編集 前回のチュートリアルが更新されました。現在、Yahoo の代わりに OpenWeatherMap を使用しています。

于 2013-04-04T09:46:07.820 に答える