jQuery 动画弹出窗体支持多种展现方式_jquery
程序员文章站
2022-06-05 23:26:29
...
动画效果
从哪个对象上触发的即从该对象开始逐渐向屏幕中间移动，并逐渐展开，展开后里面的显示对象再从上到下慢慢展开。点击关闭时，先将展开的显示的对象慢慢缩回，然后再慢慢移到触发的对象上面。
说的有点绕，我自己都不明白是什么意思，说白了就是从哪儿来回哪儿去。
展现方式
第一种：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();
$("
相关文章
相关视频
上一篇： js学习正则之replace的实例详解
下一篇： 做一个恐怖、灵异的资讯类APP