jQuery响应式Tabs选项卡特效插件

jQuery响应式Tabs选项卡特效插件

这是一款jQuery响应式Tabs选项卡插件。该tabs选项卡插件兼容ie8,当浏览器缩小到小于选项卡的宽度时,选项卡的菜单会以下拉菜单的方式来显示。

使用方法
在页面中引入jquery和jquery.horizontalmenu.js、jquery.horizontalmenu.css文件。

1
2
3
<link href="css/jquery.horizontalmenu.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>            
<script type="text/javascript" src="js/jquery.horizontalmenu.js"></script>

HTML结构
Tabs选项卡的基本HTML结构如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="ah-tab-wrapper">
  <div class="ah-tab">
    <a class="ah-tab-item" data-ah-tab-active="true" href="">菜单项1</a>
    <a class="ah-tab-item" href="">菜单项2</a>
    <a class="ah-tab-item" href="">菜单项3</a>
    <a class="ah-tab-item" href="">菜单项4</a>
    <a class="ah-tab-item" href="">菜单项5</a>
  </div>
</div>
<div class="ah-tab-content-wrapper">
  <div class="ah-tab-content" data-ah-tab-active="true">
    <h2>Personal data</h2>
  </div>
  <div class="ah-tab-content">
    <h2>Contacts</h2>
  </div>
  <div class="ah-tab-content">
    <h2>Tab item with a long name</h2>
  </div>
  <div class="ah-tab-content">
    <h2>Password change</h2>
  </div>
  <div class="ah-tab-content">
    <h2>Tab item</h2>
  </div>
</div>

初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来使选项卡自适应屏幕宽度,在屏幕宽度小于选项卡宽度时,显示为下拉菜单。

1
2
3
4
5
6
7
8
9
$(function () {
  $('.ah-tab-wrapper').horizontalmenu({
    itemClick : function(item) {
      $('.ah-tab-content-wrapper .ah-tab-content').removeAttr('data-ah-tab-active');
      $('.ah-tab-content-wrapper .ah-tab-content:eq(' + $(item).index() + ')').attr('data-ah-tab-active', 'true');
      return false; //if this finction return true then will be executed http request
    }
  });
});
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论