ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery アニメーション ポップアップ フォームは複数のプレゼンテーション メソッドをサポートします_jquery

jQuery アニメーション ポップアップ フォームは複数のプレゼンテーション メソッドをサポートします_jquery

WBOY
リリース: 2016-05-16 18:28:15
オリジナル
1150 人が閲覧しました

jQuery アニメーション ポップアップ フォームは複数のプレゼンテーション メソッドをサポートします_jquery
アニメーション効果
どのオブジェクトから開始され、徐々に画面の中央に移動し、拡張後、内部の表示オブジェクトがゆっくりと拡大します。上から下に拡張します。クリックして閉じるときは、展開された表示オブジェクトをゆっくりと引っ込めてから、トリガーされたオブジェクトまでゆっくりと移動します。
はっきり言って、今いる場所を行ったり来たりするという意味です。
表示方法
最初の方法: string
言うまでもなく、これは文字列の値を直接代入して表示する方法です。
2 番目のタイプ: ajax
データを非同期に取得して表示する ajax に対応したディスプレイです。
3 番目のタイプ: iframe
名前が示すように、ネストされた iframe 表示をサポートします。
4番目のタイプ:コントロール
この名前は少し分かりにくいですが、ページ上にオブジェクトを表示するものです。例: 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();
$("