playts: 2008-12

2008年12月30日星期二

blogger加入代码高亮

编辑blogger的模板HTML代码，将下面代码加入 head 内

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>

增加onload='prettyPrint()'到body

<body onload='prettyPrint()'>

以后需要使用将需要高亮的代码加上

<pre class="prettyprint">
code...
</pre>

google-code-prettify项目主页

2008年12月28日星期日

学习Google AJAX 供稿 API

看了Google AJAX 供稿 API，感觉到google的强大和开放性。使用Google AJAX 供稿 API我们可以轻松为自己的站点添加这些酷功能。

通过 AJAX Feed API，您可以下载仅使用 JavaScript 的任意公共 Atom 或 RSS 供稿，因此您可以轻松地嵌入供稿和您的内容及其他 API（例如 Google 地图 API）。对于 Flash 和其他非 Javascript 环境，该 API 将显示一个原始 RESTful 界面（新增）！，其返回的经过 JSON 编码的结果可由大多数语言和运行时轻松处理。

AJAX Slide Show

Step 1 - Load AJAX Feed API and Slide Show

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>

Step 2 - Define a location on your page for the Slide Show

<div id="slideShow">Loading...</div>

#slideShow {
width : 160px;
height : 160px;
padding : 10px;
}

Step 3 - Create a GFslideShow and bind it to your page

<script type="text/javascript">
  function LoadSlideShow() {
    var feed  = "http://feed.photobucket.com/images/sunsets/feed.rss";
    var options = {displayTime:2000, transistionTime:600, scaleImages:true};
    var ss = new GFslideShow(feed, "slideShow", options);
  }
  /**
   * Use google.load() to load the AJAX Feeds API
   * Use google.setOnLoadCallback() to call LoadSlideShow once the page loads
   */
  google.load("feeds", "1");
  google.setOnLoadCallback(LoadSlideShow);
</script>