
2009年3月27日 星期五
JQuery Tab 介紹與使用方法

2007年11月23日 星期五
簡單介紹jQuery的應用
在web2.0 以前, 只能說是玩樂, 觀賞性質
甚至老牌的教科書會說不要使用javascript
免得面對瀏覽器兼容的問題
但隨著ajax, web2.0 等新世代名詞出現
gmail, yahoo pipes 等的出現
javascript 已經成為網頁元素必然的一部分
jquery, prototype, moto 等的通用庫的出現
更進一步推動javascript 的發展
Drupal 在5.0 之後正式支援jquery
但大家可能只會在上傳檔案時見到它的出現
其餘的core 部分幾乎都沒有用到jquery
留下一大塊可開發的地方
也直接促成tabbed block 的開發
入正題
drupal 因為已經內建jquery
使用上已經提供很多方便的函數, 方法
所以要使用jquery, 技術上難度不大
但要在效能和功能上取得平衡
便需要點實作的經驗和測試了
先約略介紹jquery 的操作
在一頁網頁裏, 代碼要從眾多的元素(element) 裏選出目標對象
然後再處理
一般會使用id, class, tags 等方法, 和使用css 類似
其中id 最直觀
<a id="link1">hyper link</a>
css 裏
<style>
#link1{color:red;}
</style>
#link1 中的# 代表id 的意思
便指定id 為 link1 的任何東西(id 在一頁裏應為唯一)
字體都是紅色
如果我要用jquery 令id 為 link1 的元素隱藏:
$("#link1").hide()
$("#link1")指定了一個或一些元素(id 在一頁裏應為唯一)
.hide() 令他們隱藏
相似的,
.link 的 . 代表class
input 代表input tag 等
都可以用在jquery 內
$(".link").show()
$("input").fadeIn()
註: jquery 代碼要放到<script></script>內
css 要放到<style></style>內
更進一步, 例如:
<ul id="list">
<li>a</li>
<li>b</li>
</ul>
$("#list") 找到 <ul id="list">
$("#list").children("li") 便可以找到id 為list, 子元素為li (共二個)
$("#list").children("li").eq(0) 便可以找到id 為list, 子元素為li, 的第零個元素 (<li>a</li>)
$("#list").children("li").eq(0).hide()....
jquery 稱這連續的選擇方式為"chained"
到了這個部分
當看見jquery 的代碼
應該可以明白它的工作原理
然後到jquery.com 找一找沒有看過的函數 toogle(), attr() 等等
一里通, 百里明
這些代碼都可以放在theme 內
直接顯示, 處理
本站的menu 漸變都是用此方式植入
因為這屬於theme 的管轄範圍
放在theme 內合情合理
今天就先介紹到這裡....
2007年8月20日 星期一
GoogleMapAPI簡單介紹
在 Google 推出 Google Maps 之後,網路上出現各種 hack 網站及文件,討論如何直接從 Google Maps 的 CGI 取得地圖圖檔並推出自己的地圖服務,但是這類的網站對 Google 的負荷很大,例如前不久的 Google Maps Wallpaper 即是,大量無節制的下載圖檔,Google 沒多久就將他封殺了,而且各式 hacking 的程式良莠不齊,所以 Google 就乾脆自己推出 API 程式庫讓全世界對 Google Maps 有興趣的程式設計師能夠自行開發 Google Maps 服務,而且 Google 也可以透過 API 來對這些服務做一個控管。
這篇文章主要要介紹如何利用 Google Maps API 來把 Google 所提供的地圖服務內嵌到你的網頁中,看過這篇介紹後,你會發現這是多麼簡單的一件事情。如果你有興趣,不妨一起討論討論,或許你也可以想出很有創意的應用來。
申請一組 Google Maps API Key
在使用 Google Maps API 之前,你必須向 Google 申請到一組 Key,申請的方法很簡單:- 首先,先決定你的網頁會出現在哪個 URL, 例如我想把 Google Maps 嵌入到我的 blog 中,我可以先知道該網頁的 URL 應該會是 http://blog.yam.com/syshen/archives/XXXX.html,前面包含到最後一個目錄的字串便是要來申請 Key 的基準,也就是 http://blog.yam.com/syshen/archives/。
- 以你的帳號登入 Google,如果你還沒有帳號,請到 https://www.google.com/accounts/ 申請。
- 連到 Google Maps API Sign Up 網頁將 (1) 所決定的 URL 填入,並按 "Generate API Key" 取得 Key。
- 最後會出現三個方塊,分別是你取得的 Key,你指定的 URL,以及一個範例。建議是將範例中的 整行 Copy/Paste 下來。
Goole Maps API 使用上有些法律上的限制要注意:
- 你的 Google Maps 服務必須免費開放給一般使用者。
- 如果你預估你的地圖服務會有超過每天 50,000 筆頁面的存取量,請主動聯絡 Google。
- Google 會不定期更新 API,你有責任跟著更新你的網頁中的 API。
- 你不能更改或隱藏 Google 的 logo。
- Google 有權力以後在地圖上放廣告,而你不能更改或破壞這些廣告。
- 有些地圖應用是 Google 不希望看到的,例如指明哪些地方可以購買到毒品或是任何違法行為。
第一個範例:在網頁嵌入 Google Maps
當你取得一把 API Key 之後,我們就可以來寫第一個範例了,這個範例相當簡單:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
紅字的部分就是用你取得的 Key 去載入 Google Maps API,這裡要注意的是,你一定要用你自己的 URL 去取得這把 Key,否則網頁在載入時,會得到錯誤訊息。接下來,宣告一個 div 區塊用來擺置地圖,style="width: 300px; height:300px" 則是用來指定地圖區塊大小。
再來利用 var map = new GMap (document.getElementById("mymap")); 宣告一個 GMap 物件。而 map.centerAndZoom(new GPoint(139.7600, 35.6700), 1); 則是將地圖的中心點固定在經度 139.7600 和緯度 35.6700,而 Zoom Level 在這範例中設成 1 (1 為最大,數字越大 Zoom Level 越小)。在這邊你或許會有個疑問,要怎麼知道某個地點的經緯度?如果你是在美國或加拿大,有些網站會提供依照地址查詢經緯度的服務,但是其他國家就比較麻 煩了,而我有個比較簡單的方法你可以參考看看,也就是先利用 Google Maps 的大地圖找到你要的地點,將他固定在中間,然後按下網頁上的 Link to this page,這時候 Google Maps 就會顯示出這頁的 URL,URL 上就有該點的經緯度了,舉例來說,我想要找出日本京都車站的經緯度,我先用 Google Japan Maps 找到車站位置,並將他固定在中心,最後並取得連結:http://maps.google.co.jp/maps?ll=34.982050,135.761490&spn=0.012443,0.020262&hl=ja,紅字所標的就是京都車站的經緯度。
這個範例中,你有沒有覺得是不是少了什麼?那就是少了 Google Maps 中的控制項,沒有這個你沒辦法放大縮小地圖,也沒辦法切換衛星空照圖。如下範例你就可以在你的地圖中加入這兩個控制項:
var map = new GMap2(document।getElementById("map")); //這一行是建立地圖元件
map . addControl(new GSmallMapControl()); //這一行是建立小地圖地圖縮放控制項
map . addControl(new GMapTypeControl()); //這一行是建立地圖種類控制項
map . setCenter(new GLatLng(37।4419, -122।1419), 13); //這一行是地圖的中心點左邊的是經度右邊是緯度最右邊的13是大小
今天就先打到這接下來就看各位有沒有與趣了解更多了。
2007年7月20日 星期五
AJAX拖放欄位
後半部
這是我個人認為比較難懂的地方
其他還有一點是用PHP寫的
今天就先不談
今天的重點是JS的部分
接續之前的那一個程式碼片段.....
function process(content,ation)
{
if(xmlhttp)
{
params = "";
content = encodeuricomponent(content);
if (action == "updatelist")
params="?content=" + serialize(content)+ "&action=updatelist";
else if (action=="addnewtask")
{
var newtask=trim(encodeuricomponent(document.getelementbyid(content).value));
if (newtask)
params="?content=" + new task +"&action=addnewtask";
}
else if (action=="deltask")
params="?content="+content+"&action=deltask";
if(params) cache.push(params);
try
{
if((xmlhttp.readystate == 4||xmlhttp.readystate==0)&&cache.length>0)
{
var cacheentry = cache.shift();
xmlhttp.open("Get","drag-and-drop.php"+cacheentry,true);
xmlhttp.setrequestheader("content-type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=handlerequeststatechange;
xmlhttp.send(null);
}
else
{
settimeout("process();",1000);
}
}
catch(e)
{
displayerror(e.tostring());
}
}
}
function handlerequeststatechange()
{
if (xmlhttp.readystate ==4)
{
if(xmlhttp.status==200)
{
try
{
postupdateprocess();
}
catch(e)
{
displayerror(e.tostring());
}
}
else
{
displayerror(xmlhttp.statustext);
}
}
}
function postupdateprocess()
{
var response = xmlhttp.responsetext'
if(response.indexof("ERRNO")>=0||response.indexof("error")>=0)
alert(response);
document.getelementbyid("taskslist").innerhtml=response;
sortable.create("taskslist");
document.getelementbyid("txtnewtask").value="";
document.getelementbyid("txtnewtask").focus();
}
functi8on handlekey(e)
{
e=(!e)? windows.event:e;
code=(e.carcode ? e.charcode:
((e.keycode)?e.keycode:
((e.which)?e.which:0));
if(e.type=="keydown")
{
if(code==13)
{
process("txtnewtask","addnewtask");
}
}
}
function trim(s)
{
return s.replace(/(^\s+)|(\s+$)/g,"")
}
2007年7月17日 星期二
呼叫遠端伺服器javascript&php
這是用ajax的技術使用javascript
用戶端連結伺服器在以php連結遠端伺服器
最後在傳回用戶端
var xmlHttp = createXmlHttpRequestObject();
var serverAddress = "smartpoxyping.php;
var getNumberParams= "action=GetNumber" + "&min=1"+"&max=100";
var chechAvailabilityParams = "action=checkavailability;
var requestscount=0;
var checkinterval=10;
var updateinterval=1; '等待1秒取得新亂數
var updateintervalifserverbusy=10; '伺服器連線繁忙時等待10秒後重試
var minserverbufferlevel=50;
function createXmlHttpRequestObject()
{
var xmlhttp;
try
{
xmlhttp = new xmlhttprequest();
}
catch(e)
{
var xmlhttpversions = new array("MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XmlHTTP");
for (var i=0; i
{
xmlhttp = new Activexobject(xmlhttpversions[i]);
}
catch(e){}
}
}
if (!xmlhttp)
alert("建立xmlhttprequest物件產生錯誤");
else
reurn xmlhttp;
}
function process()
{
if (xmlhttp)
{
try
{
if (requestscounter % checkinterval==0)
{
xmlhttp.open("GET",serveraddress+ "?" +checkavailabilityparams,true);
xmlhttp.onreadystatechange = handlecheckingavailability;
xmlhttp.send(null);
}
else
{
xmlhttp.open("GET",serveraddress+ "?" +checkavailabilityparams,true);
xmlhttp.onreadystatechange = handlegettingnumber;
xmlhttp.send(null);
}
}
catch(e)
{
alert("無法連結伺服器")
}
}
}
function handlecheckingavailability()
{
if (xmlhttp.readystate ==4)
{
if (xmlhttp.status ==200)
{
try
{
checkavailability();
}
chatch(e)
{
alert("伺服器連結錯誤");
}
}
else
{
alert("伺服器讀取錯誤");
}
}
}
function checkavailability()
{
var response = xmlhttp.responsetext;
if (response.length > 5 || response.length ==0)
throw(response.length ==0 ? "伺服器錯誤" : response);
mydiv = document.getelementbyid("mydivelement");
if(response >= minserverbufferlevel)
{
mydiv.innerHtml += "伺服器緩衝" + respnose + "%, " + "開始接收新數字
";
requestconnter++;
settimeout("process();",updateinterval*1000)
}
else
{
mydiv.innerHtml += "伺服器緩衝" + respnose + "%, " + "將重新檢查
";
settimeout("process();",updateinterval*1000)
}
}
這些為js的程式碼片段
懶的key註解了 = =
2007年7月5日 星期四
使用php與ajax製作xml回傳至客戶端
function createxmlhttprequestobject()
{
var xmlhttp;
try
{
xmlhttp = new xmlhttprequest();
}
catch(e)
{
var xmlhttpversions = new array ("MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP");
for (var i=0;i
try
{
xmlhttp= new activexobject(xmlhttpversions[i]);
}
catch(e){}
}
}
if (!xmlhttp)
alert("error creating the xmlhttprequest object.")
else
return xmlhttp;
}
function process()
{
if (xmlhttp)
{
try
{
xmlhttp.open("GET","phptest.php",true);
xmlhttp.onreadystatechange = handlerequeststatechange;
xmlhttp.send(null);
}
catch(e)
{
alert("can't connect to server: \n" + e.tostring());
}
}
}
function handlerequeststatechange()
{
if(xmlhttp.readystate == 4)
{
try
{
handleserverresponse();
}
catch(e)
{
alert("error reading the response: " + e.tostring());
}
}
else
{
alert("there was a problem retrieving the data:\n" +xmlhttp.statustext);
}
}
function handleserverresponse()
{
var xmlresponse = xmlhttp.responsexml;
if(!xmlresponse || !xmlresponse.documentelement)
throw("invalid xml structre:\n" + xmlhttp.responsetext);
var rootnodename = xmlresponse.documentelement.nodename;
if (rootnodename == "parsererror") throw("invalid xml structure");
xmlroot = xmlresponse.documentelement;
titlearray = xmlroot.getelementsbytagname("title");
isbnarray = xmlroot.getelementsbytagname("isbn");
var html = "";
for (var i=0;i
";
mydiv=document.getelementbyid("mydivelement");
mydiv.innerhtml = html;
}
2007年7月4日 星期三
建立類似igoogle的拖放欄位
剛整理完就先來發一篇
這是建立拖曳的ajax程式碼片段
var xmlhttp = createxmlhttprequestobject();
varshowerrors = true;
var cache = new array();
function createxmlhttprequestobject()
{
var xmlhttp;
try
{
{
xmlhttp = new xmlhttprequest();
}
catch(e)
{
var xmlhttpversions = new array("msxml2.xmlhttp.6.0","msxml2.xmlhttp.5.0","msxml2.xmlhttp.4.0","msxml2.xmlhttp.3.0","msxml2.xmlhttp","Microsoft.xmlhttp");
for (var i=0; i
{
try
{
xmlhttp = new activexobject(xmlhttpversions[i]);
}
catch(e) {}
}
}
if (!xmlhttp)
alert("製作xmlhttprequest物件錯誤");
else
return xmlhttp;
}
function displayerror($message)
{
if (showerrors)
{
showerrors = false;
alert("錯誤");
}
}
function startup()
{
sortable.create("taskslist",{tag:"li"});
droppables.add("trash",
{
ondrop: function(element)
{
var deletetask = confirm ("確定要刪除嗎")
if (deletetask)
{
element.hide(element);
process(element.id),"deltask");
}
}
});
}
function serialize (listID)
{
var length = document.getelementbyid(listid).childnodes.length;
var serialized ="";
for (i=0;i
{
var li=document.getelementbyid(listid).childnodes[i];
var id = li.getattribute("id");
serialized += encodeuricomponent(id) + "_";
}
return serialized.substring (0,serialized.length-1);
}
這些只是程式碼中的一個小片段
如果對此一文章有興趣請來信告知
我會在發文
2007年6月19日 星期二
淺談AJAX
一般網路使用者,並不在乎這些繞舌的技術,但是,網站的瀏覽經驗,他們卻是會深深記住的!這才是重點。
Web 2.0和Ajax常常被綁在一起,這是很容易理解的:Web 2.0最大的宗旨,簡單的說,就是提昇網站瀏覽者的使用經驗,而Ajax就是做到這個目的最受注目的技術。(請注意,不是唯一!Flex也是很凶的。)
Ajax是Asynchronous Javascript and XML(非同步Javascript與XML)的縮寫,說實在的,有誰能在不了解這個技術前,猜出它的字面上的意義,就算你狠了^^
若要堅持從字面上去翻譯,也行,就叫做:利用Javascript的技術,非同步的讀取、分析XML的資料,並且表現在網頁裡。
很難懂嗎?不會的。傳統的網頁,我們點了任何一個連結,或是送出一個表單,接下來就是無盡的等待,等待資料送到主機,再等它回應,這段期間,訪客啥事也不能做,不然,很可能讓過程出現錯誤。
這樣的瀏覽經驗當然不是很順暢的。不過,這樣的情況,也持續了10來年,幾乎所有人都習以為常,甚至認為,上網站看網頁就是這樣囉!
那可不!這在一些有抱負有理想的程式開發人員眼中,是不可原諒的缺失!所以一直以來,很多程式人展現了自我的編程功力,努力讓瀏覽的過程「看起來」變起順暢。
像是按下送出按鈕後,出現「Loading」的小動畫,提醒訪客不用心急;另外,iframe的應用也很頻繁,利用它我們可以在一個頁面裡載入多個頁面,而且頁面之間還能有互動,當它們在背後暗中進行時,呈現出來的效果可是很神奇的!
這段時間,這些應用的方法並沒有什麼準則,iFrame、各種Javascript語法、再配合複雜到不行的CSS樣式,大家玩得不亦樂乎。直到Jesse James Garrett發表了Ajax,大家慢慢有了方向。
最著名的例子,就是Google Map了。最近它也加入了台灣的詳細圖資,另一套本土的Urmap的神經可能要緊繃一些了。
如果大家還有印象,3,5年前的網路地圖,一定會有上下左右的按鈕,你按個鈕,就換個畫面,等你找到你要的地方,約會可能都遲到了!
Google Map和Urmap可不用這樣,你直接在地圖上用滑鼠拖曳,地圖就跟著移動,按右鍵,還能定義起點終點,甚至還能即時畫出路線規畫給你看!這,就是Aajax。
其實Ajax說穿了,最重要的只有XMLHttpRequest物件,傑森不在這裡多做介紹,簡單來說,就是靠它來和Web server要求xml資料,而不用透過「換頁」或是「重新載入」,所以訪客也不用「等待」資料的回傳,這段回傳的時間,大可進行頁面上的其它操作。
維基百科上也說明了Ajax的優點:
AJAX應用可以僅向伺服器發送並取回必需的數據,它使用SOAP或其它一些基於XML的頁面服務介面,並在客戶端採用JavaScript處理來自伺服器的回應。
因為在伺服器和瀏覽器之間交換的數據大量減少(大約只有原來的5%),結果我們就能看到伺服器回應更快的結果。同時很多的處理工作可以在發出請求的客戶端機器上完成,所以Web伺服器的處理時間也減少了。
當然,資料拿回來了,還要進行處理;過去,如果使用php、asp等技術,這些工作,大多會在伺服器處理,最後把結果傳送回訪客的網頁中,現在全都由Javascript來做這些事了,它的工作一下子變重了好幾倍。
當然,這也意味著,網站程式的編寫,面臨了一個不小的革命。事情的發展當然沒有那麼順利。
維基百科中提到這種情況的四大問題:
第一,JavaScript語言本身之能力可能不足以處理複雜的邏輯。
第二,JavaScript的執行效能一向不好。
第三,JavaScript存取伺服器數據,仍需適當的伺服器端程序之配合(如php、asp等)。
第四,瀏覽器相容性的問題又出現。
還好,隨著大家拼命使用Javascript,第一個問題愈來愈小;而第二個問題,也會隨著電腦設備的更新而消失.
第三,則是真正的問題,是的,Ajax是來亂的,它不能幫開發人員省掉工作,只會增加工作量=.=
第四個問題,基本上過去存在,現在存在,在可見的未來也會存在,我們只好鼻子摸摸,認了!還好,這些不相容的規則,也大多被摸索出來了,大致上只是煩一點,並不會造成太大的困擾。
另外,真正要重視的問題是,Ajax要寫一個完整的網站,並不容易,最主要的原因,就是它沒有一套完整的開發系統,幾乎要靠程式人員一字一血淚的key出來!
所幸,這個問題,這一兩年開始有了一些改變。網路上已經出現不少所謂的「Ajax套件」,知名的有:prototype、JQuery、YUI,Microsoft也為它的.net搞了一套ASP.NET AJAX,而握有Dreamweaver王牌的Adobe也推出了Spry。
這些套件,除了幫助我們和後端接觸取得、分析資料,另外,也都很雞婆的寫了一堆「介面(Interface)」元件,讓我們可以輕易的發揮Ajax的優點,讓你想不用都很難。
使用這些套件也是有代價的:太簡單的你不用,複雜的,多達數百個API,讓你看了都頭昏!
至於要選哪一套,或是你的要自行一行行編寫、手工打造,只要結果你自己和業主都滿意,實在沒有什麼不可以!
2007年6月17日 星期日
使用PHP與AJAX製作RSS閱讀器
在臺灣常看到人用的閱讀器是YAHOO的和GOOGLE READER 現在就來學習如何在你的網站上加上RSS閱讀器吧!!!
< ? php // load the list of feeds require_once ('config.php'); ? >
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional // EN" "http: //www.w3.org/TR/xhtm11/DTD/xhtml1-transitional.dtd" >
< xmlns="http://www.w3.org/1999/xhtml">
<>
< equiv="content-type" content="text/html' charset=utf-8">
<> PHP 與 ajax RSS 閱讀器 < /title >
< rel="stylesheet" type= "text/css" href="rss_reader.css">
< src ="rss_reader.js" type ="text/javascript"> < /script >
< /head >
<>
<>PHP 與 ajax RSS 閱讀器 < / h1>
< id="feeds">
<> feeds < /h2>
< id ="feedlist ">
< ?php // display feeds for ($ =0; $i < id="feed-' .$i.'">< href="javascript" onclick = "getfeed(document.getelementbyid(\'feed-'.$i.'\'),\' ' .urlencode ( $feeds [$i]['feed']). '\');">';
echo $feeds[$i]['title'] .'< / a >< / li >';
}
? >
< /ul>
< / div>
< id ="content">
< id="loading" style="display:none"> loading feed ... < /div>
< id="feedcontainer" style ="display:none"> < /div>
< id="home">
<> about the rss reader < /h2 >
<>
這里是秀出首頁主視窗的文字
< /p >
< / div>
< /div >
< /body >
< / html >
這里的只是閱讀器的首頁程式,如果有興趣的人可以留言或寫信給我
我會在繼續發剩下的程式碼和整合教學