Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 18:28:15
original
1093 Les gens l'ont consulté

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();
$("
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!