為首次配置示例設定 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>