阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Easy responsive tabs to accordion 中文API文档

      插件 jQuery.Easy responsive tabs to accordion 中文API文档 https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion Easy Responsive Tabs to Accordion

      Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its form accordingly.

      Features

      • Horizontal / Vertical Tabs to Accordion
      • Tabs and accordion are created entirely with jQuery
      • Supports multiple sets of tabs on same page
      • Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
      • Multi device support (Web, Tablets & Mobile)
      • Link directly to specified tab (works with multiple instances)
      • Maintains state of tabs when navigating away from page and then returning using back or forward (if browser supports the History API)
      • Nested tabs

      Demo

      http://webthemez.com/demo/easy-responsive-tabs/Index.html

      How to use

      => Included jQuery file (minimum jQuery-1.5.1.min.js) => Included easyResponsiveTabs.js => Include responsive-tabs.css => Here is the Markup for Tabs structure (non nested tabs):

          <div id="demoTab">          
              <ul class="resp-tabs-list">
                  <li> .... </li>
                  <li> .... </li>
                  <li> .... </li>
              </ul> 
      
              <div class="resp-tabs-container">                                                        
                  <div> ....... </div>
                  <div> ....... </div>
                  <div> ....... </div>
              </div>
          </div>    
      

      => Here is the Markup for Tabs structure (nested tabs):

          <div id="ParentTab">          
          <ul class="resp-tabs-list tab_identifier_parent">
              <li> .... </li>
              <li> .... </li>
              <li> .... </li>
          </ul> 
      
          <div class="resp-tabs-container tab_identifier_parent">                                                     
              <div>
                 <p> 
                    <div id="ChildTab">          
                      <ul class="resp-tabs-list tab_identifier_child">
                         <li> .... </li>
                         <li> .... </li>
                         <li> .... </li>
                      </ul> 
      
                      <div class="resp-tabs-container tab_identifier_child">                                                                     <div> ....... </div>
                         <div> ....... </div>
                         <div> ....... </div>
                      </div>
                    </div>    
                 </p>
              </div>
              <div> ....... </div>
              <div> ....... </div>
          </div>
      </div>  
      

      => Call the easyResponsiveTabs function:

          $('#demoTab').easyResponsiveTabs();
      

      => With optional parameters:

          $("#demoTab").easyResponsiveTabs({
          type: 'default', //Types: default, vertical, accordion           
          width: 'auto', //auto or any custom width
          fit: true,   // 100% fits in a container
          closed: false, // Close the panels on start, the options 'accordion' and 'tabs' keep them closed in there respective view types
          activate: function() {},  // Callback function, gets called if tab is switched
          tabidentify: 'tab_identifier_child', // The tab groups identifier *This should be a unique name for each tab group and should not be defined in any styling or css file.
          activetab_bg: '#B5AC5F', // background color for active tabs in this group
          inactive_bg: '#E0D78C', // background color for inactive tabs in this group
          active_border_color: '#9C905C', // border color for active tabs heads in this group
          active_content_border_color: '#9C905C' // border color for active tabs contect in this group so that it matches the tab head border
      });
      

      => Linking to Tabs:

          http://yoursite.com/tabs.html#{TAB ID}{TAB NUM}
          http://yoursite.com/tabs.html#demoTab2
      
          Multiple Instances:
          http://yoursite.com/tabs.html#{TAB ID 1}{TAB NUM}|{TAB ID 2}{TAB NUM}
          http://yoursite.com/tabs.html#demoTab2|demoTwo3
      

      For any support

      Samson Email: samson3d@gmail.com

      目录
      本文目录
      目录