Titanium Alloy：Actionbar 和 DrawerMenu

Question

最近我开始使用 Titanium Alloy 开发一个多平台应用程序。我想要实现的其中一件事是在操作栏（应用图标的前面）中有一个菜单按钮。

按下时，它会切换抽屉菜单。

经过一番调查后，我没有找到可以同时提供这两种功能的小部件/模块。所以我决定使用 com.alcoapps.actionbarextras and com.mcongrove.slideMenu.

的组合

自定义操作栏和抽屉选项似乎都能正常运行。

然而问题是，它确实显示 'menu' 图像，它是可点击的，但我不知道如何将事件附加到它。

我尝试了几种方法，比如将事件绑定到整个操作栏。但是我似乎找不到合适的绑定来完成此操作。

index.js

var abextras = require('com.alcoapps.actionbarextras');

$.MainWindow.on('open', function(evt) {

    // set extras once the Activity is available
    abextras.title = "Test Window";
    abextras.homeAsUpIcon = "/images/menu.png";
    //abextras.titleColor = "#840505";
    //abextras.subtitle = "for some extra action";
    //abextras.subtitleFont = "Chunkfive.otf";
    //abextras.subtitleColor = "#562A2A";
    //abextras.backgroundColor = "#F49127";


    var activity = evt.source.activity;

    if (activity) {
        activity.onCreateOptionsMenu = function(e) {

            e.menu.clear();


            activity.actionBar.displayHomeAsUp = true;
                        //abextras.setHomeAsUpIcon("/images/menu.png");

                        //activity.actionBar.addEventListener("click", function(ev) {
                        //  console.log("HI");
                        //});

        };
    }

    /*

     // now set the menus
     evt.source.activity.onCreateOptionsMenu = function(e) {

     // aboutBtn and creditsBtn will be displayed in the menu overflow

     aboutBtn = e.menu.add({
     title : "About",
     showAsAction : Ti.Android.SHOW_AS_ACTION_NEVER
     });
     aboutBtn.addEventListener("click", function(e) {
     console.log('Clicked on About');
     });
     creditsBtn = e.menu.add({
     title : "Credits",
     showAsAction : Ti.Android.SHOW_AS_ACTION_NEVER
     });
     creditsBtn.addEventListener("click", function(e) {
     console.log('Clicked on Credits');
     });
     // create the Share intent and add it to the ActionBar
     var intent = Ti.Android.createIntent({
     action : Ti.Android.ACTION_SEND,
     type : 'text/plain'
     });
     intent.putExtra(Ti.Android.EXTRA_TEXT, 'Hello world!');
     abextras.addShareAction({
     menu : e.menu,
     //intent : intent
     });

     };
     */
});

function doClick(e) {
    alert($.label.text);
}

// Create our node items
var nodes = [{
    menuHeader : "My Tabs",
    id : 0,
    title : "Home",
    image : "/images/home.png"
}, {
    id : 1,
    title : "Contact",
    image : "/images/phone.png"
}, {
    id : 2,
    title : "Settings",
    image : "/images/gear.png"
}];

// Initialize the slide menu
$.SlideMenu.init({
    nodes : nodes,
    color : {
        headingBackground : "#000",
        headingText : "#FFF"
    }
});

// Set the first node as active
$.SlideMenu.setIndex(0);

// Add an event listener on the nodes
$.SlideMenu.Nodes.addEventListener("click", handleMenuClick);

// Handle the click event on a node
function handleMenuClick(_event) {
    if ( typeof _event.row.id !== "undefined") {
        // Open the corresponding controller
        openScreen(_event.row.id);
    }
}

function openMenu() {
    $.AppWrapper.animate({
        left : "300dp",
        duration : 250,
        curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });

    $.SlideMenu.Wrapper.animate({
        left : "0dp",
        duration : 250,
        curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });

    toggleMenu();
}

function closeMenu() {
    $.AppWrapper.animate({
        left : "0dp",
        duration : 250,
        curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });

    $.SlideMenu.Wrapper.animate({
        left : "-300dp",
        duration : 250,
        curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });

    toggleMenu();
}

function toggleMenu() {
    //
    console.log($.AppWrapper.left);
}

$.AppWrapper.addEventListener("swipe", function(_event) {
    if (_event.direction == "right") {
        openMenu();
    } else if (_event.direction == "left") {
        closeMenu();
    }
});

$.MainWindow.open();

//$.index.open();

index.xml

<Alloy>
    <Window class="container" id="MainWindow">
        <Require type="widget" src="com.mcongrove.slideMenu" id="SlideMenu" />

        <View id="AppWrapper">
            <Label text="Profile View" />
        </View>
    </Window>
</Alloy>

希望对 Titanium 有更多了解的人 and/or 这些模块可以指导我。

亲切的问候， larssy1

Answer 1

联系小程序制作者后，结果如下：

var activity = evt.source.activity;      
if (activity){
    activity.actionBar.onHomeIconItemSelected = function() {
       // your callback here
       alert('I was clicked');
    }
}

Titanium Alloy：Actionbar 和 DrawerMenu

Titanium Alloy: Actionbar & DrawerMenu

titanium

titanium-mobile

titanium-alloy

titanium-modules

titanium-widgets