angularJs 菜單的timeout和delay處理

在前端開發菜單的時候，經常遇到鼠標一移出菜單項的範圍，子菜單馬上消失，導致用戶很難選擇到想要的菜單。

爲此，我們在做angularJs開發時，爲了達到更好的用戶操作菜單體驗，使用了jQuery-menu-aim插件，該插件很好的解決了對菜單添加timeout和delay的問題。

jQuery-menu-aim

menu-aim is a jQuery plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu's contents.

This problem is normally solved using timeouts and delays. menu-aim tries to solve this by detecting the direction of the user's mouse movement. This can make for quicker transitions when navigating up and down the menu. The experience is hopefully similar to amazon.com/'s "Shop by Department" dropdown.

How did Amazon get away without using a delay?

It’s easy to move the cursor from Amazon’s main dropdown to its submenus. You won’t run into the bootstrap bug. They get away with this by detecting the direction of the cursor’s path.

https://github.com/kamens/jQuery-menu-aim/blob/master/README.md

請看如下示例代碼：

1. html 文件中定義了菜單標籤：

    <div class="page-sidebar care-gradients" id="sidebar">
        <ul class="nav sidebar-menu" role="menu" id="page-sidebar-menu">
            <li ng-repeat="menu in menus" ng-class="{active: isActive(menu)}"
                data-submenu-id="submenu-{{menu.id}}" on-finish-render="ngRepeatFinished">
                <a href="{{menu.path}}" ng-class="{'menu-dropdown': menu.submenus.length > 0}" ng-if="menu.id!='blank'">
                    <img src="/images/{{menu.src}}" class="{{menu.class}}" alt="" ng-click="openCfgPage(menu.defaultpath)">
                    <span class="menu-text"> {{menu.title}} </span>
                    <i class="menu-expand white" ng-if="menu.submenus.length > 0"></i>
                </a>
                <a ng-if="menu.id=='blank'" class="blank-submenu-row"></a>
                <ul id="submenu-{{menu.id}}" class="submenu popover" ng-if="menu.submenus.length > 0">
                    <li ng-repeat="submenu in menu.submenus" ng-class="{active: isActive(submenu)}"
                        ng-if="submenu.authorizedRole == undefined || isAuthorized(submenu.authorizedSymbol, submenu.authorizedRole)">
                        <a href="/#{{submenu.path}}">
                            <span class="menu-text"> {{submenu.title}}</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

2. index.html文件中引用jQuery-menu-aim插件

<script src="scripts/vendors/jQuery-menu-aim-master/jquery.menu-aim.js"></script>

3.controller中處理菜單的顯示和隱藏：

 $scope.$on('ngRepeatFinished', function () {
            var $menu = $("#page-sidebar-menu");
            $menu.menuAim({
                activate: function (row) {
                    var b = $("#sidebar").hasClass("menu-compact");
                    if(b) {
                        var $row = $(row),
                            submenuId = $row.data("submenuId"),
                            $submenu = $("#" + submenuId);
                        $submenu.css({display: "block"});
                    }
                },
                deactivate: function (row) {
                    var b = $("#sidebar").hasClass("menu-compact");
                    if(b) {
                        var $row = $(row),
                            submenuId = $row.data("submenuId"),
                            $submenu = $("#" + submenuId);
                        $submenu.css("display", "none");
                    }
                },
                exitMenu: function (){
                    return true;
                }
            });
        });

row 代表的是li對象，即一級菜單項

<li ng-repeat="menu in menus"

通過html中ul標籤設置data-submenu-id, 及<ul id="submenu-{{menu.id}}"，可以取到li下面的子菜單，從而設置display值來控制子菜單的顯示和隱藏。

timeout及delay的處理請看源碼jquery.menu-aim.js中的activationDelay（）函數。