I did it! I made tabs! Here's how I did it, using JQuery UI
http://jqueryui.com/demos/tabs/.
In the main Ajax Search results tpl, I added:
<div id="tabs">
<ul id="tablist">
</ul>
[+as.listGrpResults+]
</div>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
The div "tabs" surrounding the as.listGrpResults satisfied the requirements of a basic JQuery UI tabbed element. Then empty "tablist" ul gets populated dynamically from the groups themselves.
This is put in the beginning of the grpResult tpl:
[+as.grpResultsDef:is=`1`:then=`
<style type="text/css">
#tablist li{display:none;}
#tablist li.ui-state-default{display:inline;}
</style>
<script>
var parent = document.getElementById('tablist');
var listItem = document.createElement('li');
var str = '[+as.grpResultId+]';
var title = str.substring(10);
listItem.innerHTML = '<a href="#[+as.grpResultId+]">'+title+'</a>';
parent.appendChild(listItem);
</script>
The script creates and loads li elements for the tabs on-the-fly. The title is extracted from the as.grpResultId string by stripping the prefix that AjaxSearch adds to the value of the grouping TV. There should be some other way of getting the group title, but I couldn't find anything.
The style block is an ugly hack to deal with the problem of new li elements being added every time the user clicks the "next" or "previous" paging links. These tags aren't given the classnames by the UI tabs script, so it's safe to hide all classless li elements, and show the ones with the classnames. It would be better to figure out javascript code to simply not create the li element if an li element with the same content already exists, but I hate javascript and have done enough for one day.
Anyway, aside from some basic styling, it makes working tabs of a grouped Ajaxified AjaxSearch, using JQuery.
☆ A M B ☆