JueryUI插件的简单应用(一）：介绍及第一个示例

从这篇文章开始，我将用三到四篇文章介绍jquey-ui插件的简单应用，包括插件的下载，安装，基本组件的简单应用。基本组件包括：弹出框，autocomplete，accordion，datepicker

，tabs，slider，progressbar等

   JueryUI是基于jquery库的插件，提供一些形式各样的控件共大家使用，可避免重复开发，比如弹出框，自动完成功能，日期控件，tab控件等，使用非常简单。

插件下载地址：http://jqueryui.com/docs/Getting_Started 点击上方的download即可下载。下载解压后会有一个demo文件夹，运行其中的index.html，基本内容和官网的demo内容一致。

使用dialog对话框：

一．需引入的文件（均可在下载的解压文件中找到）
       1. jquery-1.4.4.min.js

       2. jquery-ui-1.8.8.custom.min.js

       3. development-bundle/themes/base/jquery.ui.all.css

   二.JS   

 <%--弹出框%>

    <script type="text/javascript">

        $(function () {

            var vv = $("#Text1");

            $("#dialog123").dialog({

                autoOpen: false, //autoOpen表示加载页面时不打开模态窗体

                height: 200,

                width: 350,

                modal: true,

                buttons: {

                    "确定": function () { //"确定"为弹出框的确定按钮

                            $("#Text3").val(vv.val());

                            $(this).dialog("close");     

                    },

                   取消: function () {   //取消为弹出框的取消按钮（不许加引号）

                        $(this).dialog("close");

                    }

                }

            });

            $("#Button1").click(function () {  //打开模态窗体

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

            });

        });

</script>

   三、HTML

  <%--弹出框--%>

    <div id="dialogTest">

        <input id="Button1" type="button" value="弹獭?框ò" />

        <input id="Text3" type="text" />

        <div id="dialog123" title="创洹?建¨" style="display: none">

            <input id="Text1" type="text" />

            <input id="Text2" type="text" />

        </div>

    </div>