Jquery ベースの Windows Aero ポップアップウィンドウ (美しい閉じるボタン)

Jquery ベースの Windows Aero ポップアップウィンドウ (美しい閉じるボタン)_jquery

WBOY

リリース： 2016-05-16 18:19:15

オリジナル

1206 人が閲覧しました

今回紹介した Jquery Dialog Plugins AeroWindow は、Windows 7 Aero エフェクトに似た物理的本体を備えているため、最もユニークなものです。

レンダリング:
Jquery ベースの Windows Aero ポップアップウィンドウ (美しい閉じるボタン)_jquery
デモ:

公式デモローカルデモ

機能
ユニーク: ウィンドウが移動するときのタイトルバーの反射効果
ウィンドウボタン: 最小化、縮小、最大化、閉じる
ウィンドウタイトルをダブルクリック列の最大化、縮小
強調表示されたアクティブウィンドウ
ウィンドウサイズの変更 (サイズ変更)
マウスドラッグウィンドウ
N 個の構成オプション
構成オプション
ウィンドウタイトル
ウィンドウウィンドウで利用可能な機能、マウスイベント、および JavaScript 呼び出し
以下の互換性テスト済みブラウザ
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
Firefox 3
Google ブラウザ 4
Apple Safari 4
Opara10
使い方はとても簡単です
既存の Web サイトのウィンドウを Windows Aero 効果で表示してみませんか。

最も簡単な使用方法:

コードをコピーします

コードは次のとおりです: $('#YourContainerDiv').AeroWindow({ WindowTitle: 'Web 用の初めてのとてもクールな Aero ウィンドウ', });

カスタム構成:

コードをコピー

コードは次のとおりです: $('#YourContainerDiv') .AeroWindow({ WindowTitle: 'Web 用の初めてのクールな Aero ウィンドウ', WindowPositionTop: 'center',

WindowPositionLeft: 'center',

WindowWidth: 600, 
WindowHeight: 400 , 
WindowMinWidth: 100, 
WindowMinHeight: 100, 
WindowAnimationSpeed: 500, 
WindowAnimation: 'easeOutCubic',//ウィンドウが開いたときのアニメーション効果 
WindowResizable: true, 
 WindowDraggable: true、
 WindowMinimize: true、
WindowMaximize: false、
WindowClosable: true 
}); 

 
 には、必要なファイルとデモ ファイルがすべて含まれています。このバージョンは jQuery (v1.4.2) に基づいています 

公式ダウンロード アドレス: » 
AeroWindow

(v3.5)
このサイトのダウンロードアドレス:
AeroWindow Windows Aero の模倣jquery に基づくポップアップウィンドウ
ライフフローページで AeroWindow プラグインを使用するためのコードが添付されています

コードをコピーします

コードは次のとおりです。 //javascript $(document).ready(function() { $('#profiluctic a ').click(function() {

var go=$(this);

$('#mywindows').attr('src',go.attr('href')) 
go .attr('href','javascript:void (0);'); 
$('#Firefoxapp').AeroWindow({ 
WindowTitle: 'Xiangwan's' go.attr('class'), 
WindowPositionTop: 'center', 
WindowPositionLeft: 'center', 
WindowWidth: 1000, 
WindowHeight: 500, 
WindowAnimation: 'easeOutCubic' 
}); 'html,body').animate( {scrollTop: '0px'}, 300); 
return 
}); 
//ポップアップ ウィンドウ コンテナ


 




困っている人は参考にしてください。