Tabbed Search Module

This module implements a tabbed search interface against multiple Google Custom Search Engines (CSEs) as is demonstrated in the "consumer search" example directly below.

• Download Tab Panel Module - Beta (zip) - Last updated 6/28/07
• Table of the Google Custom Search Engines (CSE)

Instructions

1. Unzip "tabbed_search.zip."
2. Copy the file named "gsearch_CA.css" to your "css" directory on your web server..
3. Copy the file named "tabbed_googleCSE.html" file to your "ssi" directory on your web server.
4. Go to www.Google.com and register your department for a free google account if you have not already done so. If you do not see a register link, go to the "sign in" link in the upper right hand corner of the page. Click on the link to "create a new account."
5. After you've registered and confirmed your account through email, go to http://code.google.com/apis/ajaxsearch/signup.html to obtain a Google AJAX Search API key. It will look something like: "ABQIAAAAVnV-znR9mz4M8R3FtGWGwBQRL0OlSdXk0qZVID0yeg_VBgDLQxR5vFcR09fqhW5XN6ieDfAzwS3wFw".
6. Open the file "tabbed_googleCSE.html" and replace the Google AJAX Search API key with the one you just obtained for your website and then save the file. The edit should occur on line number 5, after "key=" in the hyperlink. Note: If you registered for a DNS name and your test site is under a different DNS or IP Address, the key will pop up a JavaScript error.
7. To attach the new CSS file to your template. Add the following code under your department specific "ca_department.css" code at the top of the page with the rest of the CSS styles.

   /* ***** The department-specific style sheet statement goes here ***** */

   @import url("/css/ca_department.css");
   @import url("/css/gsearch_CA.css"); /* Insert this Code */

8. To display the Tabbed Search module, copy the following to the content of your web page.

   <!-- *********************************** -->
   <!-- Tabbed Search Module -->
   <!-- *********************************** -->

   <!--#include virtual="/ssi/tabbed_googleCSE.html" --> /* Insert this Code */

   <!-- *** End Tabbed Search *** -->

9. Now call up the URL to the tabbed_googleCSE.html file in a browser to view.
10. Optional: To change the Tab Buttons on the new module to match your Temlate color scheme, modify the following styles in "gsearch_CA.css." The code is located at line # 335 and # 350. Your color scheme code can be retrieved by opening your coordinating color scheme CSS file, the codes will be at the top of the file.

    .gsc-tabHeader.gsc-tabhActive {

    .....
    background: #C84B13; /* CA color scheme Orange ** *** Change Template Color Scheme Active Button here */
    color: #FFFFFF;
    ....;
    }

    .gsc-tabHeader.gsc-tabhInactive {

    ....
    background: #253B5A; /* CA color scheme Blue ** Change Template Color Scheme Inactive Button here */
    color: #FFFFFF;
    ......
    }

Result:

You should see a "vanilla" tabbed search page on "consumer" related information. This works because of development work that has already been done to develop the CSEs that it utilizes (look at the code for the tabbed_googleCSE.html to view the address keys for the different CSEs). These CSEs are reusable search configurations already developed by the State that can be utilized by any department. You can also develop your own if you need to by going to: http://Google.com/coop/cse/ to create them. If you do create your own CSE, please share it with the eServices Office so that other departments may use it as well.

Important: When you develop your CSE, if you utilize the Google "URL patterns" capability on a URL of a website where content is controlled by a database web application (such as a content management system or a portal), you should test the URL pattern by itself in a "Test CSE." That way, you can be sure that your URL pattern is actually working the way you would expect it to. Some database web applications do not work well with URL patterns.

Note: To see the actual individual CSE, at the bottom of one of the tabbed CSE search results click on the "More results >>" link. It will take you out to a separate page that is only for that one CSE - and you can search on it there.

Implementation:

To see the actual individual CSE, at the bottom of one of the tabbed CSE search results click on the "More results >>" link. It will take you out to a separate page that is only for that one CSE - and you can search on it there.

View Tab Search Panel Module Sample Below

The sample below is the same one used in the WebTools homepage.