• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

kamens/jQuery-menu-aim: jQuery plugin to fire events when user's cursor aims ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

kamens/jQuery-menu-aim

开源软件地址:

https://github.com/kamens/jQuery-menu-aim

开源编程语言:

JavaScript 100.0%

开源软件介绍:

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.

Try a demo.

Amazon screenshot

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.

Use like so:

 $("#menu").menuAim({
     activate: $.noop,  // fired on row activation
     deactivate: $.noop  // fired on row deactivation
 });

...to receive events when a menu's row has been purposefully (de)activated.

The following options can be passed to menuAim. All functions execute with the relevant row's HTML element as the execution context ('this'):

 .menuAim({
     // Function to call when a row is purposefully activated. Use this
     // to show a submenu's content for the activated row.
     activate: function() {},

     // Function to call when a row is deactivated.
     deactivate: function() {},

     // Function to call when mouse enters a menu row. Entering a row
     // does not mean the row has been activated, as the user may be
     // mousing over to a submenu.
     enter: function() {},

     // Function to call when mouse exits a menu row.
     exit: function() {},

     // Function to call when mouse exits the entire menu. If this returns
     // true, the current row's deactivation event and callback function
     // will be fired. Otherwise, if this isn't supplied or it returns
     // false, the currently activated row will stay activated when the
     // mouse leaves the menu entirely.
     exitMenu: function() {},

     // Selector for identifying which elements in the menu are rows
     // that can trigger the above events. Defaults to "> li".
     rowSelector: "> li",

     // You may have some menu rows that aren't submenus and therefore
     // shouldn't ever need to "activate." If so, filter submenu rows w/
     // this selector. Defaults to "*" (all elements).
     submenuSelector: "*",

     // Direction the submenu opens relative to the main menu. This
     // controls which direction is "forgiving" as the user moves their
     // cursor from the main menu into the submenu. Can be one of "right",
     // "left", "above", or "below". Defaults to "right".
     submenuDirection: "right"
 });

menu-aim assumes that you are using a menu with submenus that expand to the menu's right. It will fire events when the user's mouse enters a new dropdown item and when that item is being intentionally hovered over.

Want an example to learn from?

Check out example/example.html -- it has a working dropdown for you to play with:

Example screenshot
Play with the above example full of fun monkey pictures by opening example/example.html after downloading the repo.

FAQ

  1. What's the license? MIT.
  2. Does it support horizontal menus or submenus that open to the left? Yup. Check out the submenuDirection option above.
  3. I work at a big company that requires a version number on this third party code before I can use it. Do you have a version number? Sure, current version: 1.1
  4. I'm not nearly bored enough. Got anything else? Read about this plugin's creation.



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap