Since I've received no answer to the above posting, I've been left with a few days to mull it over and come up with the following solution. Any additions or improvements welcome.
<script>
YUI({}).ready('node', 'event', 'transition', 'anim', 'aui-tabview', 'aui-pagination', function(Y) {
var tabs = '';
var setup = '';
var tabTargetID = '';
tabs = new Y.TabView(
{
srcNode: '#myTab',
type: 'pills'
}
).render();
setup = {
contentId: function() {
if (tabTargetID !== '') {
var content = tabTargetID;
} else {
var id = tabs.getActiveTab();
var href = id.one('a').get('href');
var arr = href.split("#");
var content = '#' + arr[1];
}
return content;
},
pages: function() {
return Y.all(setup.contentId() + " > div");
},
currentTabPageTotal: function() {
return setup.pages()._nodes.length;
}
};
var pages = setup.pages();
var pg = new Y.Pagination(
{
page: 1,
total: setup.currentTabPageTotal(),
boundingBox: '#pagination',
circular: false,
contentBox: '#pagination > ul',
offset: 1,
on: {
changeRequest: function(e) {
var instance = this,
state = e.state,
lastState = e.lastState;
// Set the pagination links active state
Y.all('.pagination > ul > li:not(.pagination-control)').removeClass('active');
var pg_links = Y.all(".pagination > ul > li:not(.pagination-control)");
pg_links.item(state.page - 1).addClass('active');
// Hide all but the focussed tabs 1st paginated page
pages.setStyles({display: 'none', opacity: '0'});
pages.item(state.page - 1).setStyle('display', 'block')
.transition({
opacity: {value: 1, duration: 1}
});
}
},
after: {
changeRequest: function(e) {
// goto top
a = new Y.Anim(
{
node: 'body',
to: {scrollTop: 0},
duration: 0.4,
easing: Y.Easing.easeOut
}
);
a.run();
}
},
strings: {
next: '»',
prev: '«'
}
}
).render();
tabs.on('selectionChange', function(e) {
var tabIndex = tabs.indexOf(e.newVal);
var tabContents = Y.all(".tab-content > div");
var tabTarget = Y.one(tabContents.item(tabIndex));
tabTargetID = '#' + tabTarget.get('id');
pages = setup.pages();
// Hide all but the focussed tabs 1st paginated content
Y.all(tabTargetID + ' > div').setStyles({display: 'none', opacity: '0'});
Y.one(tabTargetID + ' > div').setStyles({display: 'block'})
.transition({
opacity: {value: 1, duration: 1}
});
// For the focussed Tab, build the pagination links with x number of links and set to 1st page
pg.setAttrs({page: 1, total: setup.currentTabPageTotal()});
// Highlight the 1st pagination link
Y.all('.pagination > ul > li:not(.pagination-control)').removeClass('active');
Y.one('.pagination > ul > li:not(.pagination-control)').addClass('active');
});
});
</script>