[jQuery]AeroWindow

[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>

 

 

 

結果

image

 

其他特性和選項可參考作者網頁介紹。