jQuery UI LibraryjQuery UI Library入门


备注

jQuery UI是一个JavaScript UI库,构建于jQuery之上,提供一组用户界面交互,效果和小部件。

版本

发布日期
1.7.0 2009-03-06
1.7.1 2009-03-19
1.7.2 2009-06-12
1.7.4 2010-05-04
1.8.0 2010-03-23
1.8.1 2010-05-04
1.8.2 2010-06-07
1.8.4 2010-08-10
1.8.5 2010-09-17
1.8.6 2010-10-02
1.8.7 2010-12-10
1.8.8 2011-01-14
1.8.9 2011-01-21
1.8.10 2011-02-24
1.8.11 2011-03-18
1.8.12 2011-04-23
1.8.13 2011-05-17
1.8.14 2011-06-28
1.8.15 2011-08-08
16年8月1日 2011-08-18
1.8.17 2012-01-10
1.8.18 2012-02-23
19年8月1日 2012-04-17
1.8.20 2012-04-30
21年8月1日 2012-06-05
22年8月1日 2012-07-24
23年8月1日 2012-08-15
1.8.24 2012-09-28
1.9.0 2012-10-08
1.9.1 2012年10月25日
1.9.2 2012年11月23日
1.10.0 2013年1月17日
1.10.1 2013年2月15日
1.10.2 2013年3月14日
1.10.3 2013年5月3日
1.10.4 2014年1月17日
1.11.0 2014年6月26日
1.11.1 2014年8月13日
1.11.2 2014年10月16日
1.11.3 2015年2月12日
1.11.4 2015-03-11

添加jQuery UI脚本和基本用法

要开始使用jQuery UI库,您需要将jQuery脚本,jQuery UI脚本和jQuery UI样式表添加到HTML中。

首先, 下载 jQuery UI;在下载页面上选择所需的功能。解压缩您的下载,并将jquery-ui.cssjquery-ui.js (和jquery.js )放在一个文件夹中,您可以在其中使用它们(例如,使用其他脚本和样式表)。

jQuery UI依赖于jQuery,所以请记住在jquery-ui.js 之前包含jquery.js

<link rel="stylesheet" href="stylesheets/jquery-ui.css">
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery-ui.js"></script>
 

而已!您现在可以使用jQuery UI。例如,使用带有以下HTML的datepicker:

<input type="text" name="date" id="date">
 

然后使用以下JavaScript:

$("#date").datepicker();
 

哪个会给你一个很好的日期选择器弹出窗口:

截图

有关更多信息,请参阅官方的“入门”gude

为首次配置示例设置jQuery UI

jQuery UI框架有助于扩展和增加jQuery JavaScript库的用户界面控件。

如果您希望使用jQuery UI,则需要将这些库添加到HTML中。一个快速入门的方法是使用Content Delivery Network可用的代码源:

jQuery库

https://code.jquery.com/jquery-3.1.0.js
https://code.jquery.com/ui/1.12.0/jquery-ui.js
 

您可以为jQuery UI选择许多不同的主题,甚至可以选择Roll your Own Theme。对于此示例,我们将使用“平滑度”。您可以通过CSS添加主题。

jQuery UI CSS

https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css
 

把它们放在一起

下载或选择CDN后,您现在需要将这些库和样式表添加到HTML中,以便您的网页现在可以使用jQuery和jQuery UI。加载库的顺序很重要。首先调用jQuery库,然后调用jQuery UI库。由于jQuery UI扩展了jQuery,因此必须在之后调用它。您的HTML可能如下所示。

<html>
<head>
  <title>My First UI</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>
</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
  <li class="ui-state-default">Item 6</li>
  <li class="ui-state-default">Item 7</li>
</ul>
 
</body>
</html>