前几天闲着没事，想着编写一个 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. C++中的类访问控制

    C++中 public,protected, private 访问标号小结 第一:private, public, protected 访问标号的访问范围. private:只能由1.该类中的函数.2 ...

  2. js、jQuery操作input大全 不断完善

    工作中经常用到的,不断更新中... jquery获取单选按钮的值:$("input[name='stageName']:checked").val(); 删除select某几个op ...

  3. Linux下用来获取各种系统信息的C++类

    #include <vector> #include "sys/config.h" SYS_NAMESPACE_BEGIN /*** * 用来获取系统.内核和进程的各类 ...

  4. (BUG已修改,最优化)安卓ListView异步加载网络图片与缓存软引用图片,线程池,只加载当前屏之说明

    原文:http://blog.csdn.net/java_jh/article/details/20068915 迟点出更新的.这个还有BUG.因为软引应不给力了.2.3之后 前几天的原文有一个线程管 ...

  5. 机器学习算法-K-means聚类

    引文: k均值算法是一种聚类算法.所谓聚类.他是一种无监督学习,将类似的对象归到同一个蔟中.蔟内的对象越类似,聚类的效果越好. 聚类和分类最大的不同在于.分类的目标事先已知.而聚类则不一样. 由于其产 ...

  6. PHP获取Cookie模拟登录CURL(转)

    要提取google搜索的部分数据,发现google对于软件抓取它的数据屏蔽的厉害,以前伪造下 USER-AGENT 就可以抓数据,但是现在却不行了.利用抓包数据发现,Google 判断了 cookie ...

  7. Linux环境高级编程--介绍

    从今天開始.将开启Linux环境高级编程(Advanced Programming Of Linux Enviroment)的学习笔记或者说总结,我将持续和大家分享自己的学习成果.本系列博客依托于li ...

  8. cocos2dx下最大纹理大小取决于平台

    原文:http://www.cocos2d-x.org/wiki/Max_size_of_textures_in_cocos2d-x_depends_on_each_platform 在理论上,coc ...

  9. [置顶] 第一天初试linux

    1).unix  linix  macos android 的区别 Unix是要收费的,而linix是一种开源免费的unix ,macos 和andorid又是linux的一种,macos闭源,仅仅是 ...

  10. Vivado学习笔记_002

    经过几天的试用逐渐熟悉了vivado,和ISE相比vivado确实有了很多改良. 发现了以下几个特点:   1.数据格式统一了 在以往的设计中,保存数据的格式非常多.ISE有很多种格式的文件,在tra ...