想着自己学习Javascript，以及Ajax、jQuery等已经有一段时间了，不过貌似还没有写过一个插件，看到jQuery官网上那么多令人眼前一亮的插件，自己今天也动心说是不是能够写一个类似的插件来瞧瞧，了解了jQuery插件的基本格式，理一下基本的思路，动工吧。。。 　　这个DivAlert插件，顾名思义就是页面弹出框，也就相当于Winform里面MessageBox.Show()那样的东西。 　　首先，我们来定义一下一些最基本的参数： 插件初始化 复制代码 代码如下: (function($) { $.jDivAlert = function(o) { //设置插件基本信息 var options = o || {}; options.width = o.width || 300; options.height = o.height || 200; options.title = o.title || "提示标题"; options.content = o.content || "提示内容"; 　　随后定义一个创建页面元素的方法，这样可以重用，简写js： 复制代码 代码如下: function createElement(obj) { return $(document.createElement(obj)); } 创建背景div及设定样式 复制代码 代码如下: var $bgDiv = createElement('div') .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" }) .appendTo('body'); 创建提示div 复制代码 代码如下: var $outDiv = createElement('div') .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' }) .appendTo('body'); 创建提示div的标题部分 复制代码 代码如下: var $titDiv = createElement("div") .css({ 'textAlign': 'left', 'backgroundColor': '#54A1D9', 'padding': '8px', 'cursor': 'move', 'height': '20px', 'vertical-align': 'middle' }) .html(options.title) .appendTo($outDiv); 创建提示div的内容部分 复制代码 代码如下: var $conDiv = createElement("div") .css({ 'backgroundColor': '#fff', 'textAlign': 'center', 'padding': '12px', 'height': options.height - $titDiv.outerHeight() }) .html(options.content) .appendTo($outDiv); 创建关闭按钮 复制代码 代码如下: var $clsBtn = createElement("img") .attr('src', 'del.gif') .css({ 'cursor': 'pointer', 'float': 'right' }) .click(close) .appendTo($titDiv); 　　创建弹出框关闭事件： 复制代码 代码如下: function close() { $bgDiv.fadeOut(); $outDiv.fadeOut(); } } })(jQuery); 　　要看到使用效果，在页面script部分加入如下代码即可(当然jQuery库文件不可少啊，现在最新版是1.4.2，可以去官网http://www.jQuery.com下载)： 复制代码 代码如下: $(document).ready(function() { $.jDivAlert({ width: 300, height: 300 }); }); 　　貌似还有很多功能有待完善，哎。。继续努力。。。 打包下载地址 基于jQuery的弹出消息插件 DivAlert之旅（一）基于jQuery的消息提示插件 DivAlert之旅（二） 基于jQuery的消息提示插件 DivAlert之旅（三） 推荐

　　推荐阅读

　　js 多浏览器分别判断代码

复制代码 代码如下:/* 浏览器判断 */ var userAgent = navigator.userAgent.toLowerCase(); var is_webtv = userAgent.indexOf('webtv') != -1; var is_kon = userAgent.indexOf('konqueror') != -1; var is_mac =>>>详细阅读

本文标题：基于jQuery的弹出消息插件 DivAlert之旅（一）

地址：http://www.17bianji.com/kaifa2/JS/26715.html

 1/2    1