前几天闲着没事，想着编写一个 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. 8-15-Exercise

    8-15-小练 这次的题目......只觉得泪奔啊......T T A.HDU 1042   N! 因为0<=n<=1000,故一定要用数组或字符串[同样因为n<=1000故用数组 ...

  2. js基础一

    1.声明提升:变量的声明提升,函数的声明提升,但函数赋值表达式不会提升: foo(); // 正常运行,因为foo在代码运行前已经被创建 function foo() {} foo(); // 出错: ...

  3. var_dump() 打印数组不完整 解决办法

    我们用var_dump() 打印数组, 一般会出现这种情况, 就是打印出来的数组不完整 ,会有省略号. 解决方法: 在php.ini里的xdebug节点中,加入如下 xdebug.var_displa ...

  4. JAVA基础入门

    Java入门基础 1.IDE->Eclipse 新建程序步骤 1.创建一个Java项目 2.创建一个包(package) 也就相当于C#中的命名空间C++中的头文件 3.创建一个类 这样就完成了 ...

  5. Javascript 基础知识笔记

    标签(空格分隔): 廖老师学习笔记 javascript 基本入门 根据廖雪峰老师官网,自己看后的简单笔记 第一小节 基本知识 <script type="text/javascrip ...

  6. Shell脚本编程的常识

    (这些往往是经常用到,但是各种网络上的材料都语焉不详的东西,个人认为比较有用) 七种文件类型 d            目录                                       ...

  7. 用来理解 Java 编程语言的 8 个图表

    原文地址: http://www.oschina.net/news/44438/top-8-diagrams-for-understanding-java 很多时候,一张图比你说 1000 个字能更有 ...

  8. [转载](iPhone开发)Bundle Display Name 改为中文。ap

    原文地址:(iPhone开发)Bundle Display Name 改为中文.app显示为中文作者:小新 要先在info的Localizations加入Chinese(zh-Hant) 再進到inf ...

  9. IOS Label 自动换行 IOS6和IOS7

    IOS 6和ios7 不一样,所以,我们分开来: IOS6: //计算实际frame大小,并将label的frame变成实际大小     CGSize size01 = [ssizeWithFont: ...

  10. Matplot中文乱码完美解决方式

    一.改动matplotlibrc文件 (永久解决方式) 1. 定位matplotlibrc文件 该文件位于[python_install_dir]\Lib\site-packages\matplotl ...