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

17 September 2014 เขียนเมื่อ 8 ปีก่อน โดย 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>

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