首页 > web前端 > js教程 > jQuery 动画弹出窗体支持多种展现方式_jquery

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

WBOY
发布: 2016-05-16 18:28:15
原创
1151 人浏览过

jQuery 动画弹出窗体支持多种展现方式_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();
$("
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板