Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>SimpleOpenWeather plugin demo</title>
- <style type="text/css">
- .simpleopenweather {
- background: #ccc;
- width: 15em;
- margin: 0.3em;
- padding: 0.2em;
- }
- </style>
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
- <script type="text/javascript" src="jquery.simpleopenweather.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $( '<div id="weather2" class="simpleopenweather" w-simpleopenweather-city="new york"></div>' ).appendTo( "body" );
- $("#weather1").simpleopenweather({template: '<span>Temp: {{temperature}} ºC </span>', units: 'metric'});
- $("#weather2").simpleopenweather();
- $(".henk").simpleopenweather({iconset: './iconset_demo/'});
- });
- </script>
- </head>
- <body>
- </body>
- </html>
- (function( $ ){
- $.fn.simpleopenweather = function(options){
- var defaults = {
- template : '<div class="simpleopenweather-place"> {{icon}} <br>{{place}}: {{sky}} </div><div><span class="simpleopenweather-temperature">Temp: {{temperature}} ºC</span><h1> temp min: {{temperaturemin}}</h1><span class="simpleopenweather-humidity"> Humidity: {{humidity}}%</span></div><span class="simpleopenweather-cloudiness">Cloudiness: {{cloudiness}}% </span>',
- noweather : '<p>no weather report was found for that place!</p>',
- error : '<p>something went wrong!</p>',
- latitude : 0,
- longitude : 0,
- units : 'metric',
- lang : 'en',
- //iconset : 'http://openweathermap.org/img/w/'
- iconset : './iconset_demo/'
- }
- var settings = $.extend(defaults, options);
- return this.each(function() {
- var item = $(this);
- var openweathermap_url = "http://api.openweathermap.org/data/2.5/forecast/daily";
- if(item.attr("w-simpleopenweather-city")){
- openweathermap_url += "?q=" + item.attr("w-simpleopenweather-city");
- } else if(item.attr("w-simpleopenweather-coord")){
- latlon = item.attr("w-simpleopenweather-coord").split(',');
- openweathermap_url += "?lat="+latlon[0]+"&lon="+latlon[1]+"&cnt=1";
- } else if(settings.latitude != 0 && settings.longitude != 0){
- openweathermap_url += "?lat="+settings.latitude+"&lon="+settings.longitude+"&cnt=1";
- }
- if(settings.lang != ''){
- openweathermap_url += "&lang="+settings.lang;
- }
- if(settings.units == 'metric'){
- openweathermap_url += "&units="+'metric';
- } else{
- openweathermap_url += "&units="+'imperial';
- }
- window.open(openweathermap_url, '_blank');
- $.ajax({
- type : "GET",
- dataType : "jsonp",
- url : openweathermap_url,
- success : function(weather){
- if(!weather){
- item.html(settings.noweather);
- return;
- }
- var info = {
- temp : weather.list.temp,
- humidity : weather.list.humidity,
- cloudiness : "N/A ",
- sky : weather.weather[0].description,
- icon : settings.iconset+weather.weather[0].icon+".png",
- place : weather.name,
- tempmin : weather.main.temp_min
- };
- if(weather.clouds){
- info.cloudiness = weather.clouds.all;
- }
- item.html(settings.template.replace(/{{place}}/ig, info.place)
- .replace(/{{temperature}}/ig, info.temp)
- .replace(/{{temperaturemin}}/ig, info.tempmin)
- .replace(/{{humidity}}/ig, info.humidity)
- .replace(/{{cloudiness}}/ig, info.cloudiness)
- .replace(/{{icon}}/ig, '<img src="'+info.icon+'"></img>')
- .replace(/{{sky}}/ig, info.sky));
- },
- error : function(){
- item.html(settings.error);
- }
- });
- });
- }
- })( jQuery );
Advertisement
Add Comment
Please, Sign In to add comment