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/
本文版权归作者和博客园共有，欢迎转载，但请在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。