Book-markable tab?

alexandra.s · 21 Jun 2012, 16:39

Could you please post an example or at least write how to retrieve the activeIndex for bookmarking a tab?

dmaidaniuk · 19 Jun 2015, 14:46

This topic little bit old. However I want to share with others a simple solution how to make tabs from TabView book-markable. Implementation used jQuery BBQ plugin and is fully client-side based.

sample.xhtml

Code: Select all

<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
  
<f:view contentType="text/html" locale="en">
  <h:head>
    <f:facet name="first">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <title>Sample page</title>
    </f:facet>
  </h:head>
  <h:body>

    <h:outputScript library="js" name="jquery.ba-bbq.min.js" target="head"/>
    
    <p:outputPanel>
      <p:tabView id="testTabView">
        <p:tab id="first-tab" title="First tab">
          <h:outputText value="Some content on first tab" />
        </p:tab>

        <p:tab id="second-tab" title="Second tab">
          <h:outputText value="Some content on first tab" />
        </p:tab>

        <p:tab id="third-tab" title="Third tab">
          <h:outputText value="Some content on third tab" />
        </p:tab>

      </p:tabView>
    </p:outputPanel>
	
	<script type="text/javascript">
      //<![CDATA[
      jQuery(document).ready(function() {
        //handling a click on tab header
        jQuery(".ui-tabs-nav").children().find('a').click(function(e) {
          //calculating tab ID
          var tabId = extractTabId($(this).attr('href'));

          //set the hash in window
          window.location.hash = '#' + tabId;
        });
        
        // Bind an event to window.onhashchange that, when the history state changes,
        // iterates over all tab widgets, changing the current tab as necessary.
        $(window).bind('hashchange', function(e) {
          var url = $.param.fragment();
          jQuery(".ui-tabs-nav").children().each(function() {
            var link = $(this).find('a');
            var tabId = extractTabId(link.attr('href'));
            if (url === tabId && !$(this).hasClass('ui-tabs-selected')) {
              link.click();
            }
          });
        });

        // Since the event is only triggered when the hash changes, we need to trigger
        // the event now, to handle the hash the page may have loaded with.
        $(window).trigger('hashchange');
      });
      
      function extractTabId(hashTag) {
        // format is '#tabViewId:tabId'
        var pieces = hashTag.split(':');
        return pieces[pieces.length-1];
      }
     
      //]]> 
    </script>

  </h:body>
</f:view>
</html>

Urls will be like:
.../sample.xhtml#first-tab
.../sample.xhtml#second-tab
.../sample.xhtml#third-tab

This solution brings browser history support and navigation.

Book-markable tab?

Who is online