jQuery插件开发

来源：互联网发布：java学生管理系统项目编辑：程序博客网时间：2024/06/06 02:18

jQuery开发分为两种：

1 类级别

类级别你可以理解为拓展jquery类，最明显的例子是$.ajax(...),相当于静态方法。

开发扩展其方法时使用$.extend方法，即jQuery.extend(object);

2 对象级别

对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。

开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);

下面有两个例子：

1 类级别：

showMsg.js

$.extend({
       showMsg:function(name)
     {
            alert("欢迎您"+name);
      }
});

testMsg.html

<head>
<title>xy插件使用</title>
<script type="text/javascript" language="javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/showMsg.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
   $.showMsg("xy");
  });
</script>
</head>
<body></body>

2 对象级别

xuyueTableUI.js

/*
* xytableUI 0.1
* Copyright (c) 2009 xy http://blog.csdn.net/woshixuye
* Date: 2012-02-18
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示
*/
(function($){
$.fn.extend({
        xyTableUI:function(options){
             var defaults = {
             evenRowClass:"evenRow",
             oddRowClass:"oddRow",
             mouseoverRowClass:"mouseoverRow"
             }
             var options = $.extend(defaults,options);
             return this.each(function(){
                       var thisTable=$(this);
                       // 添加奇偶行颜色
                       thisTable.find("tr:even").addClass(options.evenRowClass);
                       thisTable.find("tr:odd").addClass(options.oddRowClass);
                       // 添加活动行颜色
                       thisTable.find("tr").mouseover(function(){
                             $(this).addClass(options.mouseoverRowClass);
                       })
                       thisTable.find("tr").bind("mouseout",function(){
                             $(this).removeClass(options.mouseoverRowClass);
                       });
            });
        }
});
})(jQuery);

/*
(function($){
       $.fn.extend({
              yourname:function(options){
                        var defaults = {
                               //各种属性、参数
                         }
                         //合并多个对象为一个。如果你在调用的时候写了新的参数，就用你新的参数。
                         //如果没有写，就用默认的参数。
                         var options = $.extend(defaults,options);
                         return this.each(function(){
                                //插件实现代码
                         });
              }
      });
})(jQuery);

xyTableUI.css

/*odd行样式*/
.oddRow
{
background-color: lightblue;
}

/*even行样式*/
.evenRow {
background-color: yellow;
}

/*鼠标划过样式*/
.mouseoverRow
{
background-color: red;
}

/*测试带参数使用时样式*/
.testRow
{
background-color: pink;
}

table
{
width:50%;
border:1px solid black;
border-collapse:collapse;
}

td
{
border:1px solid black;
}

html

<head>
<title>xy表格Jquery插件使用</title>
<link rel="stylesheet" type="text/css" href="css/xyTableUI.css" />
<script type="text/javascript" language="javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="scripts/xuyueTableUI.js"></script>
<script type="text/javascript">
  $(document).ready(function(){

   // 不带参数使用插件
   //$(".xyTableUI").xyTableUI();

   // 带参数使用插件
   $(".xyTableUI").xyTableUI({mouseoverRowClass:"testRow"});

});
</script>
</head>
<body>

<table class="xyTableUI">
<tr>
  <td align="right">
   aaa
  </td>
...............................................................

</table>
</body>

参考博客：http://developer.51cto.com/art/201108/286391.htm

http://www.jb51.net/article/22849.htm