今天又发现了一个比较好的东西 jQuery UI ，学习学习。官网上面很详细，由于我英文不太好！所以了解的不是很好！如果有高手希望能多指教下。不胜感激！
官网：http://jqueryui.com/demos介绍：
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。

使用方法：
首先导入JS和CSS文件:

<link href="../Styles/jquery-ui-1.8.6.custom.css" mce_href="Styles/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css"/>
    <script src="../Scripts/jquery-1.4.2.min.js" mce_src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui-1.8.6.custom.min.js" mce_src="Scripts/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>

所需文件也可以去官网下载。

每个 jQuery UI 组件提供一个可串联的标准 jQuery 方法，创建实例时，仅需在 jQuery 对象上调用组件方法。如：

$("#login-form").dialog(); // 创建对话框

组件方法可串联使用：

创建可拖动位置、可调整大小的对象

$("#id").draggable().resizable();

创建标签页，设置每5秒自动切换标签

$("#news-panel").tabs().tabs("rotate",5000);

创建一个简单对话框：

<script type="text/javascript>
        $.fx.speeds._default = 1000;
        $(function() {
            $("#dialog").dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode"
            });

            $("#opener").click(function() {
                $("#dialog").dialog("open");
                return false;
            });
        });
script>

页面：

<div class="demo">
            <div id="dialog" title="基本对话框">
                <p>
                    这是一个对话框， 窗口可以移动,缩放和关闭的“x”图标</p>
            </div>
            <button id="opener">
                打开对话框</button>
        </div>

平时使用的时候，如果需要操作多个DIV的显示隐藏会比较麻烦，所以我写了一个简单的方法，传入DIV的ID就可以了：

 <script type="text/javascript" language="javascript"><!--
        //隐藏层，传入DIV的id
        function hideDiv(id) {
            var divid = "#" + id;
            $(divid).dialog("close")
            return false;
        }
        //显示层，传入div的id
        function showDiv(id) {
            var divid = "#" + id;
            $(divid).dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode"
            })
            $(divid).dialog("open");
            return false;
        }
    
// --></script>

调用：

<div id="Div1" title="基本对话框" style="display: none" mce_style="display: none">
                <p>
                    用户名<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                </p>
                <p>
                    密码<asp:TextBox ID="TextBox4" runat="server" TextMode="Password"></asp:TextBox>
                </p>
                <div style="text-align: right" mce_style="text-align: right">
                    <asp:Button ID="Button2" runat="server" Text="提交" OnClientClick="hideDiv('Div1');" /> 
                    <input name="name" type="button" onclick="hideDiv('Div1');" value="关闭" />
                </div>
            </div>
        </div>
        <input name="name" type="button" onclick="showDiv('Div1');" value="显示" />

效果图如下：

   

创建实例时设置属性值

创建组件实例时，以 Object 型参数设置实例的属性。

$(".class").组件名({属性名1:值1,属性名2:值2});
 
如：

$(".class").draggable({axis:"x",cursor:"crosshair"});


 
获得属性值
组件实例化后，可以通过 option 方法获得属性值。

var a = $(".class").组件名("option",属性名);


如：

var axis = $(".class").draggable("option","axis");


 
重设属性值
组件实例化后，可以通过 option 方法重设属性值。

$(".class").组件名("option",属性名,属性值);


 
如：

$(".class").draggable("option","axis","y");


 

方法

open .dialog("open")

显示对话框。

isOpen .dialog("isOpen")

对话框可见时返回 true。

moveToTop .dialog("moveToTop")

使对话框处于最前方。

close .dialog("close")

关闭对话框。

destroy .dialog("destroy")

销毁对话框实例。

disable .dialog("disable")

禁止操作对话框。

enable .dialog("enable")

允许操作对话框。

option .dialog("option",optionName[,value])

得到对话框属性，传递 value 参数时设置属性。

属性参考可以去http://jqueryui.net/dialog/ 中文文档 

作者：Crazy Ma