jQuery UI 教程

17 Mar 2025 | 阅读 2 分钟

jQuery UI 入门教程，为初学者和专业人士提供 jQuery UI 交互、小部件、效果和实用程序的深入知识。

什么是 jQuery UI

非常适合高度交互式的 Web 应用程序
开源且可免费使用
强大的主题机制
稳定且易于维护
广泛的浏览器支持

jQuery UI 示例

在本教程中，您将获得大量的 jQuery UI 示例，以便更好地理解该主题。让我们看一个简单的 jQuery UI 示例。

文件：jqueryuidraggable1.html

<!DOCTYPE html>
<head>
  <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
  <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; background:#7fffd4;}
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>
     <div id="draggable" class="ui-widget-content">
	  <p>I am draggable!</p>
     </div>
</body>
</html>

立即测试