jQuery 动画弹出窗体支持多种展现方式

动画效果　　从哪个对象上触发的即从该对象开始逐渐向屏幕中间移动，并逐渐展开，展开后里面的显示对象再从上到下慢慢展开。点击关闭时，先将展开的显示的对象慢慢缩回，然后再慢慢移到触发的对象上面。　　说的有点绕，我自己都不明白是什么意思，说白了就是从哪儿来回哪儿去。　　展现方式　　　　第一种：string 　　　　这是最简单最明了的方式，不用多说，就是直接赋值字符串并显示出来。　　　　第二种：ajax 　　　　这种是支持ajax的展现，就是异步获取数据并展示出来。　　　　第三种: iframe 　　　　顾名思义就是支持嵌套iframe显示。　　　　第四种：controls 　　　　这个名字有点不太好理解，就是将页面的某个对象展现出来。比如：document.getElementById("showName"); 　　插件代码实现复制代码代码如下: (function($){ $.alerts = { alert : function(o,options){ var defaults = { title : '标题', content : '内容', GetType : 'string', //controls,ajax,string,iframe IsDrag : true, Url : '', Data : null, width:400, height:300, callback : function(){} } var options = $.extend(defaults,options); if(!$("#window")[0]) { $.alerts._createObject(); } var position = $.alerts._getPosition(o); var winPosition = $.alerts._getWindowPosition(options); $("#windowContent").hide(); $("#window").css( { width:position.w, height:position.h, top:position.t, left:position.l, zIndex:1001 } ); $("#windowBottom,#windowBottomContent").css( { height:options.height-30 } ); $("#windowContent").css( { height:options.height - 45, width:options.width - 25 } ); $("#windowTopContent").html(options.title); switch(options.GetType){ case "string": $("#windowContent").html(options.content); break; case "ajax": if(options.Url == ''){ alert("AjaxUrl不能为空"); return; }else{ $.ajax( { type: "POST", url: options.Url, data: options.Data, success: function(msg){ $("#windowContent").html(msg); } } ); } break; case "controls": $("#windowContent").html(options.content.innerHTML); break; case "iframe": $("#windowContent").empty(); $("<iframe>").attr( { src : options.Url, width:options.width, height:options.height } ).appendTo("#windowContent"); break; } $("#window").animate( { left:winPosition.l, top:winPosition.t, height:winPosition.h, width:winPosition.w },500,function(){ //$("#windowContent").fadeIn('slow'); $("#windowContent").slideDown(600); if($("#middleElement_bgDiv").get().length == 0){ $("<div>").attr("id","middleElement_bgDiv").css( { position:"absolute", left:"0px", top:"0px", width:$(window).width()+"px", height:Math.max($("body").height(),$(window).height())+"px", filter:"Alpha(Opacity=40)", opacity:"0.4", backgroundColor:"#AAAAAA", zIndex:"1000", margin:"0px", padding:"0px" } ).appendTo("body"); }else{ $("#middleElement_bgDiv").show(); } } ); $("#windowClose").one("click",function(){ $("#windowContent").slideUp(600,function(){ $("#window").animate( { left:position.l, top:position.t, height:position.h, width:position.w },500,function(){ $(this).hide(); if($("#middleElement_bgDiv").get().length > 0){ $("#middleElement_bgDiv").hide(); } $("#window").css( { left:winPosition.l, top:winPosition.t, height:winPosition.h, width:winPosition.w } ); } ); }) }); $("#windowTop").mousedown(function(){ $.alerts.Drag( document.getElementById("window"), { e : event, Drag : options.IsDrag } ); }); }, _createObject : function(){ $("<div id="window">"+ "<div id="windowTop">"+ "<div id="windowTopContent">Window example</div>"+ "<img src="images/window_min.jpg" id="windowMin" />"+ "<img src="images/window_max.jpg" id="windowMax" />"+ "<img src="images/window_close.jpg" id="windowClose" />"+ "</div>"+ "<div id="windowBottom"><div id="windowBottomContent"> </div></div>"+ "<div id="windowContent"></div>"+ "<img src="images/window_resize.gif" id="windowResize" />"+ "</div>").appendTo("body"); }, _getWindowPosition : function(options){ var wPosition = $.alerts._getPosition("#window"); var windowPosition = {}; windowPosition.t = parseInt($(window).height()/6)+parseInt($(window).scrollTop()); windowPosition.l = ($(window).width()+$(window).scrollLeft())/2 - options.width/2; windowPosition.w = options.width; windowPosition.h = options.height; return windowPosition; }, _getPosition : function(o){ var top = $(o).offset().top; var left = $(o).offset().left; var height = $(o).height(); var width = $(o).width(); return {t:top,l:left,h:height,w:width}; }, Drag : function(obj,options){ var e = options.e || window.event; var Drag = options.Drag; if(Drag == false)return; var x=parseInt(obj.style.left); var y=parseInt(obj.style.top); var x_=e.clientX-x; var y_=e.clientY-y; if(document.addEventListener){ document.addEventListener('mousemove', inFmove, true); document.addEventListener('mouseup', inFup, true); } else if(document.attachEvent){ document.attachEvent('onmousemove', inFmove); document.attachEvent('onmouseup', inFup); } inFstop(e); inFabort(e); function inFmove(e){ var evt; if(!e)e=window.event; obj.style.left=e.clientX-x_+'px'; obj.style.top=e.clientY-y_+'px'; inFstop(e); } function inFup(e){ var evt; if(!e)e=window.event; if(document.removeEventListener){ document.removeEventListener('mousemove', inFmove, true); document.removeEventListener('mouseup', inFup, true); } else if(document.detachEvent){ document.detachEvent('onmousemove', inFmove); document.detachEvent('onmouseup', inFup); } inFstop(e); } function inFstop(e){ if(e.stopPropagation) return e.stopPropagation(); else return e.cancelBubble=true; } function inFabort(e){ if(e.preventDefault) return e.preventDefault(); else return e.returnValue=false; } } } JAlert = function(o,json){ $.alerts.alert(o,json); }; })(jQuery); 调用代码复制代码代码如下: $(function(){ $("a").each(function(){ $(this).bind("click",function(){ JAlert(this,{ title : '提示窗体', content : $("#msg")[0].outerHTML, GetType : 'string', //controls,ajax,string,iframe IsDrag : true, Url : "windows.html", Data : null, width:300, height:200 }); }); }); }); 使用说明：　　　　title: 窗体标题　　　　content:取决于GetType属性，如果GetType='string',那么content就是要显示的内容，如果GetType='controls'，那么content则为要显示的DOM对象。其它两个类型可不用填写。　　　　GetType:展现的四种类型：string,iframe,ajax,controls 　　　　IsDrag:是否支持拖拽　　　　Url: 同样取决于GetType属性，如果GetType='ajax'，那么Url就是请求的URL地址，如果GetType='iframe'，那么URL就是iframe的链接地址。其它两个类型不用填写　　　　Data:当GetType='ajax'时，Data属性为请求的数据。　　　　width:显示层的宽度　　　　height:显示层的高度　　HTML代码复制代码代码如下: <body> <a href="javascript:void(0);" id="windowOpen1">Open window</a> <a href="javascript:void(0);" id="windowOpen2">Open window</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <a href="javascript:void(0);" id="windowOpen3">Open window</a> <div id="msg" style="font-size:16px;padding-top:16px;line-height:25px;"> 欢迎访问《<a href="http://jb51.net" target="_blank">脚本之家</a>》的网站,希望与大家一起探讨技术问题，共同实现各自的梦想！<br/><br/>网址：http://jb51.net</div> </body> 打包下载地址

　　推荐阅读

　　javascript 文章截取部分无损html显示实现代码

因为是html格式的内容，直接截取内容的前多少字符显然不合适了。而如果直接去掉所有html格式然后再截取又无法达到想要的效果，再网上搜了一通之后，写下如下代码应该可以满足基本的要求了。(js写的，因为容易调试)>>>详细阅读

本文标题：jQuery 动画弹出窗体支持多种展现方式

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

1/2 1