Module thông tin thời tiết mới theo vnexpress.net

Hiện tại thì vnexpress đã thay đổi một phần cấu trúc site và dữ liệu của họ. Vì thế mà module thông tin thời tiết trước đã không còn. Mình đã cố gắng truy cập tới services mới đó nhưng vẫn chưa tìm thấy chính xác đường dẫn của nó nên chúng ta không tùy chỉnh được số lượng tỉnh thành phố. Để sử dụng module này đầu tiên chúng ta cần khai báo script cho nó.

<script language="javascript" type="text/javascript" src="tygia.js" />
    <script language="javascript" type="text/javascript" src="http://st.f2.vnecdn.net/j/v3/jquery-1.7.1.min.js"></script>
    <script language="javascript" type="text/javascript">
         var interactions_url = 'http://interactions.vnexpress.net';
         var domain_image = 'http://st.f2.vnecdn.net/i/v3';
         var base_url = 'http://vnexpress.net';
         var css_url = 'http://st.f2.vnecdn.net/c/v4';
         var img_url = 'http://st.f2.vnecdn.net/i/v3';
         var image_cloud = 'http://l.f29.img.vnecdn.net';
         var PAGE_FOLDER = 1;
         var PageHot = 0;
         //setTypingMode(1);
         document.domain = 'vnexpress.net';
    </script>
    <script language="javascript" type="text/javascript" src="http://st.f2.vnecdn.net/j/v3/jquery-1.7.1.min.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />

Bộ thư viện jquery thì chúng ta có thể download, import từ google đều được. Ở đây mình lấy luôn link từ server của vnexpress. File tygia.js chúng ta cũng có thể lấy link từ vnexpress cho tiện việc sau này họ có thể update module này. Bên trong file tygia.js là các hàm về thời tiết giá vàng, tỷ giá, chứng khoán, nếu bạn không muốn các phần đó thì có thể xóa đi. File tygia.js và style.css mình sẽ đính kèm với source.

Trong file style.css là style cho module nhỏ này. Bạn có thể tùy chỉnh nó theo ý mình.

.content-left{margin:10px 10px 0px 0px; float:left;width:300px;overflow:hidden}
.Hrow{margin:0px; padding:0px; list-style-type:none; background:#eefef5; width:80px;}
.Hrow li{font:11px arial; color:#000; width:70px; margin:0px 0px 5px; cursor:pointer;padding:0px 0px 0px 10px;}
.img-weather1{padding-right:4px}
.content-left .box-item{width:100%; margin:0px 0px 10px; float:left; overflow:hidden}
.hideCity{float:left; padding:0px 15px 0px 0px; display:none;width:60px; position:absolute; top:25px; left:300px; z-index:3;}
.content-left .box-item ,.boxtvsi{overflow:hidden}
.img-Do{padding:6px 6px 0px 0px; float:left;}
.spanNumDo{float:left; font:bold 14px tahoma; color:#000; padding:5px 10px 0px 0px;}
.txt-Weather{font:11px arial; color:#000; padding:7px 0px 0px; float:left;}
#txt-City{font:bold 12px tahoma; color:#000; padding:5px 0px 0px; float:left;width:70px; text-align:right;}
.H-row{ background:url(images/rowWeather.gif) no-repeat 3px 12px; width:7px; height:4px; padding:8px 3px; float:left; cursor:pointer;}
.divRightW{float:right; padding:4px 6px 0px 0px;}
.H-row{ background:url(images/rowWeather.gif) no-repeat 3px 12px; width:7px; height:4px; padding:8px 3px; float:left; cursor:pointer;}

 Cái này là style của vnexpress và mình có tùy chỉnh lại 1 chút cho phù hợp như đường link ảnh và vị trí của thẻ div.
Trong phần code thì cái này là hoàn toàn thuần html.

<div class="content-left">
        <div class="box-item" id="boxweather">
            <div class="weather">
                <span class="spanNumDo" id="img-Do">&nbsp;</span> <span class="txt-Weather" id="txt-Weather">
                    &nbsp;</span>
                <div class="divRightW">
                    <div id="txt-City" style="cursor: pointer;">
                        &nbsp;</div>
                    <div class="H-row">
                    </div>
                </div>
            </div>
            <div class="hideCity" id="hideCity">
                <ul class="Hrow" style="" id="ulWeather">
                </ul>
            </div>
        </div>
    </div>

 Sau khi đã có phần div chưa giao diện chúng ta sẽ gọi 1 đoạn script nhỏ, đoạn script này có chức năng gọi đến các function được định nghĩa trong file tygia.js

  <script type="text/javascript" language="javascript">
   $(document).ready(function () {
       tygia.getWeatherData();
       tygia.run();
   });
    </script>

 Save và run thôi :D. Mình sẽ demo luôn trên bài này! Trên thực tế có rất nhiều site của Việt Nam có cung cấp dịch vụ thông tin thời tiết các bạn có thể tham khảo thêm, một số trang nước ngoài thì cung cấp hẳn đường link service miễn phí để chúng ta truy cập và sử dụng. Download source module thông tin thời tiết tại đây. Chúc các bạn thành công.

Thêm chú thích

p/s: èo cái style của module này nó bị trùng với 1 số style trong template của blog nên hiển thị chưa được chính xác lắm. Các bạn hãy xem lại trong file source được đính kèm nha.