jQuery TAB插件之TAB选项卡实现实例

在写插件之前对常见的TAB效果做了下总结，大体上也就那几种效果。插件力求简单易用，只要能实现常见的功能即可。

参数说明：
•event
•触发TAB的事件类型，鼠标悬停：mouseover，鼠标点击：click，默认为mouseover。
•timeout
•事件延迟，单位为毫秒，默认为0。
•auto
•自动切换，单位为毫秒，默认为0。
•callback
•回调函数，触发TAB时执行，函数的参数返回的是this。

html代码

 代码如下 复制代码

<DIV id=box>
 <!-- TAB菜单部分 -->

<UL class=tab_menu>

 <LI class=current>新闻</LI>

 <LI>图片</LI>

 <LI>军事</LI>

</UL>

 <!-- TAB内容部分 -->

<DIV class=tab_box>

<DIV>新闻</DIV>

<DIV class=hide>图片</DIV>

<DIV class=hide>军事</DIV>
</DIV>
</DIV>

CSS样式部分：

 代码如下 复制代码

<!--
.tab_menu{
 list-style:none;
 width:210px;
 overflow:hidden;
}
.tab_menu li{
 width:70px;height:30px;
 line-height:30px;
 float:left;
 color:#fff;
 background:#093;
 text-align:center;
 cursor:pointer;
}
.tab_menu li.current{
 color:#333;
 background:#fff;
} /*TAB菜单高亮样式*/
.tab_box{
 padding:20px;
 height:120px;
}
.tab_box .hide{
 display:none;
} /*隐藏TAB内容部分*/
-->

调用插件：

 代码如下 复制代码

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $('#box').Tabs({
    event:'mouseover',  //事件类型
    timeout:100,  //设置事件延迟
    auto:3000,  //3秒自动切换一次
    callback:null  //回调函数
  });  //返回了this
});
</script>

完整实例如下

 代码如下 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<title>jQuery TAB插件</title>
<style>
* {
 margin:0;
 padding:0;
}
body {
 background:#e3e3e3;
 height:100%;
 font:normal normal 12px/24px "Microsoft yahei", Arial;
 padding-bottom:30px;
}
#title{width:300px;margin:3% auto 0;}
h1{font-size:18px;}
h6{ font-size:12px; font-weight:normal; color:#333;margin-bottom:10px; }
h6 a { color:#09c; }
#wrapper {
 width:300px;
 margin:0 auto;
 background:#f8f8f8;
 border:1px solid #a3a3a3;
 padding:20px 20px 50px;
 border-radius:5px;-moz-border-radius:5px;
}
.box{width:210px;margin:10px auto 0;background:#fff;border:1px solid #d3d3d3;}
.tab_menu{list-style:none;width:210px;overflow:hidden;}
.tab_menu li{width:70px;float:left;height:30px;line-height:30px;color:#fff;background:#093;text-align:center;cursor:pointer;}
.tab_menu li.current{color:#333;background:#fff;}
.tab_box{padding:20px;height:120px;}
.tab_box .hide{display:none;}
h3{color:#333;font-size:14px;width:210px;margin:30px auto 0;}
</style>
</head>

<body>
<div id="title">
<h1>jQuery TAB插件演示</h1>

</div>
<div id="wrapper">
<h3>默认状态</h3>
<div class="box demo1">
 <ul class="tab_menu">
  <li class="current">新闻</li>
  <li>图片</li>
  <li>军事</li>
 </ul>
 <div class="tab_box">
  <div>新闻</div>
  <div class="hide">图片</div>
  <div class="hide">军事</div>
 </div>
</div>
<h3>鼠标点击</h3>
<div class="box demo2">
 <ul class="tab_menu">
  <li class="current">新闻</li>
  <li>图片</li>
  <li>军事</li>
 </ul>
 <div class="tab_box">
  <div>新闻</div>
  <div class="hide">图片</div>
  <div class="hide">军事</div>
 </div>
</div>
<h3>事件延迟 300毫秒</h3>
<div class="box demo3">
 <ul class="tab_menu">
  <li class="current">新闻</li>
  <li>图片</li>
  <li>军事</li>
 </ul>
 <div class="tab_box">
  <div>新闻</div>
  <div class="hide">图片</div>
  <div class="hide">军事</div>
 </div>
</div>
<h3>自动轮换 3秒间隔</h3>
<div class="box demo4">
 <ul class="tab_menu">
  <li class="current">新闻</li>
  <li>图片</li>
  <li>军事</li>
 </ul>
 <div class="tab_box">
  <div>新闻</div>
  <div class="hide">图片</div>
  <div class="hide">军事</div>
 </div>
</div>
<h3>回调函数</h3>
<div class="box demo5">
 <ul class="tab_menu">
  <li class="current">新闻</li>
  <li>图片</li>
  <li>军事</li>
 </ul>
 <div class="tab_box">
  <div>新闻</div>
  <div class="hide">图片</div>
  <div class="hide">军事</div>
 </div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://stylechen.com/wp-content/uploads/demo/jquery-tabs/jquery.tabs.js"></script>
<script>
$(function(){
 $('.demo1').Tabs();
 $('.demo2').Tabs({
  event:'click'
 });
 $('.demo3').Tabs({
  timeout:300
 });
 $('.demo4').Tabs({
  auto:3000
 });
 $('.demo5').Tabs({
  event:'click',
  callback:tabcallback
 });
 function tabcallback(){
  alert("我是回调函数 :)");
 }
}); 
</script>
</body>
</html>
时间： 2024-10-27 01:52:43

jQuery TAB插件之TAB选项卡实现实例的相关文章

jquery简单插件制作(fn.extend)完整实例_jquery

本文实例讲述了jquery简单插件制作方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&qu

jQuery 标签插件 Tags Input Plugin 使用实例教程

一这个插件是jquery开发的标签功能加强,生成或删除标签非常好用,还能对输入重复标签进行检查,配合JQuery autocomplete插件实现自动完成功能.官网:http://xoxco.com/projects/code/tagsinput/ 使用方法如下  引入 <link href="../../resources/css/jquery.tagsinput.css" rel="stylesheet" type="text/css"

20 个 jQuery 分页插件和教程，附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示. 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. jQuery ScrollPagination jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件. Read More Demo 3.

jquery.qrcode插件生成二维码实例

如何使用 1.首先在页面中加入jquery库文件和qrcode插件.  代码如下 复制代码 <script type="text/javascript" src="jquery.js"></script>  <script type="text/javascript" src="jquery.qrcode.min.js"></script> 2.在页面中需要显示二维码的地方加入以

jQuery ui插件的使用方法代码实例_jquery

复制代码 代码如下:        <script src="Jquery1.7.js" type="text/javascript"></script>     <script src="jquery.validate.js" type="text/javascript"></script>     <script src="messages_cn.js&quo

Jquery树插件zTree用法入门教程

 这篇文章主要介绍了Jquery树插件zTree用法入门教程,实例分析了zTree插件的使用技巧,非常具有实用价值,需要的朋友可以参考下     本文实例分析了Jquery树插件zTree用法.分享给大家供大家参考.具体分析如下: 关于zTree的介绍就搜吧. 这个例子的最终效果如下: 鼠标移动到一级目录时出现全选链接,点击全选链接该目录下的所有子项都被添加到收件人的文本框中,当然点击单个子项则添加一个.至于要添加些什么信息由自己决定. 1. 下载zTee,页面引入jquery.js,根据功能需

基于JQuery的6个Tab选项卡插件_jquery

顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下.当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了.先来看看老外们出色的基于JQuery的各式Tab选项卡吧:1. jQuery 选项卡界面 / 选项卡结构菜单教程这种 类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心此 演示哟,你一定会喜欢上它的.演示 | 下载 | 介绍 2

jquery tab选项卡切换实例

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html>     <head>         <meta http-equiv="content-type" content="text/html;

jquery实现超简洁的TAB选项卡效果代码_jquery

本文实例讲述了jquery实现超简洁的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款超简洁的TAB选项卡,个人觉得有点太简单,简单的有点不习惯,美化修饰一下其实效果更好.实际上应该为点击过的TAB添加一个背景色,区分一下,这样比较好. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-easy-tab-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C