阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.waSlideMenu 中文API文档

      插件 jQuery.waSlideMenu 中文API文档 https://github.com/webasyst/waslidemenu

      waSlideMenu

      jQuery plugin that turns big nested (hierarchical) trees into a cool looking multi-level sliding drill down menus. MIT license.

      Demo

      Usage

      Link CSS

      <link rel="stylesheet" href="/path/to/waslidemenu.css">
      

      Link JS after jQuery (> 1.7):

      <script src="jquery.js" type="text/javascript"></script>
      <script src="/path/to/jquery.waslidemenu.js" type="text/javascript"></script>
      

      Prepare your HTML

      <nav id="mymenu">
      	<ul>
      		<li>
      			<a href="#1">Parent</a>
      			<ul>
      				<li>
                          <a href="#1.1">Child</a>
                          <ul>
                          	<li>
                          		<a href="#">We need to go deeper</a>
                              </li>
                          </ul>
                      </li>
                      <li><a href="#1.2">Child</a></li>
                  </ul>
              </li>
              <li><a href="#2">Parent</a></li>
              <li><a href="#3">Parent</a></li>
          </ul>
      </nav>
      

      Init the awesome

      $(document).ready(function(){
         $('#mymenu').waSlideMenu({});
      });
      

      Options

      Slide speed

      $('#menu').waSlideMenu({
          slideSpeed: 500
      });
      

      By default 400.

      Slide effect

      $('#menu').waSlideMenu({
          slideEasing: 'linear'
      });
      
      $('#menu').waSlideMenu({
          backLinkContent: 'Take me back, sir.'
      });
      

      By default Back.

      $('#menu').waSlideMenu({
          backOntTop: true
      });
      

      By default false - that means ‘after’ menu.

      Class for current selected menu element

      $('#menu').waSlideMenu({
          selectedClass: 'selected-menu'
      });
      

      By default 'selected'.

      Container selecter, where plugin will load content from menu item url

      $('#menu').waSlideMenu({
          loadContainer : '#content'
      });
      

      By default '' - nothing is loading.

      Minimum menu height

      $('#menu').waSlideMenu({
          minHeightMenu : 400
      });
      

      By default 0 - no min-height.

      $('#menu').waSlideMenu({
          autoHeightMenu : true
      });
      

      By default true, menu height will adjusts for its content.

      URL exception

      $('#menu').waSlideMenu({
          excludeUri : ['/dont-load/', '#pleasedontloadme']
      });
      

      URLs '/dont-load/' and '#pleasedontloadme' will not load in loadContainer. By default ['/', '#'].

      Load content only latest nested menu items

      $('#menu').waSlideMenu({
          loadOnlyLatest : true
      });
      

      By default false. If set to true, then menus will slide without loading content until it reached latest menu item.

      $('#menu').waSlideMenu({
          menuSelector : '.i-am-menu'
      });
      

      By default 'ul'.

      $('#menu').waSlideMenu({
          itemSelector : '.i-am-menu-item'
      });
      

      By default 'li'.

      Title for page

      $('#menu').waSlideMenu({
          setTitle : true
      });
      

      By default false. After menu item URL loading will set Title tag like menu item link text.

      Speed of slide up to current menu item

      $('#menu').waSlideMenu({
          scrollToTopSpeed : 100
      });
      

      By default 0. Sometimes after sliding to nested menu or back menu items disappear from visible area. In this case page will slide up to current menu item (selected item).

      Callbacks

      Here this - plugin instance.

      After plugin initialization
      $('#menu').waSlideMenu({
          onInit : function(){
              alert('Here I am!');
          }
      });
      
      After slide to a child submenu
      $('#menu').waSlideMenu({
          onSlideForward : function(){
              alert('I slide forward (deeper)!');
          }
      });
      
      After slide back to top
      $('#menu').waSlideMenu({
          onSlideBack : function(){
              alert('I slide back (bubling)!');
          }
      });
      
      After slide animation is completed
      $('#menu').waSlideMenu({
          afterSlide : function(){
              alert('Yep! I just slide!!');
          }
      });
      
      After click on last node element
      $('#menu').waSlideMenu({
          onLatestClick : function(){
              alert('Last element clicked: ' + $(this).text());
          }
      });
      

      Here this - clicked element.

      Before load URL
      $('#menu').waSlideMenu({
          beforeLoad : function(){
              this.html('<img src="myloading.gif">');
          }
      });
      

      Executes before load starts (async). this - jQuery object of loadContainer.

      After load URL (always)
      $('#menu').waSlideMenu({
          afterLoadAlways : function(){
              alert('You URL request just completed!');
          }
      });
      
      After success load
      $('#menu').waSlideMenu({
          afterLoadDone : function(){
              alert('Nice URL! 200 OK!');
          }
      });
      
      After fail load
      $('#menu').waSlideMenu({
          afterLoadFail : function(){
              alert('Bad URL :(');
          }
      });
      

      Event triggers

      Following event triggers are available: onInit.waSlideMenu, afterLoadDone.waSlideMenu, afterLoadFail.waSlideMenu, afterLoadAlways.waSlideMenu.

      $('#menu').on('onInit.waSlideMenu', function(){
          alert('After INIT waSlideMenu Event');
      }).on('afterLoadDone.waSlideMenu', function(){
          alert('After URL load success Event');
      }).on('afterLoadFail.waSlideMenu', function(){
          alert('After URL load fails Event');
      }).on('afterLoadAlways.waSlideMenu', function(){
          alert('After URL request completed Event');
      }).on('onLatestClick.waSlideMenu', function(){
          alert('On last node element click Event');
      });;
      

      One more thing

      • Doesn’t depends on HTML tags. Depends on structure.
      <nav id="menu">
          <div class="menu">
              <div class="item">
                  <a href="#1">1</a>
                  <div class="menu">
                      <div class="item"><a href="#1.1">1.1</a></div>
                      <div class="item"><a href="#1.2">1.2</a></div>
                  </div>
              </div>
              <div class="item"><a href="#2">2</a></div>
              <div class="item"><a href="#3">3</a></div>        
          </div>
      </nav>
      <script>
          $('#menu').waSlideMenu({
              menuSelector : '.menu',
              itemSelector : '.item'
          });
      </script>
      
      • Options and callbacks can be set after the initialization
      var slidemenu = $('#menu').waSlideMenu({});
      slidemenu.waSlideMenu({
          slideSpeed : 3000, // veeeeeeeery smooooooth
          afterSlide : function(){
              alert('Yeah!!11 This was coooool smoooth sliiide!');
          }
      });
      
      • On one page you can set as many sliding menus as you wish

      • Can destroy menu at any time (are you sure? :( )

      $('#menu').waSlideMenu('exec','destroy');
      

      Dependencies

      • jQuery 1.7

      Compatibility

      • IE9+
      • Google Chrome
      • Firefox
      • need feedback…

      Issues

      Welcome: https://github.com/webasyst/waslidemenu/issues

      目录
      目录