Skip to content

All topics  /  jQuery

Jquery UI Tabs Next Previous Buttons

jQuery ·

When “Jquery UI Tabs Next Previous Buttons” moves through design, development and browser testing, the official resource can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi Guys,

In this example,I will learn you how to create jquery ui tabs next previous buttons.you cam easy and simply use jquery ui tabs with next/previous button.

In this article I will explain with an example, how to implement Next Previous buttons for Tab Navigation thus allowing us to switch to next Tab programmatically on button click.

Example :


 
<!DOCTYPE>
<html>
<head>
    <title>Jquery UI Tabs Next Previous Buttons - nicesnippets.com</title>
</head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>
            <li><a href="#tabs-3">Tab 3</a></li>
            <li><a href="#tabs-4">Tab 4</a></li>
            <li><a href="#tabs-5">Tab 5</a></li>
        </ul>
        <div id="tabs-1">
            Tab 1 Content
        </div>
        <div id="tabs-2">
            Tab 2 Content
        </div>
        <div id="tabs-3">
            Tab 3 Content
        </div>
        <div id="tabs-4">
            Tab 4 Content
        </div>
        <div id="tabs-5">
            Tab 5 Content
        </div>
    </div>
    <br />
    <input type="button" id="btnPrevious" value="Previous" style = "display:none"/>
    <input type="button" id="btnNext" value="Next" />
</body>
<script type="text/javascript">
    var currentTab = 0;
    $(function () {
        $("#tabs").tabs({
        select: function (e, i) {
            currentTab = i.index;
            }
        });
    });
    $("#btnNext").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
        tabs.tabs('select', currentTab);
        $("#btnPrevious").show();
            if (currentTab == (c - 1)) {
                $("#btnNext").hide();
            } else {
                $("#btnNext").show();
            }
    });
    $("#btnPrevious").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
        tabs.tabs('select', currentTab);
            if (currentTab == 0) {
                $("#btnNext").show();
                $("#btnPrevious").hide();
            }
            if (currentTab < (c - 1)) {
                $("#btnNext").show();
            }
    });
</script>
</html>

It will help you....

More on this topic