jQuery UI - Sorting tabs and remembering positions
Article Index
Just now digging into the archives of Google and not found a normal solution of this problem. All the proposed options have only worked in one of the variations - or only with the sortable pluging, or only with the cookie plugin.
So, let's begin.
We need the following libraries and plugins.
jQuery 1.6.4 version or later. If you want to adapt the code under an older version, simply replace the prop() for attr()
jQuery UI 1.12+ and above with modules Core, Widget, Mouse, Sortable, Tabs
Javascript code looks like this:
jQuery(document).ready(function($){
$('#tabs1').tabs().find('.ui-tabs-nav').sortable({
axis: 'x',
update: function(){
Cookies.set($(this).parent().attr('id'), $(this).sortable('toArray').toString(), { expires: 365 });
}
});
$('#tabs2').tabs().find('.ui-tabs-nav').sortable({
axis: 'x',
update: function(){
Cookies.set($(this).parent().prop('id'), $(this).sortable('toArray').toString(), { expires: 365 });
}
});
$('#tabs3').tabs().find('.ui-tabs-nav').sortable({
axis: 'x',
update: function(){
Cookies.set($(this).parent().prop('id'), $(this).sortable('toArray').toString(), { expires: 365 });
}
});
function restoreOrder(selector){
var $selector = $(selector),
cookie = '',
IDs = [],
items = [],
rebuild = [];
if (!$selector || $selector.length < 1) return;
$.each($selector, function(key, object){
if ($(object).hasClass('ui-tabs')) {
cookie = Cookies.get($(object).prop('id'));
if (cookie) {
IDs = cookie.split(',');
var li = $('ul', object).children('li.ui-tabs-tab');
$.each($(li), function(i, o) {
items.push($(o).attr('id'));
});
for (var v = 0; v < items.length; v++) {
rebuild[items[v]] = items[v];
}
for (var i = 0; i < IDs.length; i++) {
var itemID = IDs[i],
item = rebuild[itemID],
child = $('.ui-tabs-nav', object).children('#' + item),
savedOrd = $('.ui-tabs-nav', object).children('#' + itemID);
child.detach();
$('.ui-tabs-nav', object).filter(':first').append(savedOrd);
}
} else {
Cookies.set($(object).prop('id'), $('.ui-tabs-nav', object).sortable('toArray').toString(), { expires: 365 });
}
}
});
}
restoreOrder('#tabs1, #tabs2, #tabs3');
});And html code:
<div id="tabs1">
<ul>
<li id="li-1-1"><a href="#tabs-1-1">1 Nunc tincidunt</a></li>
<li id="li-1-2"><a href="#tabs-1-2">2 Proin dolor</a></li>
<li id="li-1-3"><a href="#tabs-1-3">3 Aenean lacinia</a></li>
</ul>
<div id="tabs-1-1">
<p>Content for tab1</p>
</div>
<div id="tabs-1-2">
<p>Content for tab2</p>
</div>
<div id="tabs-1-3">
<p>Content for tab3</p>
</div>
</div>
ID attribute for li is required!
We need the following libraries and plugins.
jQuery 1.6.4 version or later. If you want to adapt the code under an older version, simply replace the prop() for attr()
jQuery UI 1.8+ and above with modules Core, Widget, Mouse, Sortable, Tabs
Javascript code looks like this:
jQuery(document).ready(function($){
function restoreOrder(selector){
var lists_arr = $(selector),
cookie = '',
IDs = [],
items = [],
rebuild = [];
if (!lists_arr || lists_arr.length < 1) return;
$.each(lists_arr, function(key, object){
if ($(object).hasClass('ui-tabs')) {
cookie = $.cookie($(object).prop('id'));
if (cookie) {
IDs = cookie.split(',');
items = $(object).sortable('toArray');
for (var v=0; v < items.length; v++) {
rebuild[items[v]] = items[v];
}
for (var i=0; i < IDs.length; i++) {
var itemID = IDs[i],
item = rebuild[itemID],
child = $('.ui-tabs-nav', object).children('#'+item),
savedOrd = $('.ui-tabs-nav', object).children('#'+itemID);
child.remove();
$('.ui-tabs-nav', object).filter(':first').append(savedOrd);
}
} else {
$.cookie($(object).prop('id'), $('.ui-tabs-nav', object).sortable('toArray'), { expires: 365 });
}
}
});
}
$('#tabs1').tabs({ cookie: { expires: 365 } }).find('.ui-tabs-nav').sortable({
axis: 'x',
update: function(){
$.cookie($(this).parent().prop('id'), $(this).sortable('toArray'), { expires: 365 });
}
});
$('#tabs2').tabs({ cookie: { expires: 365 } }).find('.ui-tabs-nav').sortable({
axis: 'x',
update: function(){
$.cookie($(this).parent().prop('id'), $(this).sortable('toArray'), { expires: 365 });
}
});
$('#tabs4').tabs({ cookie: { expires: 365 } }).find('.ui-tabs-nav').sortable({
axis: 'x',
update: function(){
$.cookie($(this).parent().prop('id'), $(this).sortable('toArray'), { expires: 365 });
}
});
$('#tabs6').tabs({ cookie: { expires: 365 } }).find('.ui-tabs-nav').sortable({
axis: 'x',
update: function(){
$.cookie($(this).parent().prop('id'), $(this).sortable('toArray'), { expires: 365 });
}
});
restoreOrder('#tabs1, #tabs2, #tabs3, #tabs4, #tabs5, #tabs6');
});And html code:
<div id="tabs1">
<ul>
<li id="t1"><a href="#tabs-1">1 Nunc tincidunt</a></li>
<li id="t2"><a href="#tabs-2">2 Proin dolor</a></li>
<li id="t3"><a href="#tabs-3">3 Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Lorem ipsum dolor sit amet, sciendum ait. Pentapolitanas Cyrenensi reversus est cum unde. Secundis sacerdotem filia dedit erat bene nostrae iam, quidditas mihi Tyrum in lucem exitum atque bona pater. Christo tunc Tharsos determinatio vestes periit patrem dixit est se in.</p>
</div>
<div id="tabs-2">
<p>Athenagora mihi esse deprecor cum autem est cum. Facere consultum in deinde cepit roseo commendavit patris in. Verenam operibus furiam conclusoque sponte profundo. Nimis barbam cum unde tu illum decidat quam dicentes semper vide eis fictas fundatur sicut in modo.</p>
</div>
<div id="tabs-3">
<p>Labore accusam in deinde vero rex Dionysiadi rex ut libertatem non dum veniens. Virginem in deinde vero quo alacres ad quia. Materia amicis filia in fuerat construeret cena reges undis effugere quod non dum animae tibi alloquitur hanc si Ave.</p>
<p>Venis potest contremiscunt pater in. Pater vero cum magna Dianam. Athenagoram rigorem nisl cum autem illud huius. Tharsiae ortam adipiscing enixa ait est Apollonius non ait regem adventu nihil puella est Apollonius ut libertatem accipies. Tempor in rei exultant deo apprehendit, accepit Archistratis suae in deinde duas particularis.</p>
</div>
</div>
<br />
<div id="tabs2">
<ul>
<li id="t1"><a href="#tabs-1">1 Nunc tincidunt</a></li>
<li id="t2"><a href="#tabs-2">2 Proin dolor</a></li>
<li id="t3"><a href="#tabs-3">3 Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Antiochia de tuae infami cum magna duobus consolabor potest ei primum intus ad per. Mauricii materialia sola habiturus in modo. Antiocho mittat est amet consensit cellula filia puella sed esse deprecor.</p>
</div>
<div id="tabs-2">
<p>Lugens in rei sensibilium acciperem qui enim formam unitas reddere Dionysiadem. Coram te finis puellam flentem praemio unam lacrimae valete. Ut a his e neptem semper incurristi filiam sunt, permansit in modo cavendum es sed quod eam ad per. Cur meae ad suis Tyrium coniugem flebant Tharsiam, ratio omnes Hellenicus dixisset hoc Apollonius in fuerat!</p>
</div>
<div id="tabs-3">
<p>Nuntiatur ad suis caelo in lucem exitum atque bona dei cenam inhaeret Visceribusque esocem manibus individuationis quod tamen ait. Palladio in fuerat est se vero cum autem nobiscum laetitia. Tempore Quaere allocutus ait est Apollonius in modo compungi mulierem ubi diu perdidi si quod tamen ait in.</p>
<p>Priapum avarus videret quaeritur vero quo sanctis oravit in rei civibus laude clamaverunt donavit potest. Sordido triclinio laudes honore est se ad quia, euismod tollam impedit intra tectus Scrutor audire propter illa benignissime vi.</p>
</div>
</div>
<div id="tabs3">
<ul>
<li id="t1"><a href="#tabs-1">1 Nunc tincidunt</a></li>
<li id="t2"><a href="#tabs-2">2 Proin dolor</a></li>
<li id="t3"><a href="#tabs-3">3 Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Quicumque enim materiam profusis magna anima Apollonium sit dolor virgo coniunx efficerer nuptiarum cui ut a. Nuptui tradiditque semper incommunicabile in lucem in lucem concitaverunt in deinde vero non coepit. Elige ipsa Invitamus me missam ne alicuius altum pervenit item ut a patriam ei quoque luctare non dum est Apollonius.
Consuetudo aut veneris accedens est amet constanter approximavit te.</p>
</div>
<div id="tabs-2">
<p>Stet consequat eiusdem ea commotio gaude haec aliquam inlido laetare quod non dum est amet Cur meae. Singulas noveras aliqui civitatem in rei civibus in lucem. Permiseras enim est Apollonius eius ad per accipere filia in rei sensibilium iussit hoc. Ni fluctus evasit dic ipsum se sed dominum oculos, antiocho mittat est amet amet constanter determinatio debitis torporis quin.</p>
</div>
<div id="tabs-3">
<p>Recedite fit proponebat vidit ad te ad per. Dona abstulit meis dolor virgo. Retrorsum redire ad suis est in. Item filiam vel ita per sanctus ait est se sed dominum sit audivit illius generositas mihi cum suam in. Amen ad per sanctus primum subsannio oculos ut sua.</p>
<p>Materia ad suis alteri ad quia ei. Plus istum igni ait regem ut casus adprehendens melius ait in lucem exitum atque bona dei. Salve quos vero rex in rei sensibilium acciperem qui auri tecum mortis remisit piscator cum unde.</p>
</div>
</div>A function restoreOder() restore a tabs in the same order which have been sorted before. We're setting up a cookie within a tabs listing in the same order which have been sorter before, to the method update() of the $.sortable plugin. An invocation of the method is being finished on the drag-n-drop. A method will not been handled if had not been initialized. A cookie should been automatically created if the tabs object have been initialized but have no proper cookie within a params.
For restore a positions for some object tabs need to invoke a function restoreOrder() for each of the object and pass an object id for each tab.
In example:
jQuery(document).ready(function($){
var $tabs = $('#tabs').tabs({
...
});
var $tabs1 = $('#tabs-1').tabs({
...
});
var $tabs2 = $('#tabs-2').tabs({
...
});
// Call restoreOrder() for each object
restoreOrder('#tabs, #tabs-1, #tabs-2');
});