ajaxtabs v2.0.1

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

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

• defaultTab
• updateHash
• transition
• transitionEasing

Hooks

• $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.