http://www.jackxiang.com/index.php zh-cn http://www.jackxiang.com/post// jack <xdy108@126.com> Sat, 16 Jan 2010 17:22:18 +0000 http://www.jackxiang.com/post//
<script type="text/javascript" src="/js/follow.js" ></script>

<script type="text/javascript">
function jumppage(){
  $('#bloomup').dialog( {modal: true,resizable:false,width:'400px', height:'400px',overlay: { opacity: 0.7, background: 'black' } });
}
function closejumppage(){
  $('#bloomup').dialog('close');
}

</script>

<iframe name="iframexq" id="iframexq" src="/con/exchange/act/putcodes" frameborder="0" scrolling="no" style="width:400px; height:390px"></iframe>



<div id="dialog"> </div>

$("#dialog").dialog( {
autoOpen :true,
height :200,
width :300,
modal :true,
                                    bgiframe :true,
                                    postion:'center',
close : function() {
},
buttons : {
"关闭" : function() {
$(this).dialog('close');
}
}
});
$('#dialog').dialog('open');

为什么用了  bgiframe :true 属性后，我页面上的SELECT标签还是会在DIALOG的前面,还有 postion:'center',但是DIALOG显示位置不是在页成居中.

页面用的是STRUTS2的SELECT标签，会不会是这二个有冲突，那位高手指点一下。

用我的意思来解释，(jquery )dialog的意思就是可以用来制造弹出层的一种方法，当然比弹出层要高级。花费了整整一天的时间，将这个UI看了一遍，至少现在能够明白个大概，但是具体的使用还得在今后的使用中慢慢熟练，慢慢探索。
调用方法：
1.$(foo).dialog()
2.$('selector').click(function(){
$(foo).dialog('open')
})
Options:autoOpen,buttons,closeOnEscape,dialogClass,hide,maxHeight,maxWidth,minHeight,minWidth,width,height,position,show,title
1.autoOpen(Boolean)
作用：是否自动弹出层（会话层）
用法：$(".selector").dialog({autoOpen:false});
设置方法：
//getter
var autoOpen = $('.selector').dialog('option','autoOpen');
//setter
$('.selector').dialog('option','autoOpen',false);
备注：true为自动弹出
3.buttons
作用：设置以后再会话层下面出现按钮
用法：buttons:{"ok":function(){$(this).dialog("close")}
设置方法：
//getter
var buttions = $('.selector').dialog('option','buttons');
//setter
$('.selector').dialog('option','buttons',{"ok":function(){$(this).dialog('close');}});
4.closeOnEscape
作用：设置用户是否可以使用Esc健退出会话层
用法：$('.selector').dialog({closeOnEscape:false});
设置方法：
//getter
var closeOnEscape = $('.selector').dialog('option','closeOnEscape');
//setter
$('.selector').dialog('option','closeOnEscape',false);
备注：true为可以使用
5.dialogClass
作用：为会话层使用新的样式
用法：$('.selector').dialog({dialogClass:'styleclass'});
设置方法：
//getter
var dialogClass = $('.selector').dialog('option','dialogClass');
//setter
$('.selector').dialog('option','dialogClass','styleclass');
备注：会话层中的导航和按钮部分样式待探索。。。
6.hide
作用：设置会话层关闭时的效果
方法：$('.selector').dialog({hide:'slide'});
设置方法：
//getter
var hide = $('.selector').dialog('option','hide');
//setter
$('.selector').dialog('option','hide','slide');
7.maxHeight,maxWidth,minHeight,minWidth,width,height
作用：设置会话层可被拖拽的最大和最小的宽度和高度,width,height设置会话层的宽和高，默认单位为Px。
用法：$('.selector').dialog({maxHeight:400});
8.position
作用：设置会话层的位置(left,right,top,bottom,center),也可以设置['left','top']左上角位置
方法：$(".selector").dialog({position:'left'})
9.show
作用：设置会话层出现的效果
用法：$('.selector').dialog({show:'slide'});
10.title
作用：设置会话层的title，优先于div中设置的title
用法：$('.selector').dialog({title:'Dialog Title'});

===========以下为未能测试或未测试出效果的option，并附上官方解释===========

draggable
If set to true, the dialog will be draggable will be draggable by the titlebar.
modal
If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements.
resizable
If set to true, the dialog will be resizeable.
stack
Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus.
zIndex
The starting z-index for the dialog.


Events:beforeclose,open,focus,dragStart,drag,dragStop,resizeStart,resize,resizeStop,close
使用方法：
$('.selector').dialog({beforeclose:function(){}});


Methods:
.dialog('destry'),.dialog('disable'),.dialog('enable'),.dialog('option',optionName,[value]) ,.dialog('close'),.dialog('isOpen'),.dialog('moveToTop'),.dialog('open')
使用方法：$(foo).dialog()
]]> http://www.jackxiang.com/post//#blogcomment <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://www.jackxiang.com/post//#blogcomment