dialog
去掉"×"关闭
.no-close .ui-dialog-titlebar-close {
display: none;
}
$("#dialog").dialog({
dialogClass:'no-close',
buttons:[
{
text:'ok',
click:function(){
$(this).dialog('close');
}
}]
})
OPTIONS(选项)
appendTo
//对话框（和叠加，如果是模态）应该附加到哪个元素。
$( ".selector" ).dialog({
appendTo: "#someElem"
});
$(".selector").dialog("option","appendTo","#someElem");
autoOpen(true)
设为true 弹出框在初始化就会打开
$( ".selector" ).dialog({
autoOpen: false
});
buttons (Object or Array)
指定弹出页面显示的按钮
$( ".selector" ).dialog({
buttons: [
{
text: "Ok",
icon: "ui-icon-heart",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
classes object
指定要添加到小部件的其它类
default:
{
"ui-dialog": "ui-corner-all",
"ui-dialog-titlebar": "ui-corner-all",
}
例如
$(".selector").dialog({
classes:{"ui-dialog": "highlight"}
})
closeOnEscape(true)
指定对话框在焦点并且用户按下ESC（退出）键时是否应该关闭
$(".selector").dialog({
closeOnEscape:false
})
closeText (close)
指定关闭按钮的文本。 请注意，在使用标准主题时，关闭文本显然是隐藏的。
$(".selector").dialog({
closeText:"关闭"
})
dialogClass
指定的类名将被添加到对话框中，以进行其他主题。
$( ".selector" ).dialog({
dialogClass: "alert"
});
draggable (true)
能否拖动弹出框
$( ".selector" ).dialog({
draggable: false
});
height(auto)
指定弹出框的高度
$( ".selector" ).dialog({
height: 400
});
hide
Boolean or Number or String or Object
关闭弹出框
Boolean 设置false 不使用动画 立即关闭 true 使用默认的动画时间
Number 按指定的时间淡化关闭弹出框
String 已插件已有的效果淡化 如slideUp 或者 fold
Object 自定义淡化效果
maxHeight maxWidth minHeight minWidth
//最大高度 //最大宽度
modal(false)
如果设置为true，对话框将具有模态行为; 页面上的其他项目将被禁用，
即不能与之交互。 模式对话框在对话框下方但在其他页面元素上方创建叠加层。
position
弹出框的位置
$( ".selector" ).dialog({
position: { my: "left top", at: "left bottom", of: button }
});
resizable(true)
true弹出框自动调节大小
show
打开弹出框 和hide相同
$( ".selector" ).dialog({
show: { effect: "blind", duration: 800 }
});
title
标题
$( ".selector" ).dialog({
title: "Dialog Title"
});
width
弹出框宽度
Methods
close()
关闭弹出框
$( ".selector" ).dialog( "close" );
destroy()
$( ".selector" ).dialog( "destroy" );
彻底删除弹出框
instance()
检索对话框的实例对象。 如果元素没有关联的实例，则返回undefined。
moveToTop()
将对话框移到对话框的顶部
$( ".selector" ).dialog( "moveToTop" );
open()
打开弹出框
$( ".selector" ).dialog( "open" );
option( optionName )
获取当前与指定的optionName关联的值
var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
var options = $( ".selector" ).dialog( "option" ); 获取所有
option( optionName, value )
设置与指定的optionName关联的对话框选项的值。
$( ".selector" ).dialog( "option", "disabled", true );
$( ".selector" ).dialog( "option", { disabled: true } );
EVENTS
beforeClose( event, ui )
当对话即将关闭时触发。 如果取消，对话框将不会关闭
$( ".selector" ).dialog({
beforeClose: function( event, ui ) {}
});
close( event, ui )
关闭对话框时触发
$( ".selector" ).dialog({
close: function( event, ui ) {}
});
$( ".selector" ).on( "dialogclose", function( event, ui ) {} );
create( event, ui )
创建对话框时触发
$( ".selector" ).dialog({
create: function( event, ui ) {}
});
drag( event, ui )
拖动对话框时触发
$( ".selector" ).dialog({
drag: function( event, ui ) {}
});
dragStart( event, ui )
dragStop( event, ui )
focus( event, ui )
当对话获得焦点时触发。
$( ".selector" ).dialog({
focus: function( event, ui ) {}
});
open( event, ui )
弹出框在打开时触发
$( ".selector" ).dialog({
open: function( event, ui ) {}
});
resize( event, ui )
触发对话框的大小触发
当用户开始调整对话框大小时触发。
resizeStart( event, ui )
resizeStop( event, ui )
//完全清除 弹出内容
main.html
<div id="content"></div>
main.js
$("#id").click(function(){
$("#content").load("../dialog.html")
})
dialog.html
<div id="bind_company_dialog">
.......
</div>
<script src="../dialog.js">
<script src="../other.js">
//dialog.js 这个要自执行 触发 才能弹出
$("#bind_company_dialog").dialog({
autoOpen:false,
width:800,
height:800,
model:true,
resizable: false,
title:'企业处理',
buttons:[
{text:'确定',click:function(){
$(this).dialog("close");
}},
{text:'取消',click:function(){
$(this).dialog("close");
}}
],
//所有的关闭方法 都会经过这个
close:function(){
$("#bind_company_dialog").dialog('destroy');
$("#bind_company_content").empty();
}
});
解析
弹出框在弹出时 会在html多生成一个
1:在ui-dialog aria-describedby="bind_company_dialog" 的div 这个下面有弹出框的整体内容
$("#bind_company_dialog").dialog('destroy')是清除 aria-describedby的div内容
2:在 id=content下面还有一份
$("#bind_company_content").empty();清除
这样再次load弹出就不会有问题了
