jQuery插件--DivAlert之旅（一）

想着自己学习Javascript，以及Ajax、jQuery等已经有一段时间了，不过貌似还没有写过一个插件，看到jQuery官网上那么多令人眼前一亮的插件，自己今天也动心说是不是能够写一个类似的插件来瞧瞧，了解了jQuery插件的基本格式，理一下基本的思路，动工吧。。。

　　这个DivAlert插件，顾名思义就是页面弹出框，也就相当于Winform里面MessageBox.Show()那样的东西。

　　首先，我们来定义一下一些插件初始化时的基本参数：

1 ( function ($) {
2 $.jDivAlert = function (o) {
3 // 设置插件基本信息
4 var options = o || {};
5 options.width = o.width || 300 ;
6 options.height = o.height || 200 ;
7 options.title = o.title || " 提示标题 " ;
8 options.content = o.content || " 提示内容 " ;

　　随后定义一个创建页面元素的方法，这样可以重用，简写js：

1 function createElement(obj) {
2 return $(document.createElement(obj));
3 }

 　　创建背景div和样式：

1 var $bgDiv = createElement( ' div ' )
2 .css({ ' position ' : ' absolute ' ,  ' top ' : ' 0 ' , ' left ' : ' 0 ' , ' z-index ' : ' 9999 ' , 

  　　　　　　　　　　　　　 ' filter ' : ' alpha(opacity=70) ' , ' backgroundColor ' : ' #999 ' ,
　　　　　　　　　 ' opacity ' : ' 0.7 ' , ' width ' : document.documentElement.clientWidth + " px " , 

  　　　　　　　　　　　　　 ' height ' : document.documentElement.clientHeight + " px " })
3 .appendTo( ' body ' );

　　创建提示div：

1 var $outDiv = createElement( ' div ' )
2 .css({ ' position ' : ' absolute ' , 

  　　　　　　　　　　 ' top ' : ($(window).height() - options.height) / 2 + $(window).scrollTop() + ' px ' ,
' left ' : ($(window).width() - options.width) / 2 + $(window).scrollLeft() + ' px ' ,
' border ' : ' 1px solid #cef ' , ' zIndex ' : ' 10000 ' , ' width ' : options.width + ' px ' , 

  　　　　　　　　　 ' height ' : options.height + ' px ' , ' overflow ' : ' hidden ' })
3 .appendTo( ' body ' );

　　创建div的标题部分：

1 var $titDiv = createElement( " div " )
2 .css({ ' textAlign ' : ' left ' , ' backgroundColor ' : ' #54A1D9 ' , 

  　　　　　　　　　　　　　　' padding ' : ' 8px ' , ' cursor ' : ' move ' , ' height ' : ' 20px ' , 

  　　　　　　　　　　　　　 ' vertical-align ' : ' middle ' })
3 .html(options.title)
4 .appendTo($outDiv);

　　创建div的内容部分：

1 var $conDiv = createElement( " div " )
2 .css({ ' backgroundColor ' : ' #fff ' , ' textAlign ' : ' center ' , 

　　　　　　　　　　　　　　' padding ' : ' 12px ' , ' height ' : options.height - $titDiv.outerHeight() })
3 .html(options.content)
4 .appendTo($outDiv);

　　创建关闭按钮：

1 var $clsBtn = createElement( " img " )
2 .attr( ' src ' , ' del.gif ' )
3 .css({ ' cursor ' : ' pointer ' , ' float ' : ' right ' })
4 .click(close)
5 .appendTo($titDiv);

　　创建弹出框关闭事件：

1 function close() {
2 $bgDiv.fadeOut();
3 $outDiv.fadeOut();
4 }
5 }
6 })(jQuery);

　　要看到使用效果，在页面script部分加入如下代码即可(当然jQuery库文件不可少啊，现在最新版是1.4.2，可以去官网http://www.jQuery.com下载)：

1 $(document).ready( function () {
2 $.jDivAlert({
3 width: 300 ,
4 height: 300
5 });
6 });

　　貌似还有很多功能有待完善，哎。。继续努力。。。

　　第一次发帖，欢迎拍砖。。。

 　　代码下载:Demo

作者：Rocky翔
出处：http://www.cnblogs.com/RockyMyx/
本文版权归作者和博客园共有，欢迎转载，但请在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/RockyMyx/archive/2010/03/18/jQuery-msgPlugin.html