Make the whole block selectable
<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');
加载中,请稍侯......
精彩评论