Bridge to the Glory: HTML5 ＋ jQuery でGoogle検索

ブログなどでよくみるGoogle検索ガジェットのようなもの。

このサンプルではGoogleサーバにホスティングされたjQueryを利用します。
jQuery他、Dojo、jQuery UIなどのJavascriptフレームワークを利用可能です。

メリットとしては、Googleサーバにて無期限にホストしてくれるため、
自身が用意したサーバに配置して、
都度バージョンを管理したりする必要がないのが強みですね！！

ソースコードはこちら。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 非同期通信サンプル Google Ajax Libraries APIを使用</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
    // Google Search APIを利用(バージョンは1.0で問題なし)
    google.load('search', '1');
    // GoogleサーバにホスティングされたjQuery1.X.Xの最新版を自動的にロード
    google.load('jquery', '1');
    google.setOnLoadCallback(function() {
      $(function() {
        // SearchControlオブジェクトを生成
        var sc = new google.search.SearchControl();
        // Web検索サービスを設定。他にもローカル検索サービス、ブログ検索サービス、ビデオ検索サービスなど様々。
        sc.addSearcher(new google.search.WebSearch());

        // 検索結果をタブ表示
        var drawOptions = new GdrawOptions();
        drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

        // SearchControlに格納された検索結果を描画
        sc.draw($('#sc')[0], drawOptions);
        // 検索実行
        sc.execute("");
      }); // end of jQuery
    }); // end of setOnLoadCallback
// -->
</script>

</head>
<body>
  <div id="sc">Loading...</div>
</body>
</html>

Bridge to the Glory

2011年4月30日土曜日

HTML5 ＋ jQuery でGoogle検索

0 件のコメント:

コメントを投稿