前几天闲着没事，想着编写一个 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. 新发现:原来java正则表达式不写^和$也可以运行

    最近用了好多正则表达式,都是循规蹈矩的在前面加上^在后面加上$ 像这个样子"^[.]\\S+$",但实际上我在eclipse和editplus下都试了一下,不加前缀和后缀也是可以的 ...

  2. Powerdesigner设置name与code不同时变化

    Tools-General Options-Dialog Name to Code mirroring去掉对勾

  3. http 2.0

    http2.0  待学习整理 http://www.zhihu.com/question/34074946

  4. tensorflow 实现线性方程

    下面的直接是代码: #!usr/bin/env python#coding:utf-8"""这个代码的作用是 通过 tensorflow 来计算 y = 0.3x + 0 ...

  5. Java字节转换类实现

    Java的类库支持完全不如C#,比如时间类,比如数据类型转换类等等,难道是我自己没找到吗? 下面是字节转换类,byte[]与short, int, long, float, double, Strin ...

  6. 剖析iphone之触摸事件touchstart

    今天做项目发现一个问题,貌似从前没有遇到过,就记录一下,以后方便看.....(代码只显示了js这部分 样式结构都会写) 一般我们绑定click触发事件都是直接用onclick 或者方便一点click, ...

  7. centos6.6 虚拟机集群搭建

    1.centosos6.6下载 windows 64位: thunder://QUFodHRwOi8vbGludXguemh1YW5neGl0b25nLmNvbTo4MDgvMjAxNTAxL0Nlb ...

  8. 2假动作，数据缓冲，CCEaseExponential,CCEaseElastic,CCEaseBounce,CCCallFunc,funcNCallBack,funcNDCallBack,funcO

     1 缓冲动作 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsize/4 ...

  9. 2016iweb峰会参会总结

    2016年8月27日去国家会议中心参加iweb峰会. 8点半开始签到入场,8点20分排队签到的人已经排到另一个门口,人超级多啊. 9点一如既往的由h5女神娜姐开场. 上午场 基本是各公司的大佬们介绍各 ...

  10. iOS NSDatePicker

    1.NSDate类 1>NSDate是系统一个日期,时间类 2>就是返回当前的日期,时间 3>+(id)date; 4>返回未来secs秒后的日期,时间 5>+(id)d ...