[jQuery]AeroWindow
最近在找相關彈跳視窗插件，但使用者希望彈跳視窗樣式和WinForm一樣，
在網路世界果然什麼都有，所以終於讓我找到AeroWindow，
而且設定簡單一點都不複雜，可說很符合該使用者需求。
Html
<div id="iconContainer">
<div id="Firefoxicon"><img src="images/DesktopIcon-Firefox.png"></div>
</div>
<!-- Demo Aero Window 1 -->
<div id="Window1">
<p>
My Window Animation Style is <strong>OutBounce</strong>
</p>
<ul>
<li>Dobbleclick me! And see my <strong>happy Animation</strong>
<li>Resize me! Press my Buttons try my Look and Feel
<li>Drag me (header) and see my <strong>Live Aero Glass Header</strong>
</ul>
</div>
<!-- Demo Aero Window - FireFox App -->
<div id="Firefoxapp" style="display: none;">
<iframe src="http://tw.yahoo.com" width="100%" height="100%" style="border: 0px;" frameborder="0"></iframe>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function() {
// 把 #window1 模擬成 AeroWindow 視窗效果
$('#Window1').AeroWindow({
WindowTitle: 'Window 1 - Happy OutBounce',
WindowPositionTop: 100,
WindowPositionLeft: 200,
WindowWidth: 300,
WindowHeight: 200,
WindowAnimation: 'easeOutBounce'
});
// 點擊 #Firefoxicon 則會出現一個包含 iframe 的AeroWindow 視窗
$('#Firefoxicon').click(function() {
$('#Firefoxapp').AeroWindow({
WindowTitle: 'FireFox',
WindowPositionTop: 'center',
WindowPositionLeft: 'center',
WindowWidth: 700,
WindowHeight: 500,
WindowAnimation: 'easeOutCubic'
});
});
});
</script>
結果
其他特性和選項可參考作者網頁介紹。