Jquery中dialog屬性小記
更新時間:2010年09月03日 14:58:50 作者:
Jquery中dialog屬性小記,使用jquery dialog的朋友可以參考下。
復(fù)制代碼 代碼如下:
$('#dialogDiv').dialog(
{
hide:true, //點擊關(guān)閉是隱藏,如果不加這項,關(guān)閉彈窗后再點就會出錯.
autoOpen:false,
height:380,
width:800,
modal:true, //蒙層(彈出會影響頁面大小)
title:'開標(biāo)人',
overlay: {opacity: 0.5, background: "black" ,overflow:'auto'},
buttons:{
'確定':function(){
// 處理方法 addUser();
},
'取消':function(){
//關(guān)閉當(dāng)前Dialog
$(this).dialog("close");
}
}
}
);
$('#addItems').click(function(){
loadPage('buildOpeningGroupAddOpering.htm','#dialogDiv'); //dialog記取頁面
//$(window.parent.document).find("#projectSpaceContent .show").height(600)//調(diào)整當(dāng)前Iframe高度
$('#dialogDiv').data('title.dialog', '新增開標(biāo)人').dialog('open'); //修改標(biāo)題
return false;
})
function loadPage(path,id) {
$.get(path, function(data) {
// data = data.replace(/<script.*>.*<\/script>/ig,""); //移除script 標(biāo)簽
data = data.replace(/<\/?link.*>/ig,""); //移除 link 標(biāo)簽
data = data.replace(/<\/?html.*>/ig,""); //移除 html 標(biāo)簽
data = data.replace(/<\/?body.*>/ig,""); //移除 body 標(biāo)簽
data = data.replace(/<\/?head.*>/ig,""); //移除 head 標(biāo)簽
data = data.replace(/<\/?!doctype.*>/ig,""); //移除 doctype 標(biāo)簽
data = data.replace(/<title.*>.*<\/title>/ig,""); //移除 title 標(biāo)簽
$(id).empty().html(data);//清空contentMain內(nèi)容并加載html
});
}
//為彈出層增加關(guān)閉按鈕
$('.ui-dialog-buttonpane').show().empty();
$('<button>關(guān)閉</button>').click(function(){
$("#dialogDiv").dialog('close');
return false;
}).appendTo('.ui-dialog-buttonpane');
還是先看例子吧。另外如果要拖動、改變dialog的大小的話要加上ui.draggble.js和ui.resizable.js
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
<script>
$("#dialog").dialog({autoOpen:false,buttons:{"確定":function(){$(this).dialog("close");}},closeOnEscape:true,hide:"slide",modal:true,title:"對話 框"}).dialog("open");
</script>
<div id="dialog" title="Dialog Title">你是個豬頭!</div>
1 屬性
1.11 autoOpen ,這個屬性為true的時候dialog被調(diào)用的時候自動打開dialog窗口。當(dāng)屬性為false的時候,一開始隱藏窗口,知道.dialog("open")的時候才彈出dialog窗口。默認(rèn)為:true。
1.12 初始化例:請注意,$('.selector')是dialog 的類名,在本例中.selector=#dialoag,以后不再說明。
$('.selector').dialog({ autoOpen: false });
1.13 初始化后,得到和設(shè)置此屬性例:
//獲得
var autoOpen = $('.selector').dialog('option', 'autoOpen');
//設(shè)置
$('.selector').dialog('option', 'autoOpen', false);
1.21 bgiframe 默認(rèn)為false ,When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.
在IE6下,讓后面那個灰屏蓋住select。
1.22 初始化例:
$('.selector').dialog({ bgiframe: true });
1.23 初始化后,得到和設(shè)置:
//獲取
var bgiframe = $('.selector').dialog('option', 'bgiframe');
//設(shè)置
$('.selector').dialog('option', 'bgiframe', true);
1.31 buttons 顯示一個按鈕,并寫上按鈕的文本,設(shè)置按鈕點擊函數(shù)。默認(rèn)為{},沒有按鈕。
最上面的例子中已經(jīng)有buttons屬性的用法,請注意。
1.32 初始化例:
$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
1.33 初始化后,得到和設(shè)置:
//獲取
var buttons = $('.selector').dialog('option', 'buttons');
//設(shè)置
$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });
1.41 closeOnEscape 為true的時候,點擊鍵盤ESC鍵關(guān)閉dialog,默認(rèn)為true;
1.42 初始化例:
$('.selector').dialog({ closeOnEscape: false });
1.43 初始化后,得到和設(shè)置:
//獲取
var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');
//設(shè)置
$('.selector').dialog('option', 'closeOnEscape', false);
1.51 dialogClass 類型將被添加到dialog,默認(rèn)為空
1.52 初始化例:
$('.selector').dialog({ dialogClass: 'alert' });
1.53 初始化后,得到和設(shè)置:
//獲取
var dialogClass = $('.selector').dialog('option', 'dialogClass');
//設(shè)置
$('.selector').dialog('option', 'dialogClass', 'alert');
1.61 draggable、resizable : draggable是否可以使用標(biāo)題頭進行拖動,默認(rèn)為true,可以拖動;resizable是否可以改變dialog的大小,默認(rèn)為true,可以改變大小。
1.62 初始化例:
$('.selector').dialog({ draggable: false,resizable:false });
1.63 初始化后,得到和設(shè)置:
//獲取
var draggable = $('.selector').dialog('option', 'draggable');
//設(shè)置
$('.selector').dialog('option', 'draggable', false);
1.71 width、height ,dialog的寬和高,默認(rèn)為auto,自動。
1.72 初始化例:
$('.selector').dialog({ height: 530,width:200 });
1.73 初始化后,得到和設(shè)置:請參考1.63
1.81 maxWidth、maxHeight、minWidth、minHeight ,dialog可改變的最大寬度、最大高度、最小寬度、最小高度。maxWidth、maxHeight的默認(rèn)為false,為不限。minWidth、minHeight的默認(rèn)為150。要使用這些屬性需要ui.resizable.js 的支持。
1.82 初始化例:
$('.selector').dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 });
1.83 初始化后,得到和設(shè)置:請參考1.63
1.91 hide、show ,當(dāng)dialog關(guān)閉和打開時候的效果。默認(rèn)為null,無效果
1.92 初始化例:最上面的實例中用到,請自己看吧。
1.93 初始化后,得到和設(shè)置:請參考1.63
1.101 modal,是否使用模式窗口,模式窗口打開后,頁面其他元素將不能點擊,直到關(guān)閉模式窗口。默認(rèn)為false不是模式窗口。
1.102 初始化例:$('.selector').dialog({ modal: true });
1.103 初始化后,得到和設(shè)置:請參考1.63
1.111 title,dialog的標(biāo)題文字,默認(rèn)為空。
1.112 初始化例:見最上面的實例。1.113 初始化后,得到和設(shè)置:請參考1.63
1.121 position ,dialog的顯示位置:可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量也可以是一個字符串?dāng)?shù)組例如['right','top']。
1.122 初始化例:$('.selector').dialog({ position: ['top','right'] }); 1.123 初始化后,得到和設(shè)置:請參考1.63
1.131 zIndex, dialog的zindex值,默認(rèn)值為1000.
1.132 初始化例:$('.selector').dialog({ zIndex: 3999 }); 1.133 初始化后,得到和設(shè)置:請參考1.63
1.141 stack 默認(rèn)值為true,當(dāng)dialog獲得焦點是,dialog將在最上面。
1.142 初始化例:$('.selector').dialog({ stack: false }); 1.143 初始化后,得到和設(shè)置:請參考1.63
2 事件
2.11 beforeclose 類型dialogbeforeclose ,當(dāng)dialog嘗試關(guān)閉的時候此事件將被觸發(fā),如果返回false,那么關(guān)閉將被阻止。
2.12 初始化例:$('.selector').dialog({
beforeclose: function(event, ui) { ... }
});
2.13 使用類型綁定此事件例:$('.selector').bind('dialogbeforeclose', function(event, ui) {
...
});
2.21 close 類型:dialogclose ,當(dāng)dialog被關(guān)閉后觸發(fā)此事件。
2.22 初始化例:$('.selector').dialog({
close: function(event, ui) { ... }
});
2.23 使用類型綁定此事件例:$('.selector').bind('dialogclose', function(event, ui) {
...
});
2.3 open 類型:dialogopen ,當(dāng)dialog打開時觸發(fā)。(篇幅有限,該省略的就省略了啊,初始化例和使用類型綁定事件可以向上參考。)
2.4 focus 類型:dialogfocus ,當(dāng)dialog獲得焦點時觸發(fā)。
2.5 dragStart 類型:dragStart,當(dāng)dialog拖動開始時觸發(fā)。
2.6 drag 類型:drag ,當(dāng)dialog被拖動時觸發(fā)。
2.7 dragStop 類型:dragStop ,當(dāng)dialog拖動完成時觸發(fā)。
2.8 resizeStart 類型:resizeStart ,當(dāng)dialog開始改變窗體大小時觸發(fā)。
2.9 resize 類型:resize,當(dāng)dialog被改變大小時觸發(fā)。
2.10 resizeStop 類型:resizeStop,當(dāng)改變完大小時觸發(fā)。
3 方法
3.1 destroy ,我喜歡這個哦,摧毀地球。。。 例:.dialog( 'destroy' )
3.2 disable,dialog不可用,例:.dialog('disable');
3.3 enable,dialog可用,例,如3.2
3.4 close,open,關(guān)閉、打開dialog
3.5 option ,設(shè)置和獲取dialog屬性,例如:.dialog( 'option' , optionName , [value] ) ,如果沒有value,將是獲取。
3.6 isOpen ,如果dialog打開則返回true,例如:.dialog('isOpen')
3.7 moveToTop ,將dialog移到最上層,例如:.dialog( 'moveToTop' )
您可能感興趣的文章:
- JQUERY dialog的用法詳細(xì)解析
- jQuery Dialog 彈出層對話框插件
- JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
- jQuery UI Dialog 創(chuàng)建友好的彈出對話框?qū)崿F(xiàn)代碼
- jQuery EasyUI API 中文文檔 - Dialog對話框
- 淺析JQuery UI Dialog的樣式設(shè)置問題
- 用jquery中插件dialog實現(xiàn)彈框效果實例代碼
- jquery ui dialog實現(xiàn)彈窗特效的思路及代碼
- jquery實現(xiàn)input框獲取焦點的方法
- jquery注冊文本框獲取焦點清空,失去焦點賦值的簡單實例
- jquery獲取焦點和失去焦點事件代碼
- jquery dialog獲取焦點的方法
相關(guān)文章
EASYUI TREEGRID異步加載數(shù)據(jù)實現(xiàn)方法
找了一下官方文檔,看了EASYUI的異步加載,弄了我兩三個小時,死活都不出數(shù)據(jù)2012-08-08
jQuery防止click雙擊多次提交及傳遞動態(tài)函數(shù)或多參數(shù)
這篇文章主要介紹了jQuery防止click雙擊多次提交及傳遞動態(tài)函數(shù)方法,需要的朋友可以參考下2014-04-04
jQuery實現(xiàn)圖片與文字描述左右滑動自動切換的方法
這篇文章主要介紹了jQuery實現(xiàn)圖片與文字描述左右滑動自動切換的方法,涉及jquery實現(xiàn)圖文滑動切換效果的方法,涉及jquery針對頁面元素與樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07
jquery亂碼與contentType屬性設(shè)置問題解決方案
讓人頭痛的Jquery亂碼問題。其實這方面文章已經(jīng)很多了,但全面解決各種問題的很少,今天總結(jié)一下,方便自己也方便大家,感興趣的朋友可以了解下哦2013-01-01
jQuery插件Validate實現(xiàn)自定義表單驗證
這篇文章主要介紹了jQuery插件Validate實現(xiàn)自定義表單驗證,自定義一個驗證方法,感興趣的小伙伴們可以參考一下2016-01-01

