This is a migrated thread and some comments may be shown as answers.

Tabstrip

2 Answers 48 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mat-Moo
Top achievements
Rank 1
Mat-Moo asked on 03 Jan 2013, 04:08 PM
On my project I have 5 tabs at the bottom :-

        <div data-role="layout" data-id="mobile-tabstrip">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </header>

            <div data-role="footer">
                <div id="tabstrip" data-role="tabstrip">
                    <a href="#tabstrip-setup" id="tab-stage" data-icon="setup">Setup</a>
                    <a href="#tabstrip-knowledge" id="tab-knoweldge" data-icon="learn">Knowledge</a>
                    <a href="#tabstrip-merchant" id="tab-merchant" data-icon="stockist">Merchant</a>
                    <a href="#tabstrip-website" data-icon="www">Website</a>
                    <a href="index.html" data-rel="external" data-icon="information">About</a>
                </div>
            </div>
        </div>

Quite simply I want to switch tab based on a calling param...

document.addEventListener("deviceready", onDeviceReady, false);

// -----------------------------------------------------------------------------------------------
// PhoneGap is ready
// -----------------------------------------------------------------------------------------------
function onDeviceReady() {
    alert($.urlParam('tab'));
  
    // switch tab
    $("#tabstrip").data("kendoTabStrip").select(1);
        
}

but I can't get the select to do anything? Tried lots of calls, and going mad!

Also, I want to change the page that is displayed on the tab, which I am doing by changing the href of the tab itself... however this works the firstt ime, but then any previous attempts to change it fail. You can see this in my Sundial 

2 Answers, 1 is accepted

Sort by
0
Nikolay Tsenkov
Telerik team
answered on 04 Jan 2013, 01:28 PM
Hi Mat-Moo,

I have prepared a sample for programmatic navigation with parameters.

To run it:

  • Create a kendo project;
  • replace the content of index.html with the code bellow:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
 
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    </head>
    <body>
        <div data-role="view" id="tabstrip-one" data-title="Tab1" data-show="onViewShown">
            <h1>FirstTab!</h1>
        </div>
 
        <div data-role="view" id="tabstrip-two" data-title="Tab2" data-show="onViewShown">
            <h1>SecondTab!</h1>
        </div>
 
        <div data-role="view" id="tabstrip-three" data-title="Tab3" data-show="onViewShown">
            <h1>ThirdTab!</h1>
        </div>
 
        <div data-role="layout" data-id="mobile-tabstrip">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                    <button data-role="button" id="changeViewsButton">Change</button>
                </div>
            </header>
 
            <div data-role="footer">
                <div data-role="tabstrip" id="tabStrip">
                    <a href="#tabstrip-one?param=0" data-icon="home">Tab1</a>
                    <a href="#tabstrip-two?param=1" data-icon="share">Tab2</a>
                    <a href="#tabstrip-three?param=2" data-icon="globe">Tab3</a>
                </div>
            </div>
        </div>
 
        <script>
            var tabStrip, tabCount;
            var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            var shouldSwitch = true;
             
            $(document).on("deviceready", function() {
                var jTabStrip = $("#tabStrip");
                tabStrip = jTabStrip.data("kendoMobileTabStrip");
                tabCount = jTabStrip.children("a").length;
            });
 
            $("#changeViewsButton").on("click", function() {
                // this function executes the programatic navigation
                if (tabStrip) {
                    if (shouldSwitch) {
                        var currentIndex = $(tabStrip.element)
                            .children()
                                .index(tabStrip.currentItem());
                        var nextIndex = (currentIndex === (tabCount - 1)) ? 0 : currentIndex + 1;
                        var urlToNavigate = "#" + $(tabStrip.element).children("a")[nextIndex].href.split("#")[1];
 
                        tabStrip.switchTo(urlToNavigate);
                        app.navigate(urlToNavigate);
 
                        // this is a workaround, because
                        // there is currently a problem
                        // with a fast navigation
                        // its reported to the kendo team
                        shouldSwitch = false;
                        setTimeout(function() {
                            shouldSwitch = true;
                        }, 550);
                    }
                }
            });
 
            function onViewShown(e) {
                var view = e.view;
                var param = view.params.param;
                if (param === undefined) {
                    param = 0;
                }
                alert(param);
            }
        </script>
    </body>
</html>

I hope this is helpful.


Regards,

Nikolay Tsenkov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Mat-Moo
Top achievements
Rank 1
answered on 07 Jan 2013, 12:52 PM
Thanks, works well :)
Tags
General Discussions
Asked by
Mat-Moo
Top achievements
Rank 1
Answers by
Nikolay Tsenkov
Telerik team
Mat-Moo
Top achievements
Rank 1
Share this question
or