帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:sli  Sliding  菜单  
The easiest way to create a sliding menu with jQuery

  • 源代码名称:sliiide
  • 源代码网址:http://www.github.com/ahmedrad/sliiide
  • sliiide源代码文档
  • sliiide源代码下载
  • Git URL:
    git://www.github.com/ahmedrad/sliiide.git
  • Git Clone代码到本地:
    git clone http://www.github.com/ahmedrad/sliiide
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/ahmedrad/sliiide
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 在这里签出演示

    首先,这个插件目前正在测试中,请随时随地进入野外,发回你可以能遇到的反馈或者 Bug 。 我在那里创建了这个插件,所有的slider jQuery插件都没有为我做过。 享受: )

    ##What 要使用这里选项? 你有一个 div ( 可能是导航菜单或是侧边栏),你要使用滑动效果从视口外部动画来对视口进行 inside 操作。 你想完全控制这个div幻灯片的距离,但是你不想担心如何定位它,或者如何将它拉伸到 MATCH的尺寸。 另外,你也不想担心动画如何影响页面的其余部分,如何处理滚动以及如何激活和停用菜单。

    这个插件是基于jQuery的,但是可能使用旧版本和新版本,如果你遇到任何问题,它会告诉我它是如何运行的。 否则,就没有CSS文件或者其他需要的东西。 这个插件为你正在使用的元素操作 inline 样式,并对 body 元素进行一些操作。 如果你还执行大量 inline 样式操作,可能会遇到冲突。

    ####this 插件正式支持 Chrome,Firefox,safari,IE 10/11 和 Edge

    ##How 使用它1 - 从 github repo 下载 sliiide js文件( 或者缩小版),在 body 结束标记前包括js文件并确保jQuery包含在前面。 或者仅使用 Bower"Bower 安装 sliiide""

    2-,你需要一个 div ( 导航菜单或者任何你想要的东西) 并将它的可见性设置为隐藏。 请确保这里DIV是 body 元素的直接子元素。 你还需要设置对象。

     var settings = {
     toggle:"#sliiider-toggle",//the selector for the menu toggle, whatever clickable element you want to activate or deactivate the menu. A click listener will be added to this element.
     exit_selector:".slider-exit",//the selector for an exit button in the div if needed, when the exit element is clicked the menu will deactivate, suitable for an exit element inside the nav menu or the side bar
     animation_duration:"0.5s",//how long it takes to slide the menu
     place:"left",//where is the menu sliding from, possible options are (left | right | top | bottom)
     animation_curve:"cubic-bezier(0.54, 0.01, 0.57, 1.03)",//animation curve for the sliding animation
     body_slide: true,//set it to true if you want to use the effect where the entire page slides and not just the div
     no_scroll: true,//set to true if you want the scrolling disabled while the menu is active
     auto_close: false//set to true if you want the slider to auto close everytime a child link of it is clicked
     };
     $('#menu').sliiide(settings);//initialize sliiide

    你要将这个div水平滑动,你需要自己设置分区的宽度,并且sliiide会把你的高度扩展到窗口高度。 如果你要垂直滑动( 从顶部或者底部),那么你需要对高度进行样式化,sliiide将扩展宽度。 滑动效果将更改为 MATCH,无论你添加到元素宽度( 或者高度)的样式。

    4-有用的功能可以供你使用:

     var menu = $('.left-menu').sliiide({place: 'left', exit_selector: '.some-exit-selector', toggle: '#some-toggle-selector, no_scroll: true, body_slide: true'});
     menu.activate();//slides the menu open
     menu.deactivate();//slides the menu closed
     menu.reset();//removes all the css that sliiide added to any element

    也就是说,你现在应该很好了,可以以随时报告你遇到的任何问题。



    文章标签:菜单  sli  Sliding  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语