I know this topic has been raised before and you can find many workable solution. Some solution does not works with content via ajax and only can support one ui tabs. This solution is to overcome that limitation.
First you must bind select event to ui tabs.
$('#your_tabs_id').tabs({select: function(ev, ui) { location.href = "#/ui.tabs/" + $(this).attr("id") + "/" + ui.index; return true; }}); With this way, if you select any tab, it will redirect you to url #/ui.tabs/your_tabs_id/your_tabs_currentindex. Now, define routes in your sammy application to handle this url.
var app = $.sammy(function() { this.get("#/ui.tabs/:id/:index", function(context){ $(document.getElementById(this.params["id"])).tabs("select",parseInt(this.params["index"],10)); }); }); I define routes with :id and :index to capture tabs id and tabs current index into params[“id”] and params[“index”] respectively. So, with this information, we know which tabs index to select. You can also implement this technique on accordion. The concept is similar.
Posted via email from Aerialicious Solution