20151215jquery學習筆記--jqueryUI --dialog（對話方塊）

破玉發表於2015-12-15
jQuery筆記UI

對話方塊（dialog），是 jQuery UI 非常重要的一個功能。它徹底的代替了 JavaScript 的 alert()、prompt()等方法，也避免了新視窗或頁面的繁雜冗餘

一．開啟多個 dialog 我們可以同時開啟多個 dialog，只要設定不同的 id 即可實現。 

$('#reg').dialog();
 $('#login').dialog();

　　二．修改 dialog 樣式

在彈出的 dialog 對話方塊中，在火狐瀏覽器中開啟 Firebug 或者右擊->檢視元素。這樣， 我們可以看看 dialog 的樣式，根據樣式進行修改。我們為了和網站主題符合，對 dialog 的標 題背景進行修改。 

//無須修改 ui 裡的 CSS，直接用 style.css 替代掉 

.ui-widget-header{
 background:url(../img/ui_header_bg.png); 
}

　　

注意：其他修改方案類似。

三．dialog()方法的屬性

對話方塊方法有兩種形式：

1.dialog(options)，options 是以物件鍵值對的形式傳參，每個 鍵值對錶示一個選項；

2.dialog('action',param)，action 是操作對話方塊方法的字串，param 則是 options 的某個選項。

$('#reg').dialog({
        title:'註冊知問', 
       buttons:{
              '按鈕': function(){
                                     } 
                    }
});

　　

$('#reg').dialog({
 position:'lefttop' 
});

　　

$('#reg').dialog({ 
height: 500,
 width:500,
 minWidth:300,
 minHeight :300, 
maxWidth: 800, 
maxHeight: 600
 });

　　

$('#reg').dialog({
 show:true,
 hide:true 
});

　　注意：設定 true 後，預設為淡入淡出，如果想使用別的特效，可以使用以下表格中的字 符串引數

$('#reg').dialog({
 show:'blind', 
hide:'blind' 
});

　　

$('#reg').dialog({ 
autoOpen:false,
draggable:false,
 resizable: false,
 modal: true,
 closeText:'關閉'
});

　　

四．dialog()方法的事件

除了屬性設定外，dialog()方法也提供了大量的事件。這些事件可以給各種不同狀態時 提供回撥函式。這些回撥函式中的this值等於對話方塊內容的div物件，不是整個對話方塊的div。

//當對話方塊獲得焦點後
 $('#reg').dialog({
 focus:function(e,ui) {
 alert('獲得焦點'); 
}
 });

//當建立對話方塊時 
$('#reg').dialog({
 create: function(e,ui){
 alert('建立對話方塊');
 } 
});
//當將要關閉時
 $('#reg').dialog({
 beforeClose:function(e,ui){
 alert('關閉前做的事！'); 
returnflag; 
} 
});
//關閉對話方塊時 
$('#reg').dialog({
 close:function(e,ui){
 alert('關閉！'); 
} 
});
//對話方塊移動時
 $('#reg').dialog({ 
drag:function(e,ui){ 
alert('top:'+ui.position.top+ '\n' +'left:'+ ui.position.left); 
} 
});
//對話方塊開始移動時 
$('#reg').dialog({
 dragStart: function(e,ui){
 alert('top:'+ui.position.top+ '\n' +'left:'+ ui.position.left);
 }
 });
//對話方塊結束移動時 
$('#reg').dialog({
 dragStop: function(e,ui){
 alert('top:'+ui.position.top+ '\n' +'left:'+ ui.position.left);
 } 
});
//調整對話方塊大小時
 $('#reg').dialog({
 resize:function(e,ui){
 alert('size:'+ui.size.width+ '\n'
+'originalSize:' +ui.originalSize.width);
}
});
//開始調整對話方塊大小時
 $('#reg').dialog({
 resizeStart :function(e,ui){
 alert('size:'+ui.size.width+ '\n' +'originalSize:' +ui.originalSize.width); 
} 
});
//結束調整對話方塊大小時
 $('#reg').dialog({
 resizeStop:function(e,ui) {
 alert('size:'+ui.size.width+ '\n' +'originalSize:' +ui.originalSize.width); 
} 
});

　　

//初始隱藏對話方塊
 $('#reg').dialog({
 autoOpen:false
 });
//開啟對話方塊
 $('#reg_a').click(function(){
 $('#reg').dialog('open'); 
});
//關閉對話方塊
$('#reg').click(function(){
 $('#reg').dialog('close'); 
});
//判斷對話方塊開啟或關閉狀態 
$(document).click(function() { 
alert($('#reg').dialog('isOpen'));
 });
//將指定對話方塊置前
 $(document).click(function() {
 $('#reg').dialog('moveToTop');
 });
//獲取某個 options 的 param 選項的值
 vartitle=$('#reg').dialog('option', 'title');
 alert(title);
//設定某個 options 的 param 選項的值 
$('#reg').dialog('option','title', '註冊知問');

　　

五．dialog 中使用 on()

在 dialog 的事件中，提供了使用 on()方法處理的事件方法。

$('#reg').on('dialogclose',function(){ 
alert('關閉'); 
});

　　

相關文章