首頁 > 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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板