少年幃禿的煩惱


心情也微微的...凸

最近的學習心得 都改放到 少年幃禿的煩惱@Google Sites

2008/06/28

Google AJAX APIs (2) - Using Google's AJAX APIs

Getting Started:
Google 有一系列的 AJAX APIs, 可以不需要寫 server side code, 直接使用在網頁上, 像是 Maps API, AJAX Search API, 還有 AJAX Feed API. 只需要在網頁的最上方 include 一個 <script> tag, 以及提供 Google API key 就可以使用了.

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script> Google AJAX APIs script 載入之後, 在頁面上使用 google.load 來指定要使用的模組. <script type="text/javascript"> google.load("maps", "2"); google.load("search", "1"); </script> 上面的範例載入了, 第2版 Maps API, 和第1版 AJAX Search API. 執行了 google.load 之後, 就可以在頁面上使用已經讀取過的模組了. 另外可以使用 google.setOnLoadCallback 去指定 document load 的處理函數. 請看底下範例: &lt;html> &lt;head> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script> <script type="text/javascript"> google.load("maps", "2"); google.load("search", "1"); // 當網頁讀取之後, 呼叫這個函式. function initialize() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); var searchControl = new google.search.SearchControl(); searchControl.addSearcher(new google.search.WebSearch()); searchControl.addSearcher(new google.search.NewsSearch()); searchControl.draw(document.getElementById("searchcontrol")); } google.setOnLoadCallback(initialize); </script> &lt;/head> &lt;body> <div id="map" style="width: 200px; height: 200px"></div> <div id="searchcontrol"></div> &lt;/body> &lt;/html>
Detailed Documentation:
google.load
Google AJAX APIs <script> 載入一個google.load 方法, 透過它來載入個別的 AJAX APIs, 它的寫法:
google.load(moduleName, moduleVersion, optionalSettings)
moduleName: 是 API 的名稱(例如: "maps", "search"). 模組名稱同時也是 API 的 namespace.
modileVersion: 指定 API 的版本. 這是一個必要的參數.
optionalSettings: 用來設定 API 其它選項, 例如, 你可以直接指定 Maps API 使用日文 UI. google.load("maps", "2", {"language" : "ja_JP"}); 或是指定不要使用 API 預設的 CSS: google.load("feeds", "1", {"nocss" : true}); 使用這些選項請參考各 API 的文件.

API Namespaces:
API 的模組名稱同時也是它的 namespace. 所以 "maps" 模組的方法, 全部在 google.maps 底下, 以前的 Google AJAX APIs 像是 Maps API 的 classes 和 常數, 使用 G 當作字首, 依照新的命名原則, class 不會再是 G 開頭了. 例如: GMap2 變成 google.maps.Map2 現有使用 G 當字首的 APIs 會繼續同時支援新舊兩種命名方式. 但是新的 APIs 只會支援 google.moduleName

API Versioning:
google.load 的第二個參數是 API 的版本. 每個 AJAX API 都有一個主要版本和修定版本. AJAX APIs 更新的非常頻繁, 為了保持穩定性, 所有的 AJAX Apis 都有一個有效的 stable versiontest version. 例如: 最新的2.24版, 前一個修定版本 2.23 會變成這個 API 的 stable version. 而 2.24 則會是 test version. 如果你要求 version 2的 API, 而且沒有指定修定版次, 你會自動的取得 stable version 2.23. 如果你需要 test version, 你可以明確的指定 version 2.24, 或是你可以使用特別的通配字元 2.x, 這個會指定到 API 的 test version 2.24. 直到有一個更新的版次出現.

Dynamic Loading:
AJAX API loader 可以動態的引用到網頁上. 如果你不想要網頁讀取的時候就使 API 生效, 這是非常有用的. 例如: 使用者在執行搜尋或是其他動作, 才執行 API.
這可以使用第三個參數 callback 來完成, 範例如下: function mapsLoaded() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); } function loadMaps() { google.load("maps", "2", {"callback" : mapsLoaded}); } 當你呼叫 loadMaps(), 他會載入 Maps API 並且在 API 準備好之後執行 mapsLoaded. 確定 DOM 準備好了之後, 當你呼叫 google.loadcallback 參數, 它會試著在 DOM 加上一個 element. 隨著載入 Maps API 之後, 會立即執行所提供的 callback, 而且你不需要擔心同樣的 API 會載入多次的問題.

你也可已經由建立一個 script element 動態的載入 Google AJAX API loader, 同樣設定他的來源 URL "http://www.google.com/jsapi?...", 加上一個查詢參數 callback. 這個 callback 會在 loader 準備好之後呼叫. 範例如下: function mapsLoaded() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); } function loadMaps() { google.load("maps", "2", {"callback" : mapsLoaded}); } function initLoader() { var script = document.createElement("script"); script.src = "http://www.google.com/jsapi?key=ABCDEFG&callback=loadMaps"; script.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(script); }

Google AJAX APIs (1) - What are the AJAX APIs?

Google's AJAX APIs 目前提供了六個專案, 可以輕鬆的在網頁上面, 用簡單的幾行 Javascript 在畫面上加上 map, dynamic search box, 或是 download feeds. 目前提供的六種產品有 :

2008/06/27

Prettify - syntax highlight

mikesamuel 做的 syntax highlight 也是使用 Javascript & CSS 完成的 - google-code-prettify
支援的語言包含 C系列, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, 還有Makefiles. 而 Ruby, PHP, Awk, Perl 表現也還可以, 但是因為註解符號的關係無法使用在 Smalltalk, Lisp-like, CAML-like上.

使用方法 :
1. include .js & .css

&lt;link href="prettify.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="prettify.js"></script> 2. 在 document.onload 的時候加上 prettyPrint(); 就可以了 <script type="text/javascript"> $(function() { prettyPrint(); }); </script> 3. 喔, 差點忘了說, 把要 highlight 的 syntax 放在 <pre class="prettyprint"> // 這裡 </pre> <code class="prettyprint"> // 或是這裡 </code> 範例 :
<pre class="prettyprint"/> (有框框):
#!/bin/bash

# Fibonacci numbers
# Writes an infinite series to stdout, one entry per line
function fib() {
  local a=1
  local b=1
  while true ; do
    echo $a
    local tmp=$a
    a=$(( $a + $b ))
    b=$tmp
  done
}

# output the 10th element of the series and halt
fib | head -10 | tail -1
<code class="prettyprint"/> (沒有框框): /** * nth element in the fibonacci series. * @param n >= 0 * @return the nth element, >= 0. */ function fib(n) { var a = 1, b = 1; var tmp; while (--n >= 0) { tmp = a; a += b; b = tmp; } return a; } document.write(fib(10));

Javascript Console

剛剛在右手邊加上了一個可以線上執行 Javascript 的功能, 臨時沒有找到類似的 libs, 所以做了一個超簡單的版本, 因為我有把 jQuery & prototype include 進來, 所以可以直接使用 jQuery 的 $jq(jQuery) 與 prototype 的 $ 來用.

2008/06/25

Fix background image

將圖片固定在左上角:

<style type="text/css"> <!-- body { background-image : url(picture.gif); background-repeat : no-repeat; background-attachment : fixed; background-position :0% 0%; } --> </style> 修改 background-position :0% 0%; 就可以改變位置

Extend Pattern of jQuery

<script type="text/javascript"> (function($){ $.extend({ repeat: function(str, i) { if (isNaN(i) || i == 0) return ""; return str + $.repeat(str, i-1); } }) })(jQuery); </script> 使用這個 pattern 寫 jQuery plugin, 當與 prototype 同時使用的時候, 不會有衝突問題.

Recursive Pattern

<script type="text/javascript"> function repeat(str, i) { if (isNaN(i) || i <= 0) return ""; return str + repeat(str, i-1); } </script>

jQuery UI Datepicker

Marc Grabanski & Keith Wood 製作的 calendar script : jQuery UI Datepicker
目前版本 : jQuey UI Datepicker v3.4.3

安裝步驟:
1. 首先當然是最重要的 jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 2. 接著include Datepicker 的 CSS & Javascript files <style type="text/css">@import url(ui.datepicker.css);</style> <script type="text/javascript" src="ui.datepicker.js"></script> 3. 如果需要的話, 可以設定 Datepicker 的 global default values $.datepicker.setDefaults({ showOn: 'both', buttonImageOnly: true, buttonImage: 'calendar.gif', buttonText: 'Calendar' }); 4. 呼叫 $.datepicker(); $('#date1').datepicker(); $('#date2').datepicker({defaultDate: +7}); 範例:
date1:
date2:
其他參數: showOn: 'both', // 指定何時顯示日曆, 'focus', 'button', 'both' 三種參數 buttonText: '打開日曆', // 日曆圖片的 alt buttonImage: 'calendar.gif', // 日曆圖片位置 buttonImageOnlt: true, // !!?? firstDay: 1, // 每週開始日期, 1~7 代表 一~日 changeMoneth: true, // 可否改變月份 changeYear: true, // 可否改變年份 minDate: new Date(2005, 1-1, 26), // 最小日期, 放入 Date, int, 與 String maxDate: '30d', // 最大日期, 文字參數 d/w/m/y for days/weeks/months/years dateFormat: 'yyyy/MM/dd', // 日期格式 rangeSelect: true, // 範圍選擇 numberOfMonths: 2, // 顯示多少個日曆, int, [int, int](矩陣方式顯示) stepMonths: 3, // 每次跳幾個月份 prevText: '&lt;&lt;Prev Months', // 配合跳多月份使用 nextText: 'Next Months>>', // 配合跳多月份使用 defaultDate: 2, // 預設日期 // include 語言包 <script type="text/javascript" src="ui.datepicker-zh-TW.js"></script> // inline config <input type="text" size="10" class="inlineConfig" onchange="showDay(this);" date:closeAtTop="false" date:firstDay="1" date:appendText="which is a"/>

jQuery Puzzle

可以輕鬆的將圖片製作成拼圖, 來源在這裡
範例:





Javascript: <script src="http://wxy.googlecode.com/svn/trunk/blogger/jquery/jquery.puzzle.js" type="text/javascript"></script> <script language="javascript"> (function($) { $(".puzzle").puzzle(61); })(jQuery); </script> HTML: <div class="puzzle"><img src="Orz.jpg"/></div> 收工, 搞定!!

update1: 如果這個外掛想要與 prototype 使用, 要稍微修改一下 .js, 把裡面的 $ 改成 jQuery 或是包在(function($) {/* code here */})(jQuery); 裡面.

Pretty date

John Resig 製作的一個 format date script: pretty.js

使用方法很簡單, 只要這樣...
<script language="javascript"> prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago" prettyDate("2008-01-27T22:24:17Z") // => "Yesterday" prettyDate("2008-01-26T22:24:17Z") // => "2 days ago" prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago" </script>
而且這個library實作起來也不麻煩..
不過我個人喜歡把 line: 8 改成 return time;
這樣取得 return value 的時候才不需要再次判斷, 是否有值.
<script language="javascript"> function prettyDate(time){ var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")), diff = (((new Date()).getTime() - date.getTime()) / 1000), day_diff = Math.floor(diff / 86400); if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 ) return; // 改成 return time; return day_diff == 0 && ( diff < 60 && "just now" || diff < 120 && "1 minute ago" || diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" || diff < 7200 && "1 hour ago" || diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") || day_diff == 1 && "Yesterday" || day_diff < 7 && day_diff + " days ago" || day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago"; } </script>

2008/06/24

測試 syntaxhighlighter

<script language="javascript"> (function($) { $(function() { // syntaxhighlighter dp.SyntaxHighlighter.ClipboardSwf = 'clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); }); })(jQuery); </script> update1: Orz...本來把 css 檔案放在 Google Page Creator, 結果被封鎖起來了, 現在改放到 http://geocities.yahoo.com/ 這邊了.

update2: 嘿嘿解決了, 把所有的 static file 放到 Google Code 上面去, 不過用 svn 把檔案送上去之前, 要指定 mime-type, 設定方法參考這裡 http://code.google.com/p/flexlib/wiki/HowToBuild, 另外 http://dean.edwards.name/weblog/2007/03/google-it/ 的第 27 個 comments 也說明, 這樣做應該是可以的.