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

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

レンダリング:

デモ:

公式デモ ローカルデモ

機能
ユニーク: ウィンドウが移動するときのタイトル バーの反射効果
ウィンドウ ボタン: 最小化、縮小、最大化、閉じる
ウィンドウ タイトルをダブルクリック列の最大化、縮小
強調表示されたアクティブ ウィンドウ
ウィンドウ サイズの変更 (サイズ変更)
マウス ドラッグ ウィンドウ
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
});
//ポップアップ ウィンドウ コンテナ

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。