priority-navigation, Priority+导航—的Javascript实现无相关性

分享于 

5分钟阅读

GitHub

  繁體 雙語
Javascript implementation for Priority+ Navigation — lightweight, no dependencies
  • 源代码名称:priority-navigation
  • 源代码网址:http://www.github.com/gijsroge/priority-navigation
  • priority-navigation源代码文档
  • priority-navigation源代码下载
  • Git URL:
    git://www.github.com/gijsroge/priority-navigation.git
    Git Clone代码到本地:
    git clone http://www.github.com/gijsroge/priority-navigation
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/gijsroge/priority-navigation
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    PriorityNavigation.js

    如果你的菜单项不适合它的父项,那么PriorityNav是一个纯javascript插件,它将移动你的菜单项。 Priority Navigation demo

    我们将查看网站的收费。

    特性

    • 可以访问的
      添加适当的aria属性,并在需要时将焦点设置为链接。
    • dependency
      这个插件是用纯javascript编写的,使它快速。
    • 断点
      到达断点后,插件将自动将所有项移动到下拉列表&更改切换标签到 navDropdownBreakpointLabel。
    • 可用空间的智能计算
      它自动查找导航的主要同级,并计算剩余的空间。

    • of 上面,你可以在同一级别上有多个内联块/flexbox项。
    • 非阻塞菜单下拉菜单
      下拉菜单可以通过单击外部并按esc键关闭。
    • 回调
      当项目从主导航中移回或者移回时,会激发回叫。

    用法

    加载插件文件

    <!DOCTYPE html>
    <head>
     <linkrel="stylesheet"href="priority-nav-core.css">
    </head>
    <body>
     <scriptasyncsrc="priority-nav.js"></script>
    </body>

    没有任何选项的呼叫插件。

    var nav =priorityNav.init();

    理想的html结构

    <nav>
     <ul> <- needs to be inline-block
     <li>menu item</li>
     <li>menu item</li>
     <li>menu item</li>
     <li>menu item</li>
     </ul>
    </nav>

    命令行选项

    initClass:"js-priorityNav", // Class that will be printed on html element to allow conditional css styling.mainNavWrapper:"nav", // mainnav wrapper selector (must be direct parent from mainNav)mainNav:"ul", // mainnav selector. (must be inline-block)navDropdownClassName:"nav__dropdown", // class used for the dropdown - this is a class name, not a selector.navDropdownToggleClassName:"nav__dropdown-toggle", // class used for the dropdown toggle - this is a class name, not a selector.navDropdownLabel:"more", // Text that is used for the dropdown toggle.navDropdownBreakpointLabel:"menu", //button label for navDropdownToggle when the breakPoint is reached.breakPoint:500, //amount of pixels when all menu items should be moved to dropdown to simulate a mobile menuthrottleDelay:50, // this will throttle the calculating logic on resize because i'm a responsible dev.offsetPixels:0, // increase to decrease the time it takes to move an item.count:true, // prints the amount of items are moved to the attribute data-count to style with css counter.//Callbacksmoved:function () {}, // executed when item is moved to dropdownmovedBack:function () {} // executed when item is moved back to main menu

    软件包管理器

    • npm install --save priority-nav
    • Bower:bower install priority-nav.js

    生成源文件

    
    #cloning repository
    
    
    git clone https://github.com/gijsroge/priority-navigation.git
    
    
    cd priority-navigation
    
    
    
    #dependencies
    
    
    npm install
    
    
    
    #build files to dist folder
    
    
    grunt build
    
    
    
    

    支持

    要支持 IE 9和更低的 classList.js 插件,必须添加你的页面。

    <!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script><![endif]-->

    支持

    要支持 IE 8,必须添加来自 上面的es5-shim 和 classList.js。

    <!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.0.8/es5-shim.min.js"></script><![endif]-->


    相关文章