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

17 September 2014 By Ninenik Narkdee

อากาศ jquery weather

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ อากาศ jquery weather

บทความนี้ เป็นแค่ตัวอย่าง การใช้งาน 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:: weather อากาศ jquery

อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ

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