先网站开发后软件开发,精准引流的网络推广,国外自建站好做吗,wordpress 文档管理系统想着自己学习Javascript#xff0c;以及Ajax、jQuery等已经有一段时间了#xff0c;不过貌似还没有写过一个插件#xff0c;看到jQuery官网上那么多令人眼前一亮的插件#xff0c;自己今天也动心说是不是能够写一个类似的插件来瞧瞧#xff0c;了解了jQuery插件的基本格式…想着自己学习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 || 提示内容;随后定义一个创建页面元素的方法这样可以重用简写jsfunction createElement(obj) {return $(document.createElement(obj));}创建背景div及设定样式var $bgDiv createElement(div).css({ position: absolute, top: 0, left: 0, z-index: 9999, filter: alpha(opacity70), backgroundColor: #999, opacity: 0.7, width: document.documentElement.clientWidth px, height: document.documentElement.clientHeight px }).appendTo(body);创建提示divvar $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之旅(二)