Guest User

jquery json 2

a guest
Aug 7th, 2013
593
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.68 KB | None | 0 0
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <title>SimpleOpenWeather plugin demo</title>
  5. <style type="text/css">
  6. .simpleopenweather {
  7. background: #ccc;
  8. width: 15em;
  9. margin: 0.3em;
  10. padding: 0.2em;
  11. }
  12. </style>
  13. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  14. <script type="text/javascript" src="jquery.simpleopenweather.js"></script>
  15. <script type="text/javascript">
  16. $(document).ready(function() {
  17. $( '<div id="weather2" class="simpleopenweather" w-simpleopenweather-city="new york"></div>' ).appendTo( "body" );
  18. $("#weather1").simpleopenweather({template: '<span>Temp: {{temperature}} ºC </span>', units: 'metric'});
  19. $("#weather2").simpleopenweather();
  20. $(".henk").simpleopenweather({iconset: './iconset_demo/'});
  21. });
  22. </script>
  23. </head>
  24. <body>
  25.  
  26. </body>
  27. </html>
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38. (function( $ ){
  39. $.fn.simpleopenweather = function(options){
  40. var defaults = {
  41. 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>',
  42. noweather : '<p>no weather report was found for that place!</p>',
  43. error : '<p>something went wrong!</p>',
  44. latitude : 0,
  45. longitude : 0,
  46. units : 'metric',
  47. lang : 'en',
  48. //iconset : 'http://openweathermap.org/img/w/'
  49. iconset : './iconset_demo/'
  50. }
  51. var settings = $.extend(defaults, options);
  52.  
  53. return this.each(function() {
  54. var item = $(this);
  55. var openweathermap_url = "http://api.openweathermap.org/data/2.5/forecast/daily";
  56.  
  57. if(item.attr("w-simpleopenweather-city")){
  58. openweathermap_url += "?q=" + item.attr("w-simpleopenweather-city");
  59. } else if(item.attr("w-simpleopenweather-coord")){
  60. latlon = item.attr("w-simpleopenweather-coord").split(',');
  61. openweathermap_url += "?lat="+latlon[0]+"&lon="+latlon[1]+"&cnt=1";
  62. } else if(settings.latitude != 0 && settings.longitude != 0){
  63. openweathermap_url += "?lat="+settings.latitude+"&lon="+settings.longitude+"&cnt=1";
  64. }
  65.  
  66. if(settings.lang != ''){
  67. openweathermap_url += "&lang="+settings.lang;
  68. }
  69.  
  70. if(settings.units == 'metric'){
  71. openweathermap_url += "&units="+'metric';
  72. } else{
  73. openweathermap_url += "&units="+'imperial';
  74. }
  75.  
  76. window.open(openweathermap_url, '_blank');
  77.  
  78. $.ajax({
  79. type : "GET",
  80. dataType : "jsonp",
  81. url : openweathermap_url,
  82. success : function(weather){
  83. if(!weather){
  84. item.html(settings.noweather);
  85. return;
  86. }
  87.  
  88. var info = {
  89. temp : weather.list.temp,
  90. humidity : weather.list.humidity,
  91. cloudiness : "N/A ",
  92. sky : weather.weather[0].description,
  93. icon : settings.iconset+weather.weather[0].icon+".png",
  94. place : weather.name,
  95. tempmin : weather.main.temp_min
  96. };
  97. if(weather.clouds){
  98. info.cloudiness = weather.clouds.all;
  99. }
  100. item.html(settings.template.replace(/{{place}}/ig, info.place)
  101. .replace(/{{temperature}}/ig, info.temp)
  102. .replace(/{{temperaturemin}}/ig, info.tempmin)
  103. .replace(/{{humidity}}/ig, info.humidity)
  104. .replace(/{{cloudiness}}/ig, info.cloudiness)
  105. .replace(/{{icon}}/ig, '<img src="'+info.icon+'"></img>')
  106. .replace(/{{sky}}/ig, info.sky));
  107. },
  108. error : function(){
  109. item.html(settings.error);
  110. }
  111. });
  112. });
  113. }
  114. })( jQuery );
Advertisement
Add Comment
Please, Sign In to add comment