为首次配置示例设置 jQuery UI

Created: November-22, 2018

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>