Comments on: How to Make JQuery UI Tabs Linkable and Bookmarkable

By: Daniel

Daniel — Fri, 09 Dec 2011 16:59:11 +0000

Sorry for triple posting…I was trying to get the div and ul html code to display

By: Daniel

Daniel — Fri, 09 Dec 2011 16:57:47 +0000

I'm new to javascript and had a heck of a time getting this to work. I finally figured it out but I had to make a few changes:

function initTabs() {
   var tabIndex = {'scripting':0,'scripting-history':1,'equipment':2,'syslogs':3,'misc':4}

   // This will match the anchor tag in the URL i.e. http://here.com/page#anchor
   // Use .+? instead of \w so you can match on anchors that contain - or _
   var re = /#.+?$/;
   var match = re.exec(document.location.toString());

   if (match != null) {
      var anchor = match[0].substr(1);
   }

   for (key in tabIndex) {
       if (anchor == key) {
          selectedTab = tabIndex[key];
          break;
       } else {
          selectedTab = 0;
       }
   }

   // render the tabs
   tabs = $("#tabs").tabs({selected: selectedTab});

   // when tab is shown update the URL
   tabs.bind('tabsshow', function(event, ui) {
     // to make bookmarkable
      var re = /#tabs-/;
      window.location.hash = ui.tab.hash.replace(re, "#");
   });

}



Scripting
Scripting History
Equipment List
Syslogs
Misc


tab content here

etc, etc for the other tabs


initTabs();

So when I click on my "Scripting History" tab the url is changed to index.php#scripting-history which I can bookmark. When I load the bookmark initTabs will load my tabs-scripting-history tab. One thing I found was a bit of jquery code that will change the url for you too. This feels much faster than doing it in initTabs. To use this remove the following lines from initTabs:

   // when tab is shown update the URL
   tabs.bind('tabsshow', function(event, ui) {
     // to make bookmarkable
      var re = /#tabs-/;
      window.location.hash = ui.tab.hash.replace(re, "#");
   });

And add this to .ready(function()

$(document).ready(function() {
   // This converts "#tabs-foo" to "#foo" so that initTabs() can
   // then find #foo and select the appropriate tab
   $('#tabs').tabs({
      select: function(event, ui) {
         var re = /#tabs-/;
         window.location.hash = ui.tab.hash.replace(re, "#");
      }
   });
});

By: Daniel

Daniel — Fri, 09 Dec 2011 16:54:46 +0000

I'm new to javascript and had a heck of a time getting this to work. I finally figured it out but I had to make a few changes:

function initTabs() {
   var tabIndex = {'scripting':0,'scripting-history':1,'equipment':2,'syslogs':3,'misc':4}

   // This will match the anchor tag in the URL i.e. http://here.com/page#anchor
   // Use .+? instead of \w so you can match on anchors that contain - or _
   var re = /#.+?$/;
   var match = re.exec(document.location.toString());

   if (match != null) {
      var anchor = match[0].substr(1);
   }

   for (key in tabIndex) {
       if (anchor == key) {
          selectedTab = tabIndex[key];
          break;
       } else {
          selectedTab = 0;
       }
   }

   // render the tabs
   tabs = $("#tabs").tabs({selected: selectedTab});

   // when tab is shown update the URL
   tabs.bind('tabsshow', function(event, ui) {
     // to make bookmarkable
      var re = /#tabs-/;
      window.location.hash = ui.tab.hash.replace(re, "#");
   });

}




Scripting
Scripting History
Equipment List
Syslogs
Misc


tab content here

etc, etc for the other tabs


initTabs();


So when I click on my "Scripting History" tab the url is changed to index.php#scripting-history which I can bookmark.  When I load the bookmark initTabs will load my tabs-scripting-history tab.

One thing I found was a bit of jquery code that will change the url for you too.  This feels much faster than doing it in initTabs.  To use this remove the following lines from initTabs:
   // when tab is shown update the URL
   tabs.bind('tabsshow', function(event, ui) {
     // to make bookmarkable
      var re = /#tabs-/;
      window.location.hash = ui.tab.hash.replace(re, "#");
   });

And add this to .ready(function()

$(document).ready(function() {
   // This converts "#tabs-foo" to "#foo" so that initTabs() can
   // then find #foo and select the appropriate tab
   $('#tabs').tabs({
      select: function(event, ui) {
         var re = /#tabs-/;
         window.location.hash = ui.tab.hash.replace(re, "#");
      }
   });
});

By: Daniel

Daniel — Fri, 09 Dec 2011 16:52:58 +0000

I’m new to javascript and had a heck of a time getting this to work. I finally figured it out but I had to make a few changes:

function initTabs() {
var tabIndex = {‘scripting’:0,’scripting-history’:1,’equipment’:2,’syslogs’:3,’misc’:4}

// This will match the anchor tag in the URL i.e. http://here.com/page#anchor
// Use .+? instead of \w so you can match on anchors that contain – or _
var re = /#.+?$/;
var match = re.exec(document.location.toString());

if (match != null) {
var anchor = match[0].substr(1);
}

for (key in tabIndex) {
if (anchor == key) {
selectedTab = tabIndex[key];
break;
} else {
selectedTab = 0;
}
}

// render the tabs
tabs = $(“#tabs”).tabs({selected: selectedTab});

// when tab is shown update the URL
tabs.bind(‘tabsshow’, function(event, ui) {
// to make bookmarkable
var re = /#tabs-/;
window.location.hash = ui.tab.hash.replace(re, “#”);
});

}

Scripting
Scripting History
Equipment List
Syslogs
Misc

tab content here

etc, etc for the other tabs

initTabs();

So when I click on my “Scripting History” tab the url is changed to index.php#scripting-history which I can bookmark. When I load the bookmark initTabs will load my tabs-scripting-history tab.

One thing I found was a bit of jquery code that will change the url for you too. This feels much faster than doing it in initTabs. To use this remove the following lines from initTabs:
// when tab is shown update the URL
tabs.bind(‘tabsshow’, function(event, ui) {
// to make bookmarkable
var re = /#tabs-/;
window.location.hash = ui.tab.hash.replace(re, “#”);
});

And add this to .ready(function()

$(document).ready(function() {
// This converts “#tabs-foo” to “#foo” so that initTabs() can
// then find #foo and select the appropriate tab
$(‘#tabs’).tabs({
select: function(event, ui) {
var re = /#tabs-/;
window.location.hash = ui.tab.hash.replace(re, “#”);
}
});
});

By: thomas

thomas — Fri, 15 Jul 2011 08:54:29 +0000

Its worked.

Thanks,

By: Dynamic anchorlinks in Sitecore | Larres CMS ramblings

Dynamic anchorlinks in Sitecore | Larres CMS ramblings — Thu, 24 Mar 2011 23:28:15 +0000

[...] Anyway, no matter if the content should be shown in one page, in tabs or in any other way we had to be able to link to the different subitems directly. As I prefer standard HTML using anchors seemed the way to go, anchors works fine in a plain scrollable page but it could also be used in JQuery tabs. [...]

By: jon

jon — Tue, 22 Mar 2011 08:29:18 +0000

Mikkel’s solution worked for me. Thanks.

By: Michael

Michael — Sat, 12 Feb 2011 22:06:10 +0000

I found a great page on how to change the list item image using jQuery. It is super simple and more browser compliant than css. http://www.ajaxera.com/jquery-change-li-hover/

By: Mattias

Mattias — Fri, 26 Nov 2010 10:42:27 +0000

I think there is typo on the line:
var re = /#w+$/;
Should be:
var re = /#\w+$/;
Thanks!

By: Mikkel

Mikkel — Mon, 08 Nov 2010 10:40:52 +0000

This works:

// initialize the tabbed interface with a default method set to update
// the url when tabs are clicked (this makes bookmarking possible)
tabs = $(“#tabs”).tabs({
‘select’: function(event, ui){document.location.hash = ui.panel.id;}
});

// now start by selecting the tab that corresponds to the url hash
// if the hash does not match a tab the first tab will be selected by default
tabs.tabs(‘select’,document.location.hash);