前几天闲着没事，想着编写一个 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. golang中赋值string到array

    要把一个string赋值给一个array,哥哥遇到一个纠结的困难,研究一番,发现主要原因是array和slice在golang里不是一个东西,本文提供两种解决方案. 在网络编程中network pac ...

  2. 学习Visitor Pattern 有感而发！override and overload

    通过阅读各位前辈写的博文,像吕震宇,idior,李建忠WebCast等,对Visitor模式有一定的了解,有感而记录下来,以备忘. Visitor Pattern 假设了这样一个场景,在一个类型层次中 ...

  3. 遇到Class Not registered的COM异常怎么办

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:遇到Class Not registered的COM异常怎么办.

  4. Redis集群战法整理

    单机及集群搭建 http://www.codeceo.com/article/distributed-caching-redis-server.html 主从复制设置 Redis服务器复制(主—从配置 ...

  5. wxPython 对话框关闭后进程无法退出的原因

    wxPython中不要用对话框作为主程序wx.Dialog,这会导致程序关闭后进程无法退出.一种可行的做法是用wx.Frame代替

  6. Hyper-V虚机跨NUMA节点性能影响

    查看单个NUMA节点的内存大小: Hyper-V VM VID NUMA节点\PageCount:83769708376970*4k/1024/1024=32GB Hyper-V VM VID NUM ...

  7. &lt;ASP.NET4 从入门到精通&gt;学习笔记3

    第三部分,状态管理与缓存 何为状态管理.起始对于web而言.经过前面章节的解说.已经理解,对于web程序,就是一个无状态的程序.每次的请求与每次的响应,两者之间本身就是独立存在的,这一点对于早期的静态 ...

  8. Ubuntu下配置tftp服务

    Ubuntu下配置tftp服务 1.安装TFTP软件 sudo apt-get install tftp-hpa tftpd-hpa tftp-hpa是客户端,tftpd-hpa是服务器端 2.建立t ...

  9. Java基础知识强化之IO流笔记51：IO流练习之 键盘录入学生信息按照总分排序写入文本文件中的案例

    1.  键盘录入学生信息(姓名,语文成绩,数学成绩,英语成绩),按照总分排序写入文本文件中 分析:   A:创建学生类   B:创建集合对象      TreeSet<Student>   ...

  10. nodejs创建ejs工程

    <Node.js开发指南>创建ejs项目的命令为: express -t ejs microblog.执行后,创建的是jade项目.在express3.x,express4.x中创建ejs ...