Question

我试图在用户选择其中一个标签时触发javascript。

我正在使用此处的标签栏模板 http://onsenui.io/guide/getting_started.html

我现在已经尝试了几个小时甚至得到一个显示的警报，并且根本无法让它工作。

我可以在初始应用程序加载/第一个视图上触发警报 - 这很容易。但是，当用户点击选项卡图标以加载其他视图时，如何运行javascript。

Answer 1

在Onsen UI 1.0.4中，您无法挂钩标签的触摸事件为此，您应该创建自定义选项卡并使用它而不是标准选项卡。

例如，ons-tabbar-item2可以定义如下：

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();
                }

            }
        };
    });
})();

你可以在其中重写

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

如你所愿。

tab_bar.html现在正在关注

<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>

在Onsen UI的下一版本，版本1.1或2.0中，我们计划准备一个要使用的挂钩点。

在Onsenui / phonegap上的标签更改上执行javascript

1 个答案: