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