前几天闲着没事，想着编写一个 jQuery 插件，或许这将是一个美好的开始。

这里是html页面：

 <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta charset="GB2312" />

     <title>选项卡</title>

     <link href="css/tabs.css" rel="stylesheet" type="text/css"/>

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

     <script src="js/tabs.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             $("#mytabs").tabs();

         });

     </script>

 </head>

 <body>

     <div id="mytabs">

         <ul>

             <li><a href="#tabs1">选项1</a></li>

             <li><a href="#tabs2">选项2</a></li>

             <li><a href="#tabs3">选项3</a></li>

             <li><a href="#tabs4">选项4</a></li>

         </ul>

         <div id="tabs1">First</div>

         <div id="tabs2">Second</div>

         <div id="tabs3">Third</div>

         <div id="tabs4">Fourth</div>

     </div>

 </body>

 </html>

下面看面按照顺序给出引用的内容。

首先是样式文件css/tabs.css ：

 body {

     background-color: #EEE;

 }

 .tabsDiv {

     width: 500px;

     height: 350px;

     margin: 100px auto;

     border: 1px solid black;

     background-color: white;

 }

 .tabsDiv ul {

     width: 500px;

     height: 30px;

     list-style: none;

     margin: 0px;

     padding: 0px;

 }

 .tabsDiv li {

     width:25%;

     height:30px;

     line-height:30px;

 }

 .tabsDiv div {

     background-color: yellow;

     height:20px;

     width:60px;

     text-align: center;

     margin: 50px auto;

 }

 .tabsSeletedLi {

     background-color: white;

     float: left;

     text-align: center;

 }

 .tabsSeletedLi a {

     color: black;

     text-decoration: none;

     font-weight:bold;

 }

 .tabsSeletedLi a:hover {

     color: grey;

 }

 .tabsUnSeletedLi {

     background-color: black;

     float: left;

     text-align: center;

 }

 .tabsUnSeletedLi a {

     color: white;

     text-decoration: none;

     font-weight:bold;

 }

 .tabsUnSeletedLi a:hover {

     color: grey;

 }

需要引用的 js/jquery.min.js 是必不可少的，这里就不提供了，大家可以自己去下载。

接下来是自定义jQuery插件 js/tabs.js ：

 (function($) {

     $.fn.tabs =    function() {

         var    opts = {

             switchingMode: "mouseover"  // or "click"

         };

         var obj = $(this);

         var clickIndex = 0;

         obj.addClass("tabsDiv");

         $("ul li:first", obj).addClass("tabsSeletedLi");

         $("ul li", obj).not(":first").addClass("tabsUnSeletedLi");

         $("div", obj).not(":first").hide();

         $("ul li", obj).bind(opts.switchingMode,

         function() {

             if (clickIndex != $("ul li", obj).index($(this))) {

                 clickIndex = $("ul li", obj).index($(this));

                 $(".tabsSeletedLi", obj).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi");

                 $(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi");

                 var    divid = $("a", $(this)).attr("href").substr(1);

                 $("div", obj).hide();

                 $("#" + divid, obj).show();

             };

         });

     };

 })(jQuery);

这个插件的最大好处就是可以更改 tabs 的切换方式，试着把 switchingMode: "mouseover" 改成 switchingMode: "click" 然后看看有什么效果？

使用自定义 jQuery 插件的一个选项卡Demo的更多相关文章

  1. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  2. 自定义jQuery插件Step by Step

    1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于 Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是Responsive Desig ...

  3. 【jQuery基础学习】08 编写自定义jQuery插件

    目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...

  4. 1.ssm web项目中的遇到的坑--自定义JQuery插件（slide menu）

    自定义的JQuery插件写的回调函数不执行: 写好了回调函数,将函数打印出来是原形,就是不执行 function () { console.log("---onClickItem---&qu ...

  5. 自定义Jquery插件——由于项目需要，对页面中过长的文本进行截取，鼠标移上去有一个title的提示，所以做了一个Jquery过长文本处理的插件

    由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件下面是代码: // 掉用方式支持 $('select').textBeauty(1 ...

  6. jQuery插件学习之选项卡Tab

    在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel ta ...

  7. 自定义JQuery插件之 beforeFocus

    <html> <head> <title></title> <script type="text/javascript" sr ...

  8. 自定义jquery插件

    参考:http://blog.csdn.net/bao19901210/article/details/21540137/ 自己看代码理解: <!DOCTYPE html> <htm ...

  9. 快速创建jquery插件

    介绍 什么是插件? 插件我们见得很多了,比如浏览器上我们会安装一些去除广告的插件.美化页面的插件等等. 在前端,我们也常常写一些jquery插件来使用.来添加我们常常写的一些功能,方便使用. 为什么要 ...

随机推荐

  1. MySQL安装配置，命令，异常纪要

    一.Mac上的安装配置      // brew安装      brew install mysql      // 设置为开机启动      brew services start mysql    ...

  2. .net如何自定义config配置文件节点

    本文转载:http://www.cnblogs.com/lori/archive/2013/04/03/2997617.html 对于小型项目来说,配置信息可以通过appSettings进行配置,而如 ...

  3. java和c#md5加密不同

    java的mad5加密后为32位字符串,c#直接加密后可能不是32位,位数也不确定. 普通的写法 public static string Md5(string sourcein) { var md5 ...

  4. TRUNCATE TABLE 与 DELETE table 区别

    语法 TRUNCATE TABLE name;参数  TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行. TRUNCATE TABLE ...

  5. Storm 中遇到的问题

    问题1.  在storm.yaml 中配置了4个slot,而在Storm UI上面看到了8个slot 解决:Storm.yaml 中配置错误,正确配置如下,- 和 6700 之间是有空格存在的,而在我 ...

  6. 玩转ButterKnife注入框架

    在去年这个时候,我写过一篇介绍Android注解的文章android注解使用详解,这篇文章主要是介绍了Android中的AndroidAnnotations注入框架,AA框架有它自身的一些优点,这里不 ...

  7. base查找方法的实现JAVA

    import java.util.List; import java.util.ArrayList; import java.util.Scanner; /*在一个有序数组中查找一个数的过程,模拟二分 ...

  8. Android开发的第一天

    不管做什么开发都是有开始的,对于开发的话开始要的准备的就是开发工具了  安装开发工具配置开发工具好了不多说了现在我来说怎么样安装和配置安卓的开发工具吧 第一首先就是要下载一个JDK (Java SE ...

  9. ModelAndView使用方法

    配置支持ModelAndView 在application.xml中配置支持ModelAndView,配置方式有两种. 配置一 <bean id="ViewResolver" ...

  10. JAVA锁的可重入性

    机制:每个锁都关联一个请求计数器和一个占有他的线程,当请求计数器为0时,这个锁可以被认为是unhled的,当一个线程请求一个unheld的锁时,JVM记录锁的拥有者,并把锁的请求计数加1,如果同一个线 ...