您的位置：首页 > Web前端 > JQuery

jQuery自定义插件开发基础1——jQuery实用函数的实现 .

2014-02-19 10:14 731 查看

2014-02-19 10:14
7人阅读评论(0)
收藏
举报

9Tech·HTML5开发交流群：53156466
jQuery中已经存在很多常用的工具函数，使用这些函数能够在开发中帮助我们解决很多常见的问题，从而提高开发效率，比如常用的有：$.ajax使用ajax调用，$.each用于遍历对象和数组，$.grep用于过滤数组，$.map对于一个数组进行一定程度转换后返回转换后的数组，等等一系列的方法；但是有时候由于业务的需要，我们可能需要在项目中多次使用一些函数，在这种情况下，可以把这些函数封装成jQuery的实用函数，以方便调用和重用。以下介绍如何通过jQuery提供的插件机制来扩展我们自己的实用函数。

-、通过jQuery提供的扩展功能来实现一个jQuery的实用函数
jQuery的实用函数相等于java中的静态方法，直接定义在jQuery上，下面以实现一个简单的弹出一个“hello world!”的提示框来说明这一点。

(function($){

  $.helloworld = function(){

   alert("Hello World!");

  }

})(jQuery);

复制代码
这就定义了一个名为helloworld的jQuery实用函数，通过$.helloworld()就可以调用。
1、这里使用了一个javaScript的匿名函数，并把jQuery对象当作参数传递给形参$，并执行这个函数。这样做的好处是，当程序里使用了除jQuery外,还有另外的js类库，并且也使用了$,那么$就会产生冲突，jQuery提供了jQuery.noConflict()来释放对$的控制权，交由其他类库使用。这里使用匿名函数的方式就能够避免这种冲突问题，并能在函数内部使用$来操作，这时的$只是一个局部变量，不会影响到其他类库的使用。

2、$.helloworld函数才是我们要实现的jQuery实用函数，放在匿名函数的函数体里去实现，如果没有使用其他类库，放在外面也是可以的，但是为了程序后期的扩展，也许会引用其他类库，最好的方式是放在匿名函数内部去实现，这也是官方所推荐的方式。
以下为在html中调用的部分代码：

<script type="text/javascript">

// 页面加载完则弹出helloworld对话框

$(function(){

      $.helloworld();

});

</script>

复制代码
二、给jquery实用函数传递参数

先来写一个例子，求两数的最大值:

(function($){

$.maxFromTwonum = function(num1, num2)  {

   return num1 > num2 ? num1 : num2;

}

})(jQuery);

复制代码
这个实用函数再调用时需要传递2个数值，使用$.maxFromTwonum(12, 28);则返回28。这个例子也很简单，在项目开发中往往会遇到一些复杂的功能，需要抽取出来封装成组件来提供给项目各处调用，这时往往需传递大量的参数，有些可能是必须的参数，有些可能是可选的，这种情况则不能使用以上方式直接在形参列表中列出参数。一种好的方式，也是推荐的方式是使用带有key-value对的散列对象，key为参数的名，value为参数的值。以下给出具体的使用方式。

(function(){

// n1为必须传递的参数，因此可单独放在外面

// options则为可选参数，按照需求来传递相应的参数

$.complexParam = function(n1, options){

      // 可为参数设定一些初始值

      var settings = {

            p1 : value1,

            p2 : value2,

            p3 : value3,

            p4 : value4,

            …………

      };

      //通过$.extend来合并传递的参数到settings上,并覆盖相应的初始值

      settings = $.extend(settings, options);



   // 在这里实现相应的业务逻辑代码……

}

})(jQuery);

复制代码

三、利用jQuery扩展实用函数的方式来实现一个小例子
在通常的网页应用中，免不了要有一些提示框，警告框之类的，但是浏览器自带的弹出框并不美观，很多网页用css和js脚本实现了属于自己的提示框。以下就给出一个简易的弹出提示框效果，可以在此基础上进一步优化，实现一个通用的组件。

1、js代码：jquery.dialog_self.js

(function(){

/**

* 实现一个自定义的弹出对话框。

* 参数：title, 对话框标题

*    message,对话框需要显示的信息，

*    divId,指定一个div的id标识，以此div做为对话框的内容

*    dialogtype, 对话框的类型：提示、警告、询问等，

*    isOper, 是否背景可操作

*/

$.dialogSelf = function(options){

   // 为插件提供默认值

   var setting = {

      title: "对话框",

         message : "hello world!",

   dialogtype : "提示",

   isOper : true

   };

   // 调用时传入的参数将覆盖默认的值

   setting = $.extend(setting, options);



   var $ele = $.dialogSelf.dialogPosition($.dialogSelf.creatDialog(setting));

   $("body").append($ele);

};



// 构建对话框

$.dialogSelf.creatDialog = function(setting){

   return $("<div/>").addClass("ui-my-dialog")

      .append($.dialogSelf.creatDialogTitle(setting))

      .append($.dialogSelf.createDialogContent(setting))

      .append($.dialogSelf.createDialogFooter(setting));

}

// 构建对话框标题栏

$.dialogSelf.creatDialogTitle = function(setting) {

   var close = $("<a>\xd7</a>").click(function(){

   $.dialogSelf.dialogClose();

   });

   return $("<div/>").addClass("ui-my-title")

      .append("<span>"+setting.title+"</span>")

      .append(close);

}

// 构建对话框内容

$.dialogSelf.createDialogContent = function(setting) {

      return $("<div/>").addClass("ui-my-content")

         .append("<span>"+setting.dialogtype+": </span>")

         .append("<span>"+setting.message+"</span>");

}

// 构建对话框的footer

$.dialogSelf.createDialogFooter = function(setting) {

   var comfire = $("<a>确定</a>").click(function(){

   $.dialogSelf.dialogClose();

   });

      return $("<div/>").addClass("ui-my-footer")

         .append(comfire);

}

// 对话框的位置窗口居中

$.dialogSelf.dialogPosition = function($ele) {

   var winWidth = $(window).width();

   var winHeight = $(window).height();



   var width = $ele.outerWidth();

   var height = $ele.outerHeight();



   var posH = (winHeight - height)/2 + $(document).scrollTop();

   var posW = (winWidth - width)/2;



   $ele.css({

   position : "absolute",

   "z-index" : "100",

   top : posH + "px",

         left: posW + "px"

   });

   return $ele;

}



// 关闭对话框

$.dialogSelf.dialogClose = function() {

$(".ui-my-dialog").remove();

}

})(jQuery);

复制代码

2、css代码：jquery.dialog_self.css

.ui-my-dialog {

border:3px solid #ff32a1;

background: #ffe;

width:400px;

height:250px;

}

.ui-my-title {

height:10%;

background: #70adcd;

color: #FFFFEE;

font-weight:bold;

padding :8px;

}

.ui-my-title a {

border:none;

display:inline-block;

float:right;

cursor: pointer;

}

.ui-my-content {

height:63%;

padding:5px;

}

.ui-my-content span{

display:block;

}

.ui-my-footer {

height:10%;

background:#c8d5e2;

padding :8px;

}

.ui-my-footer a {

border:none;

display:block;

width:50px;

height:22px;

color:#fdfdfd;

float:right;

text-align:center;

background:#3e78fd;

cursor: pointer;

}

复制代码
在html页面导入js和css 文件，就可以使用这个插件了。具体的测试代码可以参照附件！

原文http://tangyuntao-2008.iteye.com/blog/1850853

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航