Jquery UI实践系列（一） Modal Dialog

jquery中设置了一系列的UI组件，其中ModalDialog是比较常用的，现在我们来看看如何使用
先看看最后的效果；


首先，导入所需要的css以及js，
 

<link type="text/css"href="base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript"src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript"src="ui/ui.core.js"></script>
  <script type="text/javascript"src="ui/ui.draggable.js"></script>
  <script type="text/javascript"src="ui/ui.resizable.js"></script>
  <script type="text/javascript"src="ui/ui.dialog.js"></script>
然后设置页面
<div id="dialog" title="创建"style="display:none">
  <form>
    <input/>
  </form>
</div>
<buttonid="btn">open</button>
初始化对话框属性
$(function(){

    $("#dialog").dialog(
      { buttons: {"关闭&ESC": function()
                {$(this).dialog("close");
                },
             "保存": function()
                {$(this).dialog("close");
               }
            },
      autoOpen:false,
      modal:true,
      height: 300,
      closeOnEscape:true,
      hide:'shake'

       
      });
      http://blog.sina.com.cn/s/blog_4d4e3d0f0100emvd.html
      $("#btn").bind("click",function(){
  $("#dialog").dialog('open');
    });
});

这样就可以根据我们的设置显示div中模式对话框了 .
当然可以根据我们的需要设置必要的属性:

autoOpen

Type:

Boolean

Default:

true

默认在调用dialog（）时候打开，否则调用dialog('open')时候显示；  buttons

Type:

Object

Default:

{ }

定义显示的按钮极其对应调用的方法；

closeOnEscape

Type:

Boolean

Default:

true

是否采用esc关闭窗体；

draggable

Type:

Boolean

Default:

true

是否可以拖动；

height、widh

Type:

Number

Default:

'auto'

窗体高度、宽，单位pixel

hide，show

Type:

String

Default:

null

隐藏、显示特效；

modal

Type:

Boolean

Default:

false

是否显示为模式窗体；

position

Type:

String, Array

Default:

'center'

显示的位置；

resizable

Type:

Boolean

Default:

true

是否可缩放尺寸；