luluping

很多朋友都在跃跃欲试 打算打造自己的jquery插件，
我是 烦透了了jquery ui的dialog插件，所以突发奇想 自己写一个。先申明 就是随便这么一写，太多的还没有完善，之所以贴出来就是给大家一个参考。

下面大家跟我一起打造一个jquery  dialog插件

首先创建一个插件

$.fn.dialog=function(){

}

下面我们首先考虑 当您要现实的信息弹出来的时候，文档上面有一个遮罩层是必需的

那我们来编写一个遮罩层
$.fn.dialog=function(){

  this.MaskDiv=function()
       {
      
       var wnd = $(window), doc = $(document);
       //alert(doc.height());
       if(wnd.height() > doc.height()){  //当高度少于一屏
        wHeight = wnd.height(); 
       }else{//当高度大于一屏
        wHeight = doc.height();  
       }
       //创建遮罩背景
       $("body").append("<div ID=MaskID></div>");
       $("body").find("#MaskID").width(wnd.width()).height(wHeight)
       .css({position:"absolute",top:"0px",left:"0px",background:"#ccc",filter:"Alpha(opacity=90);",opacity:"0.3",zIndex:"10000"});
       }

}

注：这个遮罩函数 也不怎么复杂，这里我就不过多的讲解了，有不懂的加群 来问

遮罩做好以后 我们就需要来写 信息提示显示的位置了，下面我们在写一个 显示位置的函数。

$.fn.dialog=function(){

  this.MaskDiv=function()
       {
      
       var wnd = $(window), doc = $(document);
       //alert(doc.height());
       if(wnd.height() > doc.height()){  //当高度少于一屏
        wHeight = wnd.height(); 
       }else{//当高度大于一屏
        wHeight = doc.height();  
       }
       //创建遮罩背景
       $("body").append("<div ID=MaskID></div>");
       $("body").find("#MaskID").width(wnd.width()).height(wHeight)
       .css({position:"absolute",top:"0px",left:"0px",background:"#ccc",filter:"Alpha(opacity=90);",opacity:"0.3",zIndex:"10000"});
       }
  this.sPosition=function(obj)
       {
      var MyDiv_w = parseInt(obj.width());
      var MyDiv_h = parseInt(obj.height());
     
      var width =parseInt($(document).width());
      var height = parseInt($(window).height());
      var left = parseInt($(document).scrollLeft());
      var top = parseInt($(document).scrollTop());

      var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //计算上边距
      var Div_leftposition = left + (width / 2) - (MyDiv_w / 2); //计算左边距
      return Array(Div_topposition,Div_leftposition);
       }

}

我们这里主要是让信息显示在中间

完整代码： $.fn.dialog=function(){   this.MaskDiv=function()        {               var wnd = $(window), doc = $(document);        //alert(doc.height());        if(wnd.height() > doc.height()){  //当高度少于一屏         wHeight = wnd.height();         }else{//当高度大于一屏         wHeight = doc.height();          }        //创建遮罩背景        $("body").append("<div ID=MaskID></div>");        $("body").find("#MaskID").width(wnd.width()).height(wHeight)        .css({position:"absolute",top:"0px",left:"0px",background:"#ccc",filter:"Alpha(opacity=90);",opacity:"0.3",zIndex:"10000"});        }   this.sPosition=function(obj)        {       var MyDiv_w = parseInt(obj.width());       var MyDiv_h = parseInt(obj.height());             var width =parseInt($(document).width());       var height = parseInt($(window).height());       var left = parseInt($(document).scrollLeft());       var top = parseInt($(document).scrollTop());       var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //计算上边距       var Div_leftposition = left + (width / 2) - (MyDiv_w / 2); //计算左边距       return Array(Div_topposition,Div_leftposition);        }      this.MaskDiv();         $("body").append("<div ID=DivDialog style='display:none'><ul><li>提示</li></ul></div>");   var obj=$("body").find("#DivDialog");   obj.width("200px").height("200px");   PosT=this.sPosition(obj);         obj.css({position:"absolute",top:PosT[0]+"px",left:PosT[1]+"px",background:"#FFCC66",zIndex:"10001"}).show("slow");   return this; }

演示地址：http://www.cnjquery.com/demo/dialog.html

这是一个最基本的写法 ，还没有做成 插件形式，主要就是让表格隔行换色。

这里我们可以发现 这个函数几乎没有什么通用性，下面我们来对她进行扩展。

以下为引用的内容： <SCRIPT LANGUAGE="JavaScript">  $(function(){    $.fn.alterColor  = function(){       $('tbody tr:odd', this).removeClass('even').addClass('odd');      $('tbody tr:even', this).removeClass('odd').addClass('even');    }       $('#cnjquery').alterColor();  }) </SCRIPT>

$('#cnjquery').alterColor();

这样样子有点插件的意思了，但是我们会发现一个问题 这样写，不能链式操作，

也就是   $('#cnjquery').alterColor().find("????")等

为什么呢？因为jquery在执行每个方法的时候 都会返回一个jquery对象 也就是我们只要加一个返回值就可以了

以下为引用的内容：  <SCRIPT LANGUAGE="JavaScript">  $(function(){    $.fn.alterColor  = function(){       $('tbody tr:odd', this).removeClass('even').addClass('odd');       $('tbody tr:even', this).removeClass('odd').addClass('even');       return this; //新增代码    }    $('#cnjquery).alterColor().find("tr").click(function(){         alert(1);//可以 链式操作 了。    });  }) </SCRIPT>

现在我们看到可以链式操作了 到了这里我们的插件算是基本完成了，但是还有一个小小问题

也就是插件的参数都是死的 ，我们没有办法动态修改他的参数，这样应用起来就太不方便了，没有办法还需要继续改造

以下为引用的内容： $(function(){     $.fn.alertColor = function(options) {        var defaults = {          odd : "red",           even : "blue"   };   var o = $.extend(defaults, options);     return this.each(function() {    $('tbody tr:odd', this).removeClass(o.even).addClass(o.odd);          $('tbody tr:even', this).removeClass(o.odd).addClass(o.even);    return this;  })    }     $('#cnjquery').alertColor({ odd : "cs"});  // 或者 $('#cnjquery').alertColor({ odd : "red"  ,  even : "blue"});  // 或者 $('#cnjquery').alertColor(); })

哈哈哈我们的换色表格插件终于完成了，赶快动作做一下吧。

(环境:vs2008+jquery1.2.3)
发现.net自带的ajax.net使用webservice输出的是json，其中关键的就是在请求时：Content-Type:application/json;utf-8
所以我们只要在POST时加上一个Content-Type:application/json;utf-8就可以了

var json = eval('(' + msg + ')');
（这个是把返回的字符值转换成json对象，这样子才能够正常的操作json，这里可以用try来捕捉一下错误，因为如果返回的字符串不是标准的json的话就会出错。）

上面的js要成功运行需要对.net做一下设置让“WebService输出JSON”
修改WebService，导入一个属性
 

<System.Web.Script.Services.ScriptService()> 

在webconfig中添加:

注意：这个是关键，这样子才能使请求asmx文件时让它输出json格式，刚刚开始时测试了很久都不行。

在vs2008 简体中文版+jquery 1.2.3下通过测试。


在测试过程中“顺便”发现了jq的一个"BUG"
在设置Content-Type时，发现怎么样设置jq总是不理不踩，
查看了一下jq的ajax方法哪一段源码，看到了如下的代码：

上面的data是ajax请示的参数，当参数值不为空才设置请求的Content-Type
我不知道这个到底是不是它的bug，在实际使用的时，你会碰到在调用webservice的一个方法，而这个方法是没有参数时，这样子
如果你不想修改jq的源码的话，就在请求时附加一些无用的数据，如：data:"{}"，不然jq可是会发“烂咂”（脾气）哦~呵呵

以上的问题还请使用jq的朋友们注意一下。

应朋友们的要求我写了个简单的演示,源码里已写好注释了,请大家查看相关的源码
演示是vs2008(vb)写的,下载源码

JScript code

    $.ajax({
                type: "POST",
                //注明 返回Json
                contentType:"application/json;utf-8",
                //CollegeDepartWebServices.asmx web服务名 /GetCollegeDepart 方法名
                url:"CollegeDepartWebServices.asmx/GetCollegeDepart",
               //strDepartId 参数名称 collegeId 参数值
                data:"{strDepartId:"+collegeId+"}",
                dataType:"json",
                success:function(result){                    
                 var json=null
                  try
                    {
                         if(result)
                         {
                             //因为返回的是ArrayList 所以循环取出其中的值
                             $.each(result, function(i, n){
                                //ddlDepart 为下来菜单。循环的向下拉菜单中添加新的选项
                                ddlDepart.options[ddlDepart.length]=new Option(n.CollegeDepartTitle,n.CollegeDepartId);
                              
                            });
                         }
                        

                    }
                    catch(e)
                    {
                       alert("错误>>"+e.message);
                       return;
                       
                    }
               
              },
              error:function(data)
              {
                alert(data.status+">>> "+data.statusText);
              }
         }); 
  

C# code

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class CollegeDepartWebServices : System.Web.Services.WebService
{

    public CollegeDepartWebServices()
    {

        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }

    [WebMethod]
    [System.Xml.Serialization.XmlInclude(typeof(CollegeDepartInfo))]
    public ArrayList  GetCollegeDepart(string strDepartId)
    {
        CollegeDepartBL.FlushCollegeDepartCache();
       
        if (string.IsNullOrEmpty(strDepartId))
            return null;

        ArrayList myList = CollegeDepartBL.GetCollegeDepartListByCollegeID(int.Parse(strDepartId));
        return myList;

    }

}