Home/ Questions/Q 7643483
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T09:27:39+00:00

I have created the widget in Jquery mobile for Tabs. I want that when

  • 0

I have created the widget in Jquery mobile for Tabs. I want that when i press the button the 2nd Tab should be get selected.Tabs work perfectly Fine i just want it to change the Tab by pressing button. So i want a Jquery function. Here is the Tab widget code.

Check out Problem that i am facing Link Sample code here for this query

(function ($, undefined) {
$.widget("mobile.tabs", $.mobile.widget, {
    options: {
        iconpos: 'top',
        grid: null,
        load: function (event, ui) { },
        beforeTabHide: function (event, ui) { },
        beforeTabShow: function (event, ui) { },
        afterTabShow: function (event, ui) { }
    },
    _create: function () {
        var 
        $this = this,
        $tabs = this.element,
        $navbtns = $tabs.find("a"),
        iconpos = $navbtns.filter('[data-icon]').length ? this.options.iconpos : undefined;
        var $content = $tabs.closest('div[data-role="page"]').find('div[data-role="content"]');

        $tabs
        .addClass('ui-navbar')
        .attr("role", "navigation")
        .find("ul")
            .grid({ grid: this.options.grid });

        if (!iconpos) {
            $tabs.addClass("ui-navbar-noicons");
        }

        $navbtns
        .buttonMarkup({
            corners: false,
            shadow: false,
            iconpos: iconpos
        })
        .removeClass('ui-link');

        // Set up the direct children of the page as the tab content, hide them
        $content.children().addClass('ui-tabs-content');

        // Now show the one that's active
        if ($navbtns.filter('.ui-btn-active').length == 0)
        $navbtns.eq(0).addClass('ui-btn-active');
        $content.children('#' + $navbtns.eq($this.currentTab()).attr('href')).addClass('ui-tabs-content-active');

        $navbtns.bind('click', function (event) {
            navButtonClick.call(this, event);
            return false;
        })
    .bind('tap', function (event) {
        navButtonClick.call(this, event);
        return false;
    });

     function navButtonClick(event) {
            $navbtns.removeClass("ui-btn-active");
            $(this).addClass("ui-btn-active");


            $this.changeTab(event, {
                currentTab: $navbtns.eq($this.currentTab()),
                nextTab: $(this),
                currentContent: $this.currentContent(),
                nextContent: $content.children($(this).attr('href'))
            });
            event.preventDefault();
        }

        this._trigger('load', null, {
            currentTab: $navbtns.eq($this.currentTab()),
            currentContent: $this.currentContent()
        });
    },
    currentTab: function () {
        var $tabs = this.element,
    $navbtns = $tabs.find("a");
        return this.element.find('.ui-btn-active').parent().prevAll().length;
    },
    currentContent: function () {
        return this.element.closest('div[data-role="page"]').find('div[data-role="content"]').children().filter('.ui-tabs-content-active');
    },
    changeTab: function (event, ui) {
        if (this._trigger('beforeTabHide', event, ui))
            ui.currentContent.siblings().andSelf().removeClass('ui-tabs-content-active');
        if (this._trigger('beforeTabShow', event, ui))
            ui.nextContent.addClass('ui-tabs-content-active');
        this._trigger('afterTabShow', event, $.extend({}, ui, { previousContent: ui.currentContent, currentContent: ui.nextContent, nextContent: null }));
    }
});
})(jQuery);

$('[data-role=page]').live('pagecreate', function(e) {
$(this).find('[data-role="tabs"]').tabs();
});

Here is the Html Part of the Page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="tab.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page-title" class="MainClass1" data-theme="c">
    <input id="Submit1" type="submit" value="Tab2" data-inline="true" />
    <div class="RightCont">
        <div data-role="tabs">
            <ul>
                <li><a href="#BattingTab" data-theme="a" class="">Batting</a></li>
                <li><a href="#BowlingTab" data-theme="a" class="">Bowling</a></li>
                <li><a href="#ExtrasTab" data-theme="a" class="">Extras</a></li>
                <li><a href="#DetailsTab" data-theme="a" class="">Details</a></li>
            </ul>
        </div>
        <div data-role="content">
            <div id="BattingTab">
            </div>
            <div id="BowlingTab">
            </div>
            <div id="ExtrasTab">
            </div>
            <div id="DetailsTab">
            </div>
        </div>
    </div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you can using callback to accessed tab,

    function callback(eltab){
   //to set second tab is active
   eltab.eq(2).addClass('ui-btn-active');
}

    and call callback($navbtns); in the widget option create.

        _create: function () {
    var $this = this,
    $tabs = this.element,
    $navbtns = $tabs.find("a"),
    iconpos = $navbtns.filter('[data-icon]').length ? this.options.iconpos : undefined;

    var $content = $tabs.closest('div[data-role="page"]').find('div[data-role="content"]');
    $tabs
    .addClass('ui-navbar')
    .attr("role", "navigation")
    .find("ul")
        .grid({ grid: this.options.grid });

    if (!iconpos) {
        $tabs.addClass("ui-navbar-noicons");
    }

    $navbtns
    .buttonMarkup({
        corners: false,
        shadow: false,
        iconpos: iconpos
    })
    .removeClass('ui-link');

    // Set up the direct children of the page as the tab content, hide them
    $content.children().addClass('ui-tabs-content');

    // Now show the one that's active
    if ($navbtns.filter('.ui-btn-active').length == 0)

    /*
    * adding the callback 
    */

    callback($navbtns);

    //$navbtns.eq(0).addClass('ui-btn-active');
    $content.children('#' + $navbtns.eq($this.currentTab()).attr('href')).addClass('ui-tabs-content-active');

    $navbtns.bind('click', function (event) {
        navButtonClick.call(this, event);
        return false;
    })
.bind('tap', function (event) {
    navButtonClick.call(this, event);
    return false;
});`
    • 0