Hi,
I had posted before but didn't get it working when loaded via Knack's AJAX, worked fine with a page load.
And it was covering multiple jQuery/Bootstrap Mods so now split for just jQuery Tabs and working correctly which ever way the page loads and I will add the other things Individually too:
So basically add the below to your custom JS:
$('<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" media="screen" /><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" media="screen" />').insertBefore('#knack-dist_1');
var fwg_js_files = ['https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'];
LazyLoad.js(fwg_js_files, function () {
$(document).on( 'knack-scene-render.any', function(event, view, records) {
var tableLoops = 0;
$('.kn-table').each (function (index, element) {
var tableCount = $('.kn-table').length;
var recordCountTexts = $(this).find(".kn-entries-summary").text();
var recordCountTextsSplit = recordCountTexts.split("of");
var recordCountTotalText = recordCountTextsSplit[1];
var recordCountTotal = $.trim(recordCountTotalText);
tableLoops++;
if (tableCount > 1) {
var iconClassName = $(this).find('.kn-table-table > tbody > tr:first > td:first').find('i').attr('class');
var childID = $(this).attr("id");
var childName = $(this).find('.view-header > h2').text();
if ($("#tabs").length === 0) {
$('.kn-table').first().before('<div id="tabs"><ul>');
}
var parentID = $(this).parent().attr('id');
if (parentID === 'tabcontent-' + childID) {
} else {
$('#kn-' + view.key).find('#tabs > ul').append('<li><a href="#tabcontent-' + childID + '"><i class="'+ iconClassName +'" style="margin-right: 0.4em"></i>' + childName + ' (' + recordCountTotal + ')' + '</a></li>');
$('#kn-' + view.key).find('#tabs').append('<div id="tabcontent-' + childID + '">');
$(this).appendTo('#tabcontent-' + childID + '');
}
if (tableLoops === tableCount) {
jQuery( "#tabs" ).tabs();
tableLoops = 0;
}
}
});
});
});
And then add the below to your custom CSS:
#tabs {
margin: 3px;
border: none !important;
}
.ui-tabs-panel {
border: 1px solid #aaa !important;
}
.ui-widget-header {
border: none !important;
background: none !important;
}
.kn-content #kn-app-menu li.active a {
background: #fff !important;
color: #000 !important;
}
ul.ui-tabs-nav li, ul.ui-tabs-nav li a {
background: #074376 !important;
color: #fff !important;
}
ul.ui-tabs-nav li:hover, ul.ui-tabs-nav li a:hover {
background: #2D6CA2 !important;
color: #fff !important;
}
ul.ui-tabs-nav li.ui-state-active, ul.ui-tabs-nav li.ui-state-active a {
background: #fff !important;
color: #000 !important;
outline: none !important;
}
ul.ui-tabs-nav li.ui-state-active:hover, ul.ui-tabs-nav li.ui-state-active a:hover {
background: #fff !important;
color: #000 !important;
outline: none !important;
}
.ui-tabs .ui-tabs-nav {
padding: 0 !important;
}
It will work on any scene when there is more than one table, so if you want it to work everywhere there is more than one table then just copy and paste without modifying.
You can of course add a scene to the 'knack-scene-render.any" part above in place of the ".any" and then duplicate for the scenes you want to use it on only.
It also uses an icon from the first column of each of the tables in each tab as the icon on the tab shown just before the text, I will add a request for Knack to add an Icon option to the table setup page under options so you could use that in future with an update on the code.
It also shows the number of records in the tab after the text which is the total record not just the ones currently showing based on paging, again this can be modified easily.
Thanks
Dan