Google AJAX Search APIで検索窓を設置してみる2 - タブバージョン

 Google AJAX Search APIで検索窓を設置してみるで紹介した検索の検索結果をタブで表示する方法を紹介します。タブになったため検索結果は4件ずつ表示されます。
Loading
 基本形のJavaScriptから赤い部分が変更されています。CSSとbody部分は基本形と同じです。
<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&key=取得したAPI key" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[

function OnLoad() {
      var searchControl = new GSearchControl();

      // 表示する検索の種類(ウェブ、ビデオ、ブログ、ニュース、画像、書籍)でいらない検索は削除可能です。
      searchControl.addSearcher(new GwebSearch());
      searchControl.addSearcher(new GvideoSearch());
      searchControl.addSearcher(new GblogSearch());
      searchControl.addSearcher(new GnewsSearch());
      searchControl.addSearcher(new GimageSearch());
      searchControl.addSearcher(new GbookSearch());

      var drawOptions = new GdrawOptions();
      drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
      searchControl.draw(document.getElementById("searchControl"), drawOptions);

      // 最初に表示する検索結果。空白の場合は初期状態で検索結果は表示されません。
      searchControl.execute("");
    }
    GSearch.setOnLoadCallback(OnLoad);

    //]]>
</script>
 タブバージョンでは検索結果が4件表示されますが、検索結果を増やすこともできます。下の赤い部分を追加すると検索結果が8件表示されます。
var searchControl = new GSearchControl();

searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);

searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GimageSearch());
searchControl.addSearcher(new GbookSearch());
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加