PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แปะ สภาพอากาศ ด้วย simpleweather ในเว็บ อย่างง่าย

17 September 2014 By


บทความนี้ เป็นแค่ตัวอย่าง การใช้งาน simpleweather หรือการนำ
สภาพอากาศมาแสดงในเว็บไซต์ ในที่นี้จะใช้ในรูปแบบ ของการตรวจสภาพ
อากาศจากตำแหน่งปัจจุบัน ผ่าน geolocation
 
การประยุกต์ หรือการใช้งานในรูปแบบอื่นๆ ดูได้ที่เว็บต้นฉบับได้เลย
 
http://simpleweatherjs.com/  
 
ดาวน์โหลดไฟล์ jquery.simpleWeather.min.js จากลิ้งค์ด้านบนได้เลย 
เราจะใช้แค่ไฟล์ เดียว
 
ตัวอย่าง
 

 
โด้ดตัวอย่างสำหรับทดสอบ
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style type="text/css">
@font-face {
    font-family: 'weather';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}        
#weather {
    width: 400px;
    margin: 0px auto;
    text-align: center;
    text-transform: uppercase;
    background: #1192d3;    
    box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1);
}

i {
  color: #fff;
  font-family: weather;
  font-size: 50px;
  font-weight: normal;
  font-style: normal;
  line-height: 1.0;
}

.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }

#weather h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 30px;
  font-weight: 300;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}

#weather ul {
  margin: 0;
  padding: 0;
}

#weather li {
    color:#FFFFFF;
    padding: 5px;
    display: inline-block;
    border-radius: 5px;
}

#weather .currently {
  margin: 0 20px;
}
    </style>
</head>
<body>

    <br>  
    <div style="margin:auto;width:80%;">  

            <div id="weather"></div>
   
    </div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script src="jquery.simpleWeather.min.js"></script>
<script type="text/javascript" >
$(function () {

//    รองรับการระบุตำแหน่ง จาก browser หรือไม่ 
//    ปกติเปิดมาครั้งแรก ถ้ารองรับ บราวเซอร์จะขออนุญาต ใช้ตำแหน่ง
//    แนะนำให้เลือกเลือก allow    
if("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(function(position) {
        // ถ้าสามารถใช้งานตำแหน่งได้ เรียกใช้ฟังก์ชั่นแสดงสภาพอากาศ
        // โดยระบุตำแหน่งปัจจุบันของเรา หรือเครื่องที่เราใช้งานอยู่
        loadWeather(position.coords.latitude+','+position.coords.longitude); 
    });
}else{
        // ถ้าไม่รองรับ ให้ใช้ตำแหน่งเริ่มต้น โดยระบุไปเลยในทีนี้ใช้ bangkok
        loadWeather('bangkok',''); 
}
    
});
    
function loadWeather(location, woeid) {
  $.simpleWeather({
    location: location,
    woeid: woeid,
    unit: 'c',
    success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';      
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
}
    
 </script>    
</body>
</html>

Tags:: jquery weather อากาศ





URL สำหรับอ้างอิง