建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery响应式Tab选项卡插件easyRespon siveTabs.js

来源:易助科技网浏览量:23收藏

简介


easyRespoiveTabs.js是一款轻量级的响应式 Tab 选项卡手风琴JQuery插件,默认为水平垂直Tab选项卡样式。


JQuery响应式Tab选项卡插件easyRespon siveTabs.js-示例图



主要特性:


1)渐进增强–使用语义标题/内容标记–选项卡和手风琴完全由jQuery创建

2)使用Aria属性和角色来帮助屏幕阅读器的可访问性

3)选项卡及其内容可通过键盘完全访问

4)支持同一页面上的多组选项卡


注意


1)在手风琴视图中,所有标题最初都被折叠。如果在折叠所有手风琴时将窗口调整为选项卡视图,则打开的选项卡将是在选项卡视图中打开的最后一个选项卡(如果用户未打开,则为默认选项卡);

2)在手风琴视图中,如果用户在当前打开的手风琴下方打开手风琴,则屏幕将向下滚动到该手风琴,以防止页面跳转;

3)在Internet Explorer 7和8中,选项卡没有响应,但显示为常规选项卡,而与屏幕大小无关。



使用


1.  引入 JQuery.js 和  easyRespoiveTabs.js文件


2.  HTML


<div class="sap_tabs">
  <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
    <ul class="resp-tabs-list">
      <li class="resp-tab-item" aria-controls="tab_item-0" role="tab" style="font-size: 20px"><span>选项卡1</span></li>
      <li class="resp-tab-item" aria-controls="tab_item-1" role="tab" style="font-size: 20px"><span>选项卡2</span></li>
      <div class="clearfix"></div>
    </ul>
    
    <div class="resp-tabs-container">
      <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
        <div class="tab_img grid">
          <div class="col-md-3 img-top ">
            <a href="#" rel="title" class="b-link-stripe b-animate-go  thickbox" target="_blank">
              <figure class="effect-apollo">
                <img src="images/photowall/g1.jpg" alt="" />
                <figcaption></figcaption>
              </figure>
            </a>
          </div>
          
          <div class="col-md-3 img-top ">
            <a href="#" rel="title"	class="b-link-stripe b-animate-go  thickbox" target="_blank">
              <figure class="effect-apollo">
                <img src="images/photowall/g2.jpg" alt="" />
                <figcaption></figcaption>
              </figure>
            </a>
          </div>
          
          <div class="col-md-3 img-top ">
            <a href="#" rel="title"	class="b-link-stripe b-animate-go  thickbox" target="_blank">
              <figure class="effect-apollo">
                <img src="images/photowall/g3.jpg" alt="" />
                <figcaption></figcaption>
              </figure>
            </a>
          </div>
          
          <div class="clearfix"></div>
        </div>
      </div>
      
      <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
        <div class="tab_img grid">
          <div class="col-md-3 img-top ">
            <a href="#" rel="title"	class="b-link-stripe b-animate-go  thickbox" target="_blank">
              <figure class="effect-apollo">
                <img src="images/photowall/g9.jpg" alt="" />
                <figcaption></figcaption>
              </figure>
            </a>
          </div>
          
          <div class="col-md-3 img-top ">
            <a href="#" rel="title"	class="b-link-stripe b-animate-go  thickbox" target="_blank">
              <figure class="effect-apollo">
                <img src="images/photowall/g10.jpg" alt="" />
                <figcaption></figcaption>
              </figure>
            </a>
          </div>
          
          <div class="col-md-3 img-top ">
            <a href="#" rel="title"	class="b-link-stripe b-animate-go  thickbox" target="_blank">
              <figure class="effect-apollo">
                <img src="images/photowall/g11.jpg" alt="" />
              <figcaption></figcaption>
            </figure>
          </a>
        </div>
        
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>
</div>


3.  调用


<script type="text/javascript">
  $(document).ready(function () {
    $('#horizontalTab').easyResponsiveTabs({
      type: 'default', //Types: default, vertical, accordion
      width: 'auto', //auto or any width like 600px
      fit: true   // 100% fit in a container
    });
  });
</script>



相关链接


GitHub 地址 :  https://github.com/petelove666/Responsive-Tabs

效果演示及文档 :  http://www.petelove.com/responsiveTabs/