jquery ui 带有Tabs切换插件，但其css样式太难维护，引用的东西太多，因此就自己写了个。

起初我Html代码架子是这样的：

<div class="tabs">

<ul>

<li class="acss" data-box="#panel-1">标签1</li>

<li class="bcss" data-box="#panel-2">标签2</li>

<li class="bcss" data-box="#panel-3">标签3</li>

</ul>

<div id="panel-1">内容111111</div>

<div id="panel-2" style="display:none;">内容222222</div>

<div id="panel-3" style="display:none;">内容333333</div>

</div>

后来换成了下面这个：

<dl class="tabs">

<dt>

<a class="acss" href="#panel-1">标签1</a>

<a class="bcss" href="#panel-2">标签2</a>

<a class="bcss" href="#panel-3">标签3</a>

</dt>

<dd  id="panel-1">内容1</dd>

<dd  id="panel-2" style="display:none;">内容2</dd>

<dd  id="panel-3" style="display:none;">内容3</dd>

</dl>

之所以换成这个，是因为我觉得 dl dt dd 在页面布局中用的比 div ul li 要少，这样可以做到更好的隔离性。我们用js操作dl dt dd 对象，就会更少的影响到页面内其它元素

还有就是不用在li标签中自定义data-box属性，更符合页面书写标准。而且这个结构的整体感觉也比上面那个好。

插件的实现代码如下：

(function ($) {

$.fn.Tabs = function (options) {

//默认参数设置

var settings = {

beforeCss: "bcss", //激活前样式名

afterCss: "acss",  //激活后样式名

model: "mouseover" //切换方式("mouseover"或者"click")

};

//不为空，则合并参数

if (options)

$.extend(settings, options);

//获取a标签集合

var arr_a = $("> dt > a", this);

//给a标签分别绑定事件

arr_a.each(function () {

$(this).bind(settings.model, function (event) {
　　　　　　　　　　　　　　//去除a标签的锚点跳转
                　　　　 event.preventDefault();

//样式控制

$(this).removeClass().addClass(settings.afterCss)

.siblings("a").removeClass().addClass(settings.beforeCss);

//隐藏与显示控制

var dd_id = $(this).attr("href");

$(dd_id).show().siblings("dd").hide();

});

});

//遵循链式原则

return this.each(function () { });

};

})(jQuery);

之所以说是轻量级，是因为代码量真的很少，也很简单。加了注释相信大家都可以看懂。当然，如果你有更简单的，那就分享吧>-<

里面settings中的model是用来控制切换方式的：

当为"click"时，点击实现切换；

当为"mouseover"时，鼠标滑入实现切换。

开始时是想用hover来实现鼠标滑入切换的，结果发现，hover不支持bind绑定。因为hover是jquery通过封装 mouseover事件 的产物，它并不是一个

正宗的事件，因此无法绑定。

下面给出个DEMO：

<!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">

<head>

<title></title>

<style type="text/css">

*

{

margin: 0;

padding: 0;

}

.tabs

{

width: 504px;

margin: 50px auto;

}

.acss,.bcss

{

text-decoration:none;

line-height: 35px;

font-size: 14px;

padding:8px 15px;

}

.bcss

{

background-color: #D4D4D4;

border-bottom:1px solid white;

}

.acss

{

background-color: orange;

border-bottom:1px solid orange;

}

.tabs dd

{

width: 500px;

height: 300px;

border: 1px solid orange;

text-align: center;

line-height: 300px;

}

</style>

</head>

<body>

<dl class="tabs" id="tabs1">

<dt>

<a class="acss" href="#panel-1">标签1</a>

<a class="bcss" href="#panel-2">标签2</a>

<a class="bcss" href="#panel-3">标签3</a>

</dt>

<dd  id="panel-1"><h1>鼠标滑入切换</h1></dd>

<dd  id="panel-2" style="display:none;">内容2</dd>

<dd  id="panel-3" style="display:none;">内容3</dd>

</dl>

<dl class="tabs" id="tabs2">

<dt>

<a class="acss" href="#panel-4">标签1</a><!--默认第一个激活-->

<a class="bcss" href="#panel-5">标签2</a>

<a class="bcss" href="#panel-6">标签3</a>

</dt>

<dd  id="panel-4"><h1>鼠标点击切换</h1></dd><!--默认第一个显示-->

<dd  id="panel-5" style="display:none;">内容2</dd>

<dd  id="panel-6" style="display:none;">内容3</dd>

</dl>

<script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>

<script src="../js/jquery.similar.Tabs.js" type="text/javascript"></script>

<script type="text/javascript">

$("#tabs1").Tabs(); //默认鼠标滑入切换

$("#tabs2").Tabs({model:"click"}); //设置为点击切换

</script>

</body>

</html>

自己编写jQuery插件之Tab切换的更多相关文章

  1. 封装jQuery插件实现TAB切换

    先上效果图: 直接上代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. 编写jQuery插件--实现返回顶部插件

    国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...

  3. 编写jQuery插件（一）——插件约定及插件中的闭包

    编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护. 在编写jQuery插件的时候,我们一般会遵循一些约定: jQuery插件推荐命名为:jque ...

  4. 自己编写jQuery插件之表单验证

    自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...

  5. 编写jQuery插件的方法和注意点

    编写jQuery插件的方法和注意点 插件的种类 jQuery的插件主要分为3种类型. 1. 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的 ...

  6. 如何编写JQuery 插件详解

    转载自:http://blog.sina.com.cn/s/blog_6154bf970101jam7.html 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jq ...

  7. 如何用正确的姿势编写jQuery插件

    在园子里有很多关于jQuery插件的文章,尤其 以下2篇文章: 不定义JQuery插件,不要说会JQuery jQuery插件开发精品教程,让你的jQuery提升一个台阶 这2位大神基础讲的很清楚,在 ...

  8. 如何编写jQuery插件

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  9. 编写jQuery 插件

    编写jQuery Plugin,要设置默认值,并允许用户修改默认值,或者运行是传入其他值. 最终,我们得出编写一个jQuery插件的原则: 给$.fn绑定函数,实现插件的代码逻辑: 插件函数最后要 r ...

随机推荐

  1. Spring 设计模式之责任链模式

    [应用] 以下是一段代码,Spring MVC 的 diapatcherServlet 的 doDispatch 方法中,获取与请求匹配的处理器(HandlerExecutionChain) getH ...

  2. 将 MathType 公式转换为 Word 自带公式

    以下操作是基于Office 365以及MathType 6.9b平台.有网友留言说第四步没出现「转换为 Office Math」选项,这个我就不清楚了,难道是只有Office 365才支持? 打开Ma ...

  3. Oracle数据库——用户（USER）

    前言   本文将介绍小白入门级别的关于用户的SQL语句.想全面了解的请参考其他资料.例如:Oracle官方文档--CREATE USER 文章目录 前言 创建用户 修改用户密码 授予用户权限 删除用户 ...

  4. 网络模式: host-only & NAT & 桥接

    基本上,Host-only相当于虚拟机和宿主机通过交叉线相连:NAT,宿主机相当于虚拟机的路由器:桥接,相当于把宿主机和虚拟机同时接到交换机上,然后交换机接到外网. 连接性上说,可参考下表: 连接 宿 ...

  5. SAS学习笔记39 MINOPERATOR | NOMINOPERATOR

    MINOPERATOR(可理解为Macro IN Operator的简写,帮助大家记忆)系统选项用于控制是否在宏程序中是否可以用IN操作符或#操作符,默认值为NOMINOPERATOR.需要注意的是, ...

  6. AtCoder练习

    1. 3721 Smuggling Marbles 大意: 给定$n+1$节点树, $0$为根节点, 初始在一些节点放一个石子, 然后按顺序进行如下操作. 若$0$节点有石子, 则移入盒子 所有石子移 ...

  7. 怎样给回调函数绑定this

    在三种绑定this的方法中, Function.prototype.call() 和 Function.prototye.apply() 都是会立即执行该函数的, 但回调函数是不能立即执行的, 它只是 ...

  8. 音视频入门-04-BMP图像四字节对齐的问题

    * 音视频入门文章目录 * BMP 图像四字节对齐 表示 BMP 位图中像素的位元是以行为单位对齐存储的,每一行的大小都向上取整为4字节(32 位 DWORD)的倍数.如果图像的高度大于 1,多个经过 ...

  9. MH-P虚拟机DSR中安装SQL2008

    双击下载好的安装文件setup.exe.(注意:安装之前请确认是否有安装SQL Server 2008 R2需要的.NET Framework 3.5 SP1,我的环境由于之前有配置安装过,在这里不具 ...

  10. DRF 01

    目录 DRF 接口 概念 YApi接口文档 Postman接口测试 RESTful接口规范 URL设计 响应结果 响应状态码 数据状态码 数据状态信息 数据本身 五大请求方式 简单实现 DRF drf ...