TabStrip touch events

[RES]

I'm using a TabStrip in the middle of a page's content to programmatically switch some views which are basically divs that I toggle visibility on.  That works fine and all but I notice if I am scrolling down the page and tap and hold and the tabstrip happens to be under my finger the tabstrip registers that as a "click" and immediately changes.  Is there anyway to avoid this?  Could the Touch widget possibly solve this problem?

Scott

[Petyo]

Hi,

the Tabstrip widget uses the touchstart event, following the iOS component equivalent behavior, which means that you can't use it in a scrolling container. A workaround I may suggest is to use a couple of mobile buttons or regular elements with custom styling and the Touch widget. 

Regards,
Petyo
Telerik

 

 

[RES]

I'm curious what is the benefit of using the touchstart event when it seems like the tap event would work just fine?

[Petyo]

Hi,

the touchstart event is much more "responsive" than the touchend one. Like I said, this is how the native tabbar behaves.

Regards,
Petyo
Telerik

 

 

[RES]

Okay, it just doesn't seem like having it more "responsive" is of any real benefit when the widget could be made more useful in other scenarios, but okay I accept that.  That being said I've created a custom widget based on the documentation and it seems to work fairly well.  I'm having one issue though.  So what happens is if you have click on a tab and the content extends down the screen and you scroll down the page and switch to another tab that has content that doesn't extend beyond the bottom of the page the click event will actually cause buttons above to be clicked.  This probably sounds confusing so I've worked up an example.

http://example.rengr.co/home/tabswitcher

To reproduce the issue visit the above link on a smartphone.  Click on tab 3, scroll down until the tab switcher bar is above where the button labeled "Random Button" would be if the page was scrolled all the way up to the top, then click on tab 1.  The tab switcher successfully changes the view to the first view however it will also cause the random button to be clicked as well.  How do I prevent this from happening?

[RES]

Also here is the code for the custom widget.

(function ($) {
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget

    var TabSwitcher = Widget.extend({
        init: function (element, options) {
            var that = this;
            var $element = $(element);

            Widget.fn.init.call(that, element, options);
            $element.addClass("km-widget km-tabstrip");

            $.each($element.find("a"), function (i, val) {
                var $item = $(val);
                $item.addClass("km-button");

                var text = $item.text();
                $item.text("");

                if ($item.data("icon")) {
                    $item.append("<span class='km-icon km-" + $item.data("icon") + "'></span>");
                }

                $item.append("<span class='km-text'>" + text + "</span>");

                if (that.options.selectedIndex == i) {
                    $item.addClass("km-state-active");
                }
            });

            if (that.options.viewContainer) {
                that._showView(that.options.viewContainer, that.options.selectedIndex);
            }

            $element.kendoTouch({
                filter: ".km-button",

                tap: function (e) {
                    var index = e.touch.target.index();
                    var $buttons = $element.find("a");
                    $buttons.removeClass("km-state-active");
                    $buttons.eq(index).addClass("km-state-active");

                    if (that.options.viewContainer) {
                        that._showView(that.options.viewContainer, index);
                    }

                    if (that.options.selected) {
                        that.options.selected({
                            index: index
                        })
                    }
                }
            });
        },

        options: {
            name: "TabSwitcher",
            selectedIndex: 0,
            selected: null,
            viewContainer: null
        },

        _showView: function (viewContainer, index) {
            viewContainer.children().hide();
            viewContainer.children().eq(index).show();
        }
    });

    ui.plugin(TabSwitcher);
})(jQuery);

[Petyo]

Hi,

the problem you experience is due to the delayed DOM click event on mobile devices. There are plenty of articles  available online which explain the specifics of this case.

Regards,
Petyo
Telerik

 

 

[RES]

I was not aware of the 300ms delay for the tap event on mobile devices, now the use of the touchstart event to make the TabStrip more responsive makes sense to me.  Okay, so I added e.preventDefault() to the end of the tap event handler of the kendoTouch widget in my custom widget and it seems to be working.  Do you see any potential downside to this?

[Alexander Valchev]

Hello,

Your approach looks valid. Please use it and let us know in case you experience any issues.

Regards,
Alexander Valchev
Telerik