SILK ROUTE » ajax http://www.silkrt.com/v01 W.E. Linked Sat, 28 Jan 2012 00:36:41 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 HTML5 打乒乓球 http://www.silkrt.com/v01/2009/12/22/html5-%e6%89%93%e4%b9%92%e4%b9%93%e7%90%83/ http://www.silkrt.com/v01/2009/12/22/html5-%e6%89%93%e4%b9%92%e4%b9%93%e7%90%83/#comments Tue, 22 Dec 2009 17:35:58 +0000 Alfred Kang http://www.silkrt.com/v01/?p=3171 這個好玩的遊戲用html5寫的 所以IE不能玩

]]> http://www.silkrt.com/v01/2009/12/22/html5-%e6%89%93%e4%b9%92%e4%b9%93%e7%90%83/feed/ 1 Chrome Experiments http://www.silkrt.com/v01/2009/03/19/chrome-experiments/ http://www.silkrt.com/v01/2009/03/19/chrome-experiments/#comments Thu, 19 Mar 2009 15:35:24 +0000 Alfred Kang http://www.silkrt.com/v01/?p=1763 感謝萊恩, 剛剛寄給我的超級瘋狂的Javascript 視覺coding, 大部分的瀏覽器會有當機的危險, 還是用chrome跟safari比較保險

主網站在這:
http://www.chromeexperiments.com/

chrome experitment

這個是來恩最愛的:

唯一的小缺憾是這是在canvas tag上畫畫, 所以IE並不能跑(就算支援canvas, 我猜他也跑不動)
不過還是讓我們看到了很多可能性,

jQuery的發明人 John Resig 之前也創了一套 Processing.js, 會寫processing的人可以很快的上手.
http://ejohn.org/apps/processing.js/examples/basic/

大家快來玩一玩, 說不定有一天 (等到IE終於願意好好支援canvas的那天)Ajax可以追上Flash 的勁爆視覺

]]> http://www.silkrt.com/v01/2009/03/19/chrome-experiments/feed/ 1 惡搞youtube http://www.silkrt.com/v01/2008/09/24/%e6%83%a1%e6%90%9eyoutube/ http://www.silkrt.com/v01/2008/09/24/%e6%83%a1%e6%90%9eyoutube/#comments Thu, 25 Sep 2008 04:05:43 +0000 Marc http://www.silkrt.com/v01/?p=955 experiencewii

透過這個固定網址: http://www.youtube.com/experiencewii 這個wii的影片惡搞 youtube 版面,達到非常好的廣告效果,不知道是不是 jQuery做的?

]]> http://www.silkrt.com/v01/2008/09/24/%e6%83%a1%e6%90%9eyoutube/feed/ 3 jQuery 第三發 jQuery UI — 惡搞部落格之欲罷不能 http://www.silkrt.com/v01/2008/07/26/jquery-ui-tutorial/ http://www.silkrt.com/v01/2008/07/26/jquery-ui-tutorial/#comments Sat, 26 Jul 2008 06:20:10 +0000 Alfred Kang http://www.silkrt.com/v01/?p=633 各位看倌, 如果你沒有看過第一篇介紹jQuery的基本設定, 如果你也錯過了上第二篇用jQuery亂搞部落格的教學, 如果你也沒有去看過jQuery台灣站, 如果你也沒有參加jQuery台灣的Google Group, 通通沒有關係, 因為接下來你要閱讀的本篇文章, 就是部落格文章中所謂的”危險文章”, 為什麼呢? ㄎㄎㄎ…在這邊先賣個關子.

會來看這篇部落格的人, 多多少少都是有[視覺系]DNA的朋友, 或許會覺得前面兩篇教學太hard code, 做出來的button又很陽春, 惡搞的效果都沒有過場, 沒錯, 本著我們教學不超過三分鐘的原則, 之前跟大家提的東西, 真的是太簡陋了, 今天本篇教學, 就是要跟大家來分享, jQuery的視覺特效library, 登登 jQuery UI, 顧名思義, 他就是jQuery使用者(U)介面(I)的程式庫, 保證呢, 本篇的教學一定有過場, 一定讓視覺系的朋友滿意.

之前Aileen問我說, jQuery有啥Tweening的功能ㄇ? 有低, jQuery內建animate指令, 就可以把網頁上所有tag的基本css視覺屬性去做變化(例如, height, opacity, top, left). 你可以把東西弄得飛來飛去的, 像flash一樣, 如果對easing equation有強烈執著的朋友, 也可以安裝 jQuery Easing Plugin, 裡面有整套的Robert Penner Easing Equation, 看你愛怎樣tween就怎樣tween.

不過呢, 我們今天沒有要教怎樣用animate, 這個留待下次再聊, 或是私底下在聊, 因為, 兩個原因, 第一個, 在HTML, Javascript, CSS的世界裡面, 特製的animation是不多的, 大部分都是功能取向的元件, 像tab啦, form啦, 第二個, 本站jQuery的教學特有的原則, 要又賤又快, 所以超過三分鐘就有些過份了. 基於以上原因, 本日的主角就是 jQuery UI 啦!

基本上jQuery UI 並沒有啥驚世駭俗的視覺特效, 但是他提供的東西都是最實用的, 譬如說快速製作tab, 經典的隨插即用轉場之類的, 各位看玩教學的朋友, 如果發現自己手癢的話, 可以前往jQuery UI網站繼續研究. 好吧, 本日的教學呢, 就是要教大家把東西用成可以”滑鼠拖曳”!!

第一步呢, 一如往常, 請把jQuery載入頁面, 本站由於已經使用flickr外掛,已經把jQuery載入了, 所以可以直接在內文寫jQuery, 同樣提醒在家做實驗的朋友, 記得把下面這行code貼進你的網頁, 或是下載jQuery後載入頁面.

<script src="“http://code.jquery.com/jquery-latest.pack.js”" type="“text/javascript”"></script>

第二步, 我們需要jQuery UI 的core跟 jQuery UI 的draggables載入頁面, jQuery在這篇提供了很好的下載頁面, 你可以選擇你所需要的UI, 然後下載, 所以部會有冗code在裡面, 而且它還可以選擇壓縮方式, 讓使用這打開你頁面的速度更快. 當然, 也可以直接從他的網站把code引入, 像上面一樣, 請貼以下code:

<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>

第三步啦, 關鍵的步驟, 要告訴jQuery哪些東西可以拖曳, 一樣是用css selector去把可以拖曳的tag激活. 以下的code是說把id=”content”的tag弄成可以滑鼠拖曳…酷喔

<script>
$(document).ready(function(){
$("#content").draggable();
});
</script>

好啦…教完啦, 就這樣, 本篇教學不附教學檔..實在是因為code也沒有很多行
現在呢, 對這個blog版面有啥不滿的人, 就自己重新再排一排ㄅ, ㄎㄎ, 危險文章!

]]> http://www.silkrt.com/v01/2008/07/26/jquery-ui-tutorial/feed/ 6 jQuery 第二發 之 亂搞部落格 http://www.silkrt.com/v01/2008/07/23/jquery-tutorial-2/ http://www.silkrt.com/v01/2008/07/23/jquery-tutorial-2/#comments Wed, 23 Jul 2008 05:45:38 +0000 Alfred Kang http://www.silkrt.com/v01/?p=602 馬克大師上次在留言裡面了留了大哉問….要拿來幹嘛呢？沒錯, 這是重點阿!!今天本篇文章就是要針對這個問題來做解答,並且在這邊做另一個超簡易教學, 三分鐘, 三分鐘讓你打開控制網頁潘朵拉的寶盒

好吧, 先回答問題, jQuery可以幹嘛呢, jQuery只是眾多AJAX lib中的一支, 但是他好學, 所以你要跟別人宣稱你會AJAX最快的方法, 就是學jQuery, 重點來啦 –>
基本上,當你會使用AJAX lib你就等於擁有控制網頁上所有(注意, 是所有喔!!)元件的能力(但是是在某種程度下,你不可能叫網頁爆米花之類的)

除此之外呢, 使用AJAX lib 他已經幫你把跨browser的部分處理掉了, 某種程度上就是實現了javascript世界裡面的”Write once, run anywhere”, 不管你是用FF, IE, 還是Opera, 你只要是用AJAX lib,你的結果就是一樣.
當然,你也可以認真的用javascript針對每個browser去寫, 但是一個簡單的XMLHTTPRequest光是要跨browser就可以讓你寫上40行以上的code(高手例外)和好幾個為數不少的if..else或switch.

所以各位看倌可以在這邊做個決定, 你還要不要往下看,畢竟,並不是每個人都想要有這種能力的, 這種能力會讓你上癮, 忍不住就會動手亂改東西了

以下就是本貓今天跟Aileen閒聊之虞, 覺得可以做的簡單的教學:

第一步, 一如往常我們要把jQuery載入頁面, 很幸運的,馬克在這個部落格裝了flickr外掛, 所以我們不用再載入這個頁面, 如果你是在家做實驗, 請務必載入
<script src=”http://code.jquery.com/jquery-latest.js”></script>

接下來呢, 就是要跟各位介紹event啦, 請在你的網頁內的javascript處打入以下內容:

<script>
$(document).ready(function(){
$('#closeheader').click(function(){
$('#headerimg').toggle();
});
$('#sidecloser').click(function(){
$('.sidebar').toggle();
});
$('#commentcloser').click(function(){
$('#commentform').toggle();
});
});
</script>

以上的code是說, 當你這個頁面load完之後, 如果有人去按了某個 id=”closeheader” 的element, 就把 id=”headerimg” 的元素關掉或打開, 同樣的如果有人去按了 id=”sidecloser” 的原素, 就把頁面上所有class 屬於 sidebar的元素關掉或打開, 第三個呢, 類似第一個, 同理可推. 詳細的可用event請見這裡
jQuery另外一個方便的地方是他直接使用css的selector來找到頁面上的元素, 所以如果你有辦法用css去layout你的頁面, 也就等於你會使用jQuery找到頁面上的元素, 詳情請見更詳細的解說.

好吧, 完成成果如下:

給不喜歡上面這個Banner的人

<button id="closeheader">Header開關(id是closeheader)</button>

給覺得左邊太亂的人:

<button id="sidecloser">側欄開關(id是sidecloser)</button>

給不想讓人留言的作者:

<button id="commentcloser">留言開關(id是commentcloser)</button>

給不喜歡廢話的人:

<button id="pcloser">關關看?!</button>

本篇的練習黨可在此下載

]]> http://www.silkrt.com/v01/2008/07/23/jquery-tutorial-2/feed/ 7 jQuery簡介+台灣討論區推廣 http://www.silkrt.com/v01/2008/07/12/jquery-tw/ http://www.silkrt.com/v01/2008/07/12/jquery-tw/#comments Sat, 12 Jul 2008 07:15:40 +0000 Alfred Kang http://www.silkrt.com/v01/?p=511 這邊我來推銷賣藥一下, jQuery TW.

做互動的朋友,也就是我,或是某些人,在本質上就有一種偷懶或是耍賤會得到快感的個性,所以寫code可以生出50片葉子掉下來,就不會好好認真的去把他畫出來…..ㄎㄎ

我從去年開始剛好有一些機會可以玩一些AJAX的玩意,所以就嚐遍現在百家爭鳴的ajax libraries, 像prototype, scriptaculous, jQuery, MooTools, YUI, Dojo….說穿了AJAX只是包裝過的javascript lib, 不同的AJAX lib就是有不同的包裝哲學跟使用哲學, 像prototype/scriptaculous就搞得很RoR, 喜歡很灑狗血轉場的就去找MooTools, 我個人呢, 我個性有時候很急又沒耐心, 覺得寫code就是要寫的有快感, 所以我選jQuery.

用一句話把jQuery說完就是–>又賤又快!!

昨天我們的Ailleen Chiang說, 想要看jQuery是怎麼一回事, 現在我就在這邊做個3分鐘教學, 3分鐘讓你學會AJAX, 就在這裡啦, 就是絲路(Silkrt)啦:

(範例目的: 載入jQuery, 用jQuery把HTML的<p>tag 內容改寫)

1. 準備一個空白的HTML page, 當然啦我是說<body>空白, 其他的部分(<html>, <head>)該有的還是要有.

2. 把jQuery載入這個頁面, 你可以直接把下面最新的最新的source貼到<head>裡面:
<script type=“text/javascript” src=“http://code.jquery.com/jquery-latest.pack.js”></script>
或是去他的網站下載, 點這裡:

3. 在<body>裡面加一個<p></p>tag組, p 的意思是說一個文字段落

4. 隨便在頁面找個地方, 然後把下面的code耶進去, 可以貼在head裡面,也可以貼在body裡面:
<script type=”text/javascript”>
$(document).ready(function(){
$(“p”).text(“搞定了”);
});
</script>

5. 說明: 當然啦,你可以直接在<p>tag裡面寫入”搞定了”,但是這邊要強調的重點是,這個<p>tag本來是空空如也,在這個範例裡面,你是用jQuery把這個”搞定了”寫進去這個<p>tag, 過程詳敘:–> 當這個HTML頁面在你這個browser裡面下載到最後一行後( $(document).ready ), 把你這個頁面所有的<P>tag裡面寫入 “搞定了”.

6. 酷吧, 搞定了, 真是老少咸宜, programmers, designers人人愛, 一點都不難, 我只能向在台北和碩工業設計部門的張珈偉先生說:”傑克, 這真是太神奇了!”.

以上範例下載檔案在此

最後呢, 就是賣藥時間啦, 我開了一個jQuery的台灣站 http://www.jquery.com.tw, 基本上呢這個網站沒幹嘛, 所以才希望大家能夠來共襄盛舉, 他最終的目的是讓你link進去”jQuery台灣“的Google討論區, 在那邊你可以找到很多幫助你的高手,像”國二學生認真打雜“的ericsk,還有寫了網頁設計 愛上jQuery 的Michael Lo….還有很多人…去了就知道, 基本上因為在那邊的人都是高手, 所以他們比較少問問題, 因為都沒有人問問題, 這些高手都很閒, 請大家有問題盡量問, 別客氣, 有google帳號的人,就馬上加入群組吧!!

另外,有興趣的人可以從這些教學開始切入

國二學生在他的部落格上有很多教學跟心得

Michael送了我一本他寫的書, 在這邊做個拋磚引玉, 紐約地區想要這本書的朋友請留言,先搶先贏.

去年區參加jQuery Camp 2007, 碰到Karl Swedberg時以特惠價賣給我的Learning jQuery Book也在此加入贈書行列, 一樣紐約地區, 留言.

Michael寫的這本書真簡單易懂, 留言較晚的朋友也不要錯過, 去買一本, 只花你一個晚上就可以學會AJAX的技巧喔!!

大家來寫jQuery吧 …. ㄎㄎ

]]> http://www.silkrt.com/v01/2008/07/12/jquery-tw/feed/ 4