Friday, March 30, 2012

[jQuery] jQuery UI Dialog 彈跳視窗使用教學

jQuery UI 有許多功能，可以讓網頁呈現許多很炫的效果，其中彈跳視窗是其中一種，利用javascript的alert也可以做出彈跳視窗，但是不美觀，而利用jQuery UI Dialog就可以做出美美的彈跳視窗囉，用法很簡單...

1.引入必要檔案
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://jqueryui.com/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
2.主要的js碼
<script>
$(function() {
  $( "#dialog" ).dialog({
    autoOpen: false,
    height:150,
width:300
  });
  $( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
    return false;
  });
});
</script>
3.主要的html碼
<div id="dialog" title="視窗標題">
  <p>視窗文字</p>
</div>
<button id="opener">OPEN</button> 
參考文件：
官網 http://jqueryui.com/demos/dialog/
參數文件 API documentation.

範例中的height跟width就是所謂的控制參數，參考文件裡面有各式各樣的參數可以使用，例如，如果希望改變彈跳視窗的出現位置(預設是正中央)，只要改position這個參數，就可以調整位置了。(EX：position:[0,0] 就會出現在左上方，也可以用 position:[center,top] 這種敘述方式的參數)

備註1：
網頁的DOCTYPE請使用「標準模式」，也就是網頁最上方請使用 <!doctype html>

備註2：
參數中的maxHeight似乎是無效的，在官網的問題回報有提到這一點，用CSS的方式可以解決，例如：$('#dialog').dialog().css({'max-height' : '50px'});

備註3：
如果想要改配色主題，請參考 [jQuery][CSS] 輕鬆更改 jQuery UI 的主題(Theme)

No comments:

Post a Comment