Chinaunix首页 | 论坛 | 博客

Web world

首页　| 　博文目录　| 　关于我

cici0208

  • 博客访问： 485547
  • 博文数量： 226
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2111
  • 用 户 组： 普通用户
  • 注册时间： 2014-06-20 09:02
个人简介

web web web

文章分类

全部博文（226）

文章存档

2020年（2）

2019年（1）

2018年（3）

2017年（26）

2016年（57）

2015年（60）

2014年（77）

我的朋友
最近访客
推荐博文
相关博文
写jQuery插件

分类： Web开发

2017-05-10 14:20:48

通用的框架

  1. (function($){
  2. $.fn.yourName = function(options){
  3. //各种属性、参数
  4. }
  5. var options = $.extend(defaults, options);
  6. this.each(function(){
  7. //插件实现代码
  8. });
  9. };
  10. })(jQuery);


index.html
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js插件</title>
  6.     <style>
  7.     table{
  8.         border: 1px solid #000;
  9.     }
  10.     table td{
  11.         border: 1px solid #000;
  12.         width: 50px;
  13.         height: 30px;
  14.     }
  15.     .evenRow{
  16.         background: red;
  17.     }
  18.     .oddRow{
  19.         background: blue;
  20.     }
  21.     .activeRow{
  22.         background: yellow;
  23.     }
  24.     </style>
  25.     <script src="./jquery.js"></script>
  26.     <script src="./tableUi.js"></script>
  27. </head>
  28. <body>
  29.     <table id="tbl">
  30.         <tr>
  31.             <td>11</td>
  32.             <td>11</td>
  33.             <td>11</td>
  34.             <td>11</td>
  35.             <td>11</td>
  36.         </tr>
  37.         <tr>
  38.             <td>22</td>
  39.             <td>22</td>
  40.             <td>22</td>
  41.             <td>22</td>
  42.             <td>22</td>
  43.         </tr>
  44.         <tr>
  45.             <td>33</td>
  46.             <td>33</td>
  47.             <td>33</td>
  48.             <td>33</td>
  49.             <td>33</td>
  50.         </tr>
  51.     </table>
  52.     <script>
  53.     $(function(){
  54.         $("#tbl").tableUi();
  55.     })    
  56.     </script>
  57. </body>
  58. </html>
tableUi.js

  1. ;
  2. (function(){
  3.     $.fn.tableUi = function(options){
  4.         "use strict";
  5.         var defaults = {
  6.             evenRowClass:"evenRow",
  7.             oddRowClass:"oddRow",
  8.             activeClass:"activeRow"
  9.         }

  11.         var settings = $.extend(defaults,options);
  12.         this.each(function(){
  13.             var thisTable = $(this);
  14.             thisTable.find("tr:even").addClass(settings.evenRowClass);
  15.             thisTable.find("tr:odd").addClass(settings.oddRowClass);

  17.             thisTable.find("tr").bind("mouseover",function(){
  18.                 $(this).addClass(settings.activeClass);
  19.             })

  21.             thisTable.find("tr").bind("mouseout",function(){
  22.                 $(this).removeClass(settings.activeClass);
  23.             })
  24.         })

  26.     }
  27. })(jQuery);


阅读(444) | 评论(0) | 转发(0) |
0

上一篇：怎样写一个js插件

下一篇：理解jQuery的noConflict() 方法

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6