2

I'm trying to get javascript to fire when the user selects one of the other tabs.

I am using the tabbar template from here http://onsenui.io/guide/getting_started.html

I have been trying for hours now to even get an alert to show and simply can't get it to work.

I can get an alert to fire on the initial application load / first view - that's easy. But how do I get javascript to run when the user taps a tab icon to load one of the other views.

1 Answer 1

0

In Onsen UI 1.0.4, you cannot hook the touch event for tab.
For this purpose, you should create custom-tab and use it instead of standard tab.

For example, ons-tabbar-item2 can be defined as follows:

angular.module('myApp', ['onsen.directives']);


(function() {
    'use strict';
    var directives = angular.module('onsen.directives'); // no [] -> referencing existing module

    directives.directive('onsTabbarItem2', function(ONSEN_CONSTANTS) {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            require: '^onsTabbar',
            scope: {
                page: '@',
                active: '@',
                icon: '@',
                activeIcon: '@',
                label: '@'
            },
            template:     "<label class=\"topcoat-tab-bar__item no-select\">\n" +
    "    <input type=\"radio\" name=\"tab-bar-{{tabbarId}}\" disabled>\n" +
    "   <button class=\"topcoat-tab-bar__button full\" >\n" +
    "       <i ng-show=\"icon != undefined\" class=\"fa fa-2x fa-{{tabIcon}} {{tabIcon}}\"></i>\n" +
    "       <div class=\"onsen_tab-bar__label\" ng-class=\"{ big: icon === undefined }\">\n" +
    "           {{label}}\n" +
    "       </div>\n" +
    "   </button>\n" +
    "</label>\n" + "",
            link: function(scope, element, attrs, tabbarController) {
                var radioButton = element[0].querySelector('input');

                scope.tabbarId = tabbarController.tabbarId;

                tabbarController.addTabItem(scope);
                scope.tabIcon = scope.icon;
                scope.radioButton = radioButton;
                scope.tapAt = (new Date()).getTime();
                scope.tapCount = 0;

                var elem = element[0];
                elem.hmtimeGesture = Hammer(elem, {prevent_default:true} ).on("touch",function(    event) { 
                    // Here any code
                    scope.setActive();
                });

                scope.setActive = function() {          

                    element.addClass('active');
                    radioButton.checked = true;
                    tabbarController.gotSelected(scope);
                    if (scope.activeIcon) {
                        scope.tabIcon = scope.activeIcon;
                    }
                };

                scope.setInactive = function() {
                    element.removeClass('active');
                    scope.tabIcon = scope.icon;
                };

                scope.isActive = function() {
                    return (element.hasClass('active'));
                }

                if (scope.active) {
                    scope.setActive();
                }

            }
        };
    });
})();

in which you can rewrite

                elem.hmtimeGesture = Hammer(elem, {prevent_default:true} ).on("touch",function(    event) { 
                    // Here any code
                    scope.setActive();
                });

as you want to do.

tab_bar.html is now following

<ons-tabbar>
<ons-tabbar-item2
      active="true"
      label="Home"
      icon="home"
      page="navigator1.html"></ons-tabbar-item2>
<ons-tabbar-item2
      label="Camera"
      icon="camera"
      page="page2.html"></ons-tabbar-item2>
<ons-tabbar-item2
      label="Settings"
      icon="gear"
      page="page3.html"></ons-tabbar-item2>
</ons-tabbar>

In the next version of Onsen UI, version 1.1 or 2.0, we plan to prepare a hook point to use.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.