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