Make the whole block selectable_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-18 15:11 出处：网络

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Alternate Results Location - Google AJAX Search API Sample</title>
    <!-- Replace with http://www.google.com/jsapi -->
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">//<![CDATA[
        google.load('search', '1');
        function OnLoad() {
          // create a search control
          var searchControl = new google.search.SearchControl();
          // web search, open, alternate root
          var options = new google.search.SearcherOptions();
          options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
          options.setRoot(document.getElementById("somewhere_else"));
          开发者_Go百科searchControl.addSearcher(new google.search.WebSearch(), options);
        searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
          var options = new google.search.SearcherOptions();
          options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
          searchControl.addSearcher(new google.search.VideoSearch(), options);
          // tell the searcher to draw itself and tell it where to attach
          searchControl.draw(document.getElementById("search_control"));
    }
        google.setOnLoadCallback(OnLoad);
        //]]>
        </script>
    <style type="text/css">
    body {font-size:12px;}
    table {position:relative;margin-left:auto;margin-right:auto;border:solid px grey;}
    .top {padding-top: 75px;}
    .gs-result {padding: 6px;border: solid 1px #DCDEE0;background-color: #EDEFF0;}
    .gs-result:hover { border: solid 1px #B9C3C9;}
    .gs-text-box {margin-top: 10%;}#search_control { margin: 20px; }
    </style>
    </head>
    <body>
    <table width="700px">
    <tr>
        <td class="top" valign="top" width="400px">
            <div id="somewhere_else">
                Loading
            </div>
        </td>
        <td valign="top" width="300px">
            <div id="search_control">
                Loading...
            </div>
        </td>
    </tr>
    </table>
    </body>
    </html>

If you look at this in your browser you will see big blocks that twill have a darker border if you hover them. I was wondering if there is a way of making the whole block selectable instead of just the href of that block. I don't think it can be done with CSS, I think JavaScript (preferable jquery) is the way to do it. (Obviously I don't now how..)

If you inspect the source of the page after you've searched for some results, you will find that the boxes that you wish were 'clickable' (and not 'selectable', I think you wanted to say clickable instead) have a class 'gs-result'

Hence within your javascript, you should do something like this :

$('.gs-result').live('click', function() {
    window.location.href = $(this).find('a.gs-title').attr('href');
});

This will achieve what I believe you wish to achieve. You can additionally add a css style to the '.gs-result' to make the mouse cursor to look like a hand to indicate to the user that it is clickable.

$(document).ready(function() {
    $('whichever-divs-you-want-to-select').click(function() {
        $('div').removeClass('selectedBlock');
        $(this).addClass('selectedBlock');
    });
});

You can then access your selected block by $('.selectedBlock');