JqueryUI - 环境设置

本章将讨论JqueryUI库的下载和设置。我们还将简要研究目录结构及其内容。JqueryUI 库可以在网页中以两种方式使用 -

从其官方网站下载 UI 库

当您打开链接http://jqueryui.com/时，您将看到下载 JqueryUI 库的三个选项 -

自定义下载- 单击此按钮可下载库的自定义版本。
稳定- 单击此按钮可获得 JqueryUI 库的稳定和最新版本。
旧版- 单击此按钮可获得 JqueryUI 库的先前主要版本。

使用下载生成器自定义下载

使用下载生成器，您可以创建自定义构建以仅包含您需要的库部分。您可以根据所选主题下载这个新的自定义版本的 JqueryUI。您将看到以下屏幕（同一页面分为两个图像） -

当您只需要 JqueryUI 库的特定插件或功能时，这非常有用。该版本的目录结构如下图所示 -

未压缩的文件位于development-bundle目录中。未压缩的文件最好在开发或调试时使用；压缩文件可以节省带宽并提高生产性能。

下载稳定

单击“稳定”按钮，将直接转到包含最新版本 JqueryUI 库的源代码、示例和文档的 ZIP 文件。将 ZIP 文件内容提取到jqueryui目录。

该版本包含所有文件，包括所有依赖项、大量演示，甚至是库的单元测试套件。该版本有助于入门。

旧版下载

单击“Legacy”按钮，将直接指向 JqueryUI 库之前主要版本的 ZIP 文件。该版本还包含所有文件，包括所有依赖项、大量演示，甚至是库的单元测试套件。此版本有助于您入门。

从 CDN 下载 UI 库

CDN 或内容交付网络是旨在为用户提供文件服务的服务器网络。如果您在网页中使用 CDN 链接，则会将托管文件的责任从您自己的服务器转移到一系列外部服务器。这还提供了一个优点，即如果网页的访问者已经从同一 CDN 下载了 JqueryUI 的副本，则无需重新下载。

jQuery 基金会、Google 和Microsoft都提供托管 jQuery 核心和 jQuery UI 的 CDN。

由于 CDN 不需要您托管自己的 jQuery 和 jQuery UI 版本，因此它非常适合演示和实验。

我们在本教程中使用该库的 CDN 版本。

例子

现在让我们使用 JqueryUI 编写一个简单的示例。让我们创建一个 HTML 文件，将以下内容复制到 <head> 标签 -

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
   rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

上述代码的详细信息是 -

第一行通过 CSS 添加 jQuery UI 主题（在我们的例子中为ui-lightness）。这个 CSS 将使我们的 UI 变得时尚。
第二行，添加 jQuery 库，因为 jQuery UI 是构建在 jQuery 库之上的。
第三行，添加 jQuery UI 库。这将在您的页面中启用 jQuery UI。

现在让我们向 <head> 标签添加一些内容 -

<script type = "text/javascript">
   $(function () {
      $('#dialogMsg').dialog();
   });
</script>

在<body>中添加这个 -

<body>
   <form id = "form1" runat = "server">
      <div id = "dialogMsg" title = "First JqueryUI Example">
         Hello this is my first JqueryUI example.
      </div>
   </form>
</body>

完整的HTML代码如下。将其另存为myfirstexample.html

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script type = "text/javascript">
         $(function () {
            $('#dialogMsg').dialog();
         });
      </script>
   </head>
   
   <body>
      <form id = "form1" runat = "server">
         <div id = "dialogMsg" title = "First JqueryUI Example">
            Hello this is my first JqueryUI example.
         </div>
      </form>
   </body>
</html>

在浏览器中打开上述页面。它将产生以下屏幕。