封装两个简单的jquery组件

Jquery给我们提供了很大的方便，我们把他堪称是一个公共库，以致在这个公共库上延伸出了很多jquery插件。

主要说两个项目用途：

（1）遮罩层，跟一般的遮罩层不一样，我需要实现的是对某一个元素进行局部遮罩；

（2）冒泡提示，网上有很多，我需要的只是一种在页面指定位置弹出来的一个静止定位的div而已。

/*产生随机数*/

 ; (function($){

      $.Random=function(under,over) {

             switch(arguments.length){

                    case 1  :  return parseInt(Math.random()*under+1);

                    case 2  :  return parseInt(Math.random()*(over-under+1)+under);

                     default  :    return  0;

              }

       }

})(jQuery);

1、我们一般在写一个公共方法时会在前面定义一个“ ; ”，在网上看到有人说这是书写习惯，其实这个是一种容错机制，有点sql中go的意思，就是把上面的代码跟自己的这个扩展插件给分开，因为插件是被引入到页面，如果这个插件上面有错误，且别人忘记以" ; "结尾，那么我们写的这个插件就会受到影响，所以加上开头的分号；

2、分号后面再定义一个匿名的函数，并且闭包，传入一个jquery参数进去，就完成一个jquery插件的基本定义；

;  (function  ($)  {

  })(jQuery);

3、插件的主体就是我们的功能处理块；一般我们使用jquery的时候，有两种情况

a、$.ajax(option);这是属于jquery本身提供的方法

b、$("").each(option);这是一种属于jquery对象提供的方法

我们上面的两个需求中，第一个需求是进行局部遮罩，就需要知道是遮罩那个页面元素了，显示就需要封装一个jquery对象方法；

先完成第一个需求

; (function ($) {

     $.fn.extend({

          loading:function(option,param){

         }

     });

})(jQuery);

因为我们是封装到对象上的方法，所以使用$.fn.extend(option)将我们的loading函数累加到$.fn上面，写完这些就可以在js中使用$('#div1').loading(option.param)进行调用了；

还有一个最重要的东西就是参数的合并，一个插件肯定是可以灵活配置的，当然我们也应该默认的提供一个看上去可以使用的页面参数；

在定义完$.fn.extend后，接着定义默认值：

$.fn.loading.defaults={

       loadingText: : "loading", / /加载时要显示的文字

           loadingHide:false ,  / / 原来的遮罩层是否需要隐藏

           opacity:0.6 ,   / / 透明度

           bgColor : "black" ,   / / 遮罩层的背景色

           fontColor : "#fff"   //遮罩层中的color 

}

默认值有了后，我们还需要将我们自定义的参数给传进来，比如我们的调用

$('#div4').loading({ loadingText: : "加载用户信息中，请稍候"});

Jquery给我们提供了一个方式用来合并相关参数

option=$.extend($.fn.loading.defaults,option);

这个option就是默认参数+我们传进来的自定义参数合并后的结果了；

其实这个比较简单，就是因为我们知道要遮罩的对象，然后进行创建一个div在需要被遮罩的div的上方就可以；

$this.position().top;可以得到传递进来的div距离浏览器上方的高度

$this.position().left;可以得到传进来的div距离浏览器左边的宽度

给遮罩层赋值，就是给offset(option)进行赋值。

$("#"+loadingId).offset(function(n,c) { 

        newPos=new Object();

        newPos.left=left;

        newPos.top=top;

        newPos.top=top;

   })

基本在此就已经封装完了整个插件；现在在遮罩层的基础上再加一个需求，比如在已经弹出的遮罩层的基础上再次改变遮罩层的相关属性，比如文字、颜色等；

我们用过一些jquery组件都会提供事件和方法

比如我们在使用jquery.easyui的时候，事件定义在option中，就可以在符合条件时触发

我们在option里面加入一个参数就可以做到

onLoadSuccess:null

//调用回调   / /在符合条件的时候回调一下即可

if (option.onLoadSuccess !=null) { 

        option.onLoadSuccess("这是参数");

}

方法的写法如下

loading : function (option,param) {

          var   $this=this;

          if(typeof option == 'string') {

                switch (option) { 

                       case    'setLoadingText':

                               return  this.each(function  ()  { 

                                             var   id=$this.attr("id");

                                             var  loadingId=id+"Loading";

                                              $("#"+loadingId+"span").html(param);

                                })

                }

          }

}

/ /调用

$("#div1").loading("setLoadingText","系统错误，请与管理员联系");

我刚开始以为要用到jquery里面的什么提供方式，其实很简单，判断下option是不是string，如果是就是方法的调用；我们使用jquery的时候，一定要将当前对象给each一下，因为我们有可能不止选择一个对象，而是多个；同样的冒泡提示也是如此，只是用$.tips=function(option,param)即可

下面贴出代码

; (function ($) {
    $.fn.extend({
        loading: function (option, param) {
            var $this = this;
            if (typeof option == 'string') {
                switch (option) {
                    case 'hide':
                        return this.each(function () {
                            var id = $this.attr("id");
                            var loadingId = id + "Loading";
                            $("#" + loadingId).hide().detach();
                            if ($("#" + id).css("display") == "none") {
                                $("#" + id).show();
                            }
                        });
                    case 'setLoadingText':
                        return this.each(function () {
                            var id = $this.attr("id");
                            var loadingId = id + "Loading";
                            $("#" + loadingId + "span").html(param);
                        });
                }
            }
 
            var setting = {
                loadingText: "loading",
                loadingHide: false,
                opacity: 0.6,
                bgColor: "black",
                fontColor: "#fff",
                onLoadSuccess:null
 
            }
 
            var top = $this.offset().top;
            var left = $this.offset().left;
            var height = $this.height();
            var width = $this.width();
 
            //合并参数
            option = $.extend($.fn.loading.defaults, option);
            var id = $this.attr("id");
            var loadingId = id + "Loading";
            var divHtml = "<div  id='" + loadingId
                + "' style='background-color:" + option.bgColor
                + ";opacity:" + option.opacity
                + ";display:none;text-align:center;position:absolute;color:" + option.fontColor
                + ";' data-isHide='false'><span id='" + loadingId
                + "span'>" + option.loadingText + "</span></div>";
            
            if ($("#" + loadingId).length > 0) {
                var isHide = $("#" + loadingId).attr("data-isHide");
                if (isHide) {   //如果是显示的话
                    return this;
                } else {
                    $("#" + loadingId).remove();
                }
            }
            //将loadingdiv插入页面中
            $this.before(divHtml);
 
            //计算居中的padding值
            var loadingHeight = $("#" + loadingId).height();
            var paddingTop = height / 2 - loadingHeight;
 
            //判断原来的div是不是要隐藏
            if (option.loadingHide) {
                $this.hide();
            }
            $("#" + loadingId).offset(function (n, c) {
                newPos = new Object();
                newPos.left = left;
                newPos.top = top;
                return newPos;
            }).height(height - paddingTop).width(width).show();
 
            //居中
            $("#" + loadingId).css("padding-top", paddingTop + "px");
 
            //调用回调
            if (option.onLoadSuccess != null) {
                option.onLoadSuccess("这是参数");
            }
        }
    });
})(jQuery);


遮罩层

效果图

冒泡提示

; (function ($) {
        $.Tips = function (option, param) {
            if (typeof(option) == 'string') {
                switch(option){
                    case "setText":
                        setText(param);
                        break;
                    case "setHtml":
                        setHtml(param);
                        break;
                    case "hideTips":
                        hideTips(param);
                        break;
                    case "hideTipsAll":
                        hideTipsAll();
                        break;
                }
                return;
            }
 
            function setText(param) {
                $("#" + param.id + "span").text(param.text);
            }
            function setHtml(param) {
                $("#" + param.id + "span").html(param.html);
            }
            function hideTips(param) {
                $("#" + param.id).remove();
            }
 
            function hideTipsAll() {
                $(".tips-MessTips").remove();
            }
 
            var setting = {
                id: 'auto',
                width: 300,
                height: 20,
                backgroundColor: "rgb(217, 237, 247)",
                left: 'auto',
                top: 20,
                tipMess: '正在加载中，请稍后',
                iconImg: '../Content/MyCustom/images/info16.png',
                time: 3
            }
            
            var documentWidth = $(document).width();
            var documentHeight = $(document).height();
            //合并参数
            option = $.extend(setting, option);
            
            if (option.left = 'auto') {
                var tipWidth = option.width;
                if (typeof (option.width) == "string") {
                    tipWidth = documentWidth *parseFloat(option.width)/100;
                }
                option.left = (documentWidth - tipWidth) / 2;
            } else if (typeof (option.left) == "string" && option.left.indexOf("%") > 0) {
                option.left = option.left * parseFloat(option.left) / 100;
            }
            if (typeof (option.top) == "string" && option.top.indexOf("%") > 0) {
                option.top = option.top * parseFloat(option.top) / 100;
            }
            if (typeof (option.width) == "string" && option.width.indexOf("%") > 0) {
                option.width = documentWidth * parseFloat(option.width) / 100;
            }
            if (typeof (option.height) == "string" && option.height.indexOf("%") > 0) {
                option.height = documentHeight * parseFloat(option.height) / 100;
            }
            
            if (option.id == 'auto') {
                option.id = 'tips' + $.Random(0, 999999999);
            }
 
            option.time = option.time * 1000;
 
 
            var htmlDiv = '<div class=" tips-MessTips" id="' + option.id
                        + '" '
                        + 'style="display:none;overflow:hidden;border-color:#bce8f1;color:#3a87ad;left: ' + option.left
                        + 'px; top: ' + option.top
                        + 'px; width: ' + option.width
                        + 'px; height: ' + option.height
                        + 'px; position: fixed; background-color:' + option.backgroundColor
                        + ';"><img src="' + option.iconImg
                        + '" /><span id="' + option.id
                        + 'span">' + option.tipMess
                        + '</span></div>'
 
            //如果已经存在的DIV
            if ($("#" + option.id).length > 0) {
                $("#" + option.id + "span").html(option.tipMess);
                return;
            }
 
            //如果还没有一个tip
            if ($(".tips-MessTips").length == 0) {
                $("body").append(htmlDiv);
            } else {
                $(".tips-MessTips").each(function () {
                    $(this).offset(function (n, c) {
                        newPos = new Object();
                        newPos.left = $(this).offset().left;
                        newPos.top = $(this).offset().top + option.height;
                        return newPos;
                    })
                });
 
                $(".tips-MessTips").first().before(htmlDiv);
            }
            if (option.time > 0) {
                setTimeout(
                    function () {
                        $("#" + option.id).remove();
                    }, option.time);
            }
 
            //显示当前的窗口
            return $("#" + option.id).show();
        };
 
    })(jQuery);


Tips

效果图