網頁

顯示具有 jQuery 標籤的文章。 顯示所有文章
顯示具有 jQuery 標籤的文章。 顯示所有文章

2012年6月13日 星期三

在網頁中加入 Google 提供的動態天氣預報資訊


幫客戶製作網站的網頁時, 客戶提出想在網頁中加入及時的天氣預報資訊.搜尋網路上有提供相當多的相關資訊, 但是一直都不是很簡潔的處理方式.

有的是透過 Yahoo 提供的 API, 有的是透過 Google 提供的 API, 由於想要的是最簡潔的方式, 可以很單純的將現在的溫度跟天候狀態顯示出來,以及未來三天的預測. 所以選用了 Google 的天氣 API. 另外, 為了要讓天氣顯示美美的, 所以也加上了 jQuery 的 plugin, fisheye dock menu 
(http://blog.jquery.com/2007/05/09/fisheye-dock-menu/) 來當作美化介面使用. 這一個 plugin 除了可以使用來凸顯介面, 也可以當作選單使用, 就像你在使用 Apple 的介面一樣, 讓你的網站看起來不一樣, 有興趣的自行參考該網站.

Google 提供天氣的資訊是使用 xml 的方式傳遞資訊, 所以在我開發的過程中使用了 php 提供解析 xml 的函數 simplexml_load_file(). 這樣就可以方便將每一個 xml 現在跟預報中的資訊都擷取出來使用.

要使用 Google 提供的 xml 檔案, 就要先了解他的 xml 結構, 要使用 Google weather API 請到以下的網址 http://www.google.com/ig/api?weather=taipei 參數 weather=taipei 這裡請填你要查詢的地區, 以下是抓取台北(taipei), 的地區天氣資訊所傳回的 xml 檔案.

2012年3月16日 星期五

取代 marquee 的 jQuery plugin


在使用 跑馬燈 marquee 中引用 jQuery 傳入的內容時, 有時候顯示的文字會被截斷 (FireFox 跟 Chrome 比較明顯)
這時候就必須捨棄 marquee 的用法, 改用jQuery 其他的 plugin 來取代.

jQuery Scroller http://archive.plugins.jquery.com/project/jqScroller 倒是一個不錯的選擇