本文提供两种更改jquery对话框的大小的方法。
1.通过改变对话框css属性,来改变对话框的大小
这种方法需要在对话框显示后进行设置,示例代码如下:
$("#selector").dialog("open");
$("#selector ").parent().css("width","350");
$("#selector ").parent().css("height","250");
2.通过dialog属性进行设置,示例代码如下:
$("#selector").dialog({
autoOpen: false,
modal: true,
width: "450",
height: "250"
});
$("#selector").dialog("open");
或
$("#selector").dialog("open");
$("#selector").dialog("option", "width", "500");
$("#selector").dialog("option", "height", "400");
附录:jquery对话框属性大全
| 名称 | 类型 | 说明 |
|---|---|---|
| autoOpen | 属性 | 为true的时候dialog被调用的时候自动打开dialog窗口,为false的时候,一开始隐藏窗口,直到调用dialog("open")的时候才弹出dialog窗口。默认为true |
| bgiframe | 属性 | 默认为false |
| buttons | 属性 | 显示按钮数组,包含按钮的文本,和按钮点击函数。 示例: $('.selector').dialog({buttons:[{text:"Ok", onclick:function() { $(this).dialog("close"); } ]}); |
| closeOnEscape | 属性 | 为true的时候,点击键盘ESC键关闭dialog,默认为true |
| dialogClass | 属性 | 对话框类型,将被添加到dialog,默认为空 |
| draggable | 属性 | 是否可以使用标题头进行拖动,默认为true |
| resizable | 属性 | 是否可以改变dialog的大小,默认为true |
| width | 属性 | dialog的宽,默认为auto |
| height | 属性 | dialog的高,默认为auto |
| maxWidth | 属性 | dialog可改变的最大宽度,默认为false,为不限 |
| minWidth | 属性 | dialog可改变的最小宽度,默认为150 |
| maxHeight | 属性 | dialog可改变的最大高度,默认为false,为不限 |
| minHeight | 属性 | dialog可改变的最小高度,默认为150 |
| hide | 属性 | 当dialog关闭时候的效果。默认为null,无效果 |
| show | 属性 | 当dialog打开时候的效果。默认为null,无效果 |
| modal | 属性 | 是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口。默认为false不是模式窗口。 |
| title | 属性 | dialog的标题文字,默认为空。 |
| position | 属性 | 显示位置:可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量,也可以是一个字符串数组例如['right','top'] |
| zIndex | 属性 | dialog的zindex值,默认值为1000 |
| stack | 属性 | 默认值为true,当dialog获得焦点时,dialog将在最上面。 |
| beforeclose | 事件 | 当dialog尝试关闭的时候此事件将被触发,如果返回false,那么关闭将被阻止。 示例: $('.selector').dialog({ beforeclose: function(event, ui) { ... }}); |
| close | 事件 | 当dialog被关闭后触发此事件 |
| open | 事件 | 当dialog打开时触发。 |
| focus | 事件 | 当dialog获得焦点时触发。 |
| dragStart | 事件 | 当dialog拖动开始时触发。 |
| drag | 事件 | 当dialog被拖动时触发。 |
| dragStop | 事件 | 当dialog拖动完成时触发。 |
| resizeStart | 事件 | 当dialog开始改变窗体大小时触发。 |
| resize | 事件 | 当dialog被改变大小时触发。 |
| resizeStop | 事件 | 当改变完大小时触发。 |
| destroy | 方法 | dialog销毁, 例:.dialog( 'destroy' ) |
| disable | 方法 | dialog不可用,例:.dialog('disable') |
| enable | 方法 | dialog可用 |
| close | 方法 | 关闭dialog |
| open | 方法 | 打开dialog |
| option | 方法 | 设置和获取dialog属性,例如:.dialog( 'option' , optionName , [value]) ,如果没有value,将是获取。 |
| isOpen | 方法 | 如果dialog打开则返回true,例如:.dialog('isOpen') |
| moveToTop | 方法 | 将dialog移到最上层,例如:.dialog( 'moveToTop' ) |