jQuery UI目前的版本已经更新到了1.8.7。个人感觉和easyui相比起来，jQuery UI在界面的美观程度和可定制型更强一些。所以再次将一些jQuery UI组件的用法说明一下，方便日后查阅。也方面没接触jQuery UI的人能早日使用jQuery UI套件

(一)首先来说jQuery UI使用频率较高dialog组件：

dialog就是我们常说的弹出层，应用还是比较广泛的，比如：可以使用弹出层做登录、注册和消息提示等功能

下面来详细说说dialog的使用方法

在官方提供的官方文档和示例中有六种形式的dialog,但是前五种都是大同小异，包括在编写代码方面也仅仅是多设置两个属性而已，没什么太大的不同，先来看看使用jQuery UI组件的时候需要那些前期贮备工作。

首先将需要依赖的js文件导入到你的页面中。需要依赖的文件如下：

jquery-ui-1.8.7.custom.css这个是jQuery UI套件的CSS样式表，demos.css这个是jQuery UIdemo中用到的CSS样式，因为我用到了这些样式所以将它导入进来，如果大家不需要可以不导这个文件，jquery-1.4.4.min.js这个不用说了吧，jQuery的核心文件，没有它一切工作都无法开展。切记一点：一定要在引入其他的js文件之前引入jquery-1.4.4.min.js文件，别问为什么，懂点jQuery的人都能想的到。jquery-ui-1.8.7.custom.min.js这个是jQueryUI的核心js文件，也是必须的。有了上述的引用后就可以在你的页面中使用jQuery UI了。

先看一个超级简单的DEMO：

<div id="dialog" title="basic dialog"><p>这是一个采用默认样式的对话框</p></div>

在页面中加入上边的一行代码，然后加入一个script标签对，在脚本写如下代码：

$(function(){

       $("#dialog").dialog();

});

打开你的页面看一下吧，如果没什么意外你会看到一个类似这样的对话框

简单吧，这就是一个弹出层，其中div的title被当作了dialog的title,右上角有关闭的xx，右下角则可以拖拽改变大小

这就是一个默认的dialog，虽然我们没有为它指定高度和宽度，但是它有默认的值，在我们没有设定情况下dialog默认会弹出在屏幕的中央，大小也是有默认值的，可以改变大小，显示关闭按钮，这都是默认的样式，那么如果我们想自己定制一下dialog，不想让他这样显示该如何做？下面介绍一些属性和方法来改变一下这个dialog，用到的属性如下：

autoOpen,modal,buttons，根据这些属性我们来定制一个不会自动打开(当点击按钮或者通过其他的事件来触发弹出dialog的事件)，并且带有遮罩(模式窗体)和按钮的dialog

buttons属性是一个复合属性，使用形式如下：buttons{ok:function(){点击按钮执行的事件},cancel:function(){点击按钮执行的事件}}

其中ok是按钮显示的文本，而function是点击按钮后执行的事件。注意，在ok和function之间有冒号:，虽然按钮可以为中文，比如:确定:function(){}这种形式，但是切记，在按钮文本和function之间的冒号一定是英文字符下的冒号，不要写成中文的全角冒号，否则会有错误。

将刚才的js脚本替换为：

$("#dialog-form").dialog({

        autoOpen:false,
        modal:true,

        buttons:{

               登录:function(){

                      alert("您点击了登录按钮");

              }

        }

})

//控制打开dialog的方法

function open_dialog(){

       $("#dialog-form").dialog("open");

}

这里的dialog将带有一个登录按钮。并且为带遮罩的模式窗体。默认不显示。所以我们需要在页面添加一个按钮，通过点击按钮来控制打开dialog

<input type="button" value="打开" onclick="open_dialog();"/>

这样当点击这个按钮时会打开这个dialog.打开后的dialog如下图：

可能有的人会说为什么这个显示的颜色和样式都第一个不一样呢？

因为jQueryUI组件的皮肤都是可定制的，而不是一尘不变。可以根据需要选择自己喜欢的皮肤样式来使用，在jQueryUI的官方网站上有UI皮肤下载的，可以先预览皮肤的效果再下载，下载后只需要将当前项目中的CSS文件即可实现切换皮肤

那么在dialog中显示的username:   password:     和两个文本框又是从何而来的？

这是自己写的一个表单，用于让用户登录的表单，还记得吗？dialog是通过在页面中指定一个div，然后得到该div对象.dialog()就可以生成dialog了，同样的道理，我们可以在这个div中加入自己想要的表单域。这个就是我自己定制的登录表单。样式采用了UI提供的样式，当然，如果你觉得这个样式不好同样是可以自己定制自己的CSS来使用。完整的表单代码如下：

<!-- 登录区域表单信息 -->

    <div id="dialog-form" class="ui-widget ui-widget-content ui-corner-all" title="用户登录">

        <p id="login_tip"></p>

        <form id="login-form">

        <fieldset>