JQuery AjaxTabs Plugin

AjaxTabs creates tabs... with AJAX.

Unlike jQuery UI tabs, it handles only the functionality of the tabs and leave the styling and layout up to you. Unlike EasyTabs it only handle tabs with AJAX request, but it allow you to add parameters to your requests.

What AjaxTabs Does:

• Creates tabs from an unordered list, which link to divs on the page
• Allows complete customization of appearance, layout, and style via CSS
• Tabs are bookmarkable and SEO-friendly
• Pass custom parameters along your ajax requests

What AjaxTabs Does NOT Do:

• Style your tabs in any way (though sensible CSS defaults can be found in the demos)
• Supports forward- and back-button in browsers
• Cycling tabs at a specified interval

Use

Minimum requirements

HTML

You need a container, a list of links to pages for your tabs, and matching divs for your tabbed content.

<div id="tab-container" class='tab-container'>
   <ul class='etabs'>
      <li class='tab'><a href="html.php" data-target="tabs-html">HTML Markup</a></li>
      <li class='tab'><a href="js.php" data-target="tabs-js">Required JS</a></li>
      <li class='tab'><a href="css.php" data-target="tabs-css">Example CSS</a></li>
   </ul>

   <div class='panel-container'>
      <div id="tabs-html"></div>
      <div id="tabs-js"></div>
      <div id="tabs-css"></div>
   </div>

</div>

This will fill the matching divs inside .panel-container with the response of the html.php, js.php and css.php.

Notes :

• You can include your tabs links anywhere within the container with the tabs option. Default is inside a list item (li) inside an unordered list (ul).

Javascript

Obviously you need jQuery and AjaxTabs, and you need to init AjaxTabs with your container.

<script src="../vendor/jquery-3.3.1.js" type="text/javascript"></script>
<script src="../lib/jquery.ajaxtabs.js" type="text/javascript"></script>

<script type="text/javascript">

   $(document).ready(function() {
      $('#tab-container').ajaxtabs();
   });

</script>

Options

Option	Description	Values (default)
method	Method used for requests (e.g. "POST", "GET", "PUT")	String (POST)
animate	Makes content panels fade out and in when a new tab is clicked.	Boolean (true)
animationSpeed	Controls the speed of the fading effect if animate: true.	Integer in milliseconds (200)
panelActiveClass	Adds specified class to the currently-selected content panel	Any string valid as HTML class (panelActive)
tabActiveClass	Adds specified class to the currently-selected tab	Any string valid as HTML class (tabActive)
tabs	jQuery selector for the tabs, relative to the container element	Any jquery selector (> ul > li)
cache	Reuse the first response retrieved with ajax	Boolean (true)

Missing options from EasyTabs to be added later (transitionIn* and transitionOut* will be merged):

• defaultTab
• updateHash
• transition
• transitionEasing

Hooks

Option	Description	Returned values
ajaxtabs:before	Fires before a tab is selected.	$tabLink, $targetPanel, settings
ajaxtabs:midTransition	Fires after the previous panel has been hidden, but before the next is shown.	$tabLink, $targetPanel, settings
ajaxtabs:beforeSend	Fires before a request is done, only if a request is done.	$tabLink, $targetPanel, data, settings
ajaxtabs:complete	Fires when the request is complete (or immediately if cached)	$tabLink, $targetPanel, result, settings
ajaxtabs:after	Fires after a tab has been selected	$tabLink, $targetPanel, settings

• $tabLink : jQuery object of the clicked link.
• $targetPanel : Targeted panel.
• settings : Settings used in the transition.
• data : Data send along the request.
• result : data returned by the request, null if cached.

Example of usage :

$('#tab-container').ajaxtabs({method: 'GET'})

$('#tab-container').ajaxtabs()
.bind('ajaxtabs:complete', function(e, $tabLink, $targetPanel) {

   $(document).attr("title", "AjaxTabs Demo | " + $targetPanel.children('h2').text());

});

Pass parameters

To include parameters along an AJAX request you need to use a data-tab on the link. You can add it with simple HTML attribute :

You can of course add it in any way you want, for example with jQuery and PHP :

$(".etabs .tab a[href='html.php']").data('tab', {
   random: Math.random().toString(36).substring(7),
   foo: "bar",
   fruit: "<?php echo $fruit ?>"
});

Credits

• Based on jQuery EasyTabs
• Originally forked at the company WeLikeStartup
• Licensed under the GNU General Public License v3.0.