英文链接源链接 [284]
contenteditable="true"

JqueryUI - Environment Setup 介绍

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

从其官方网站下载UI库

当您打开链接 http://jqueryui.com/时,您会看到三个options下载JqueryUI库-

JqueryUI Download Page
  • Custom Download-单击此按钮以下载库的自定义版本。

  • Stable-单击此按钮可获得JqueryUI库的稳定和最新版本。

  • Legacy-单击此按钮可获得JqueryUI库的先前主要版本。

使用Download Builder Custom Download

使用Download Builder,您可以创建自定义版本,使其仅包含所需的库部分。您可以根据所选主题下载此新的JqueryUI定制版本。您将看到以下屏幕(同一页面分为两个图像)-

JqueryUI Custom Download Page

当您仅需要JqueryUI库的特定插件或功能时,此功能很有用。下图显示了此版本的目录结构-

JqueryUI Custom Directory Structure Page

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

Stable Download

单击"Stable"按钮,这将直接导致一个ZIP文件,其中包含最新版本的JqueryUI库的源,示例和文档。将ZIP文件内容提取到 jqueryui 目录。

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

Legacy Download

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

从CDN下载UI库

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

jQuery Foundation ,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 例">
         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 例">
            Hello this is my first JqueryUI example.
         </div>
      </form>
   </body>
</html>

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

JqueryUI Fist 例 Demo
点我分享笔记