https://github.com/synergitech/ajax-bootstrap-tabs

A Bootstrap compatible tabs implementation with support for AJAX loading and history integration.
https://github.com/synergitech/ajax-bootstrap-tabs

Last synced: about 1 year ago
JSON representation

A Bootstrap compatible tabs implementation with support for AJAX loading and history integration.

• Host: GitHub
• URL: https://github.com/synergitech/ajax-bootstrap-tabs
• Owner: SynergiTech
• License: mit
• Created: 2017-02-15T10:37:38.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2019-06-21T08:22:58.000Z (almost 7 years ago)
• Last Synced: 2025-02-07T07:41:30.647Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 22.5 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: historytabs.jquery.js
  • License: LICENSE

Awesome Lists containing this project

README

          
# AJAX Bootstrap Tabs

AJAX Bootstrap Tabs is a Bootstrap compatible tabs implementation with support for AJAX loading and history integration.

It is an alternative to Bootstrap tabs with extra functionality and the ability to apply custom classes to each tab for your own custom design.

If you're only interested in the history functionality, have a look at the historytabs.jquery.js file.

## Features

* Clean, lean and simple tabs that are easily made compatible with most CSS frameworks

* AJAX same-origin loading with support for embedded JavaScript

* Links to different tabs can be embedded throughout the page

* History integration allows the use of back and forward buttons as well as the URL hash to change tabs on the current page

* URL hash integration allows the tab to be set before opening the page

* Tab change event allowing execution of functions when a tab is selected

* Maintains position on page to avoid the 'jump' that the URL hash can cause

## Usage

```html



    


        Tab One

        Tab Two

        Tab Three

    

    


        


            


                


                    
Tab One

                

                


                    
Tab Two

                    

                    
Tab Three

                

                


            

        

    



```


```js

$('#tabs').ajaxBootstrapTabs({

    tab_wrapper: '.tab-nav',

    tab: '.btn',

    tab_active: '.btn-primary',

    tab_inactive: '.btn-default',

    pane_wrapper: '.tab-content',

    pane: '.tab-pane',

    pane_active: 'active',

    link: '.link',

    tab_prefix: 'tab-'

}).bind('ajaxbootstraptabs.change', function(event, tabid) {

    console.log(tabid);

});

```