一旦你已经下载了 jQuery UI,你可以根据需要引入相应的组件,并通过简单的 JavaScript 代码来初始化和使用它们。以下是一些常见的 jQuery UI 组件的使用示例:

1. 按钮(Button)

HTML:
<button id="myButton">Click me</button>

JavaScript:
$(function() {
  // 初始化按钮
  $("#myButton").button();
});

2. 对话框(Dialog)

HTML:
<div id="myDialog" title="Basic Dialog">
  <p>This is the content of the dialog.</p>
</div>

JavaScript:
$(function() {
  // 初始化对话框
  $("#myDialog").dialog();
});

3. 日期选择器(Datepicker)

HTML:
<input type="text" id="datepicker">

JavaScript:
$(function() {
  // 初始化日期选择器
  $("#datepicker").datepicker();
});

4. 自动完成(Autocomplete)

HTML:
<input type="text" id="autocomplete">

JavaScript:
$(function() {
  // 初始化自动完成
  const availableTags = ["Apple", "Banana", "Orange"];
  $("#autocomplete").autocomplete({
    source: availableTags
  });
});

5. 可调整大小(Resizable)

HTML:
<div id="resizable" style="width: 100px; height: 100px; background-color: #ccc;"></div>

JavaScript:
$(function() {
  // 初始化可调整大小的面板
  $("#resizable").resizable();
});

6. 拖放(Draggable 和 Droppable)

HTML:
<div id="draggable" class="ui-widget-content">
  Drag me
</div>

<div id="droppable" class="ui-widget-header">
  Drop here
</div>

JavaScript:
$(function() {
  // 初始化可拖动的元素
  $("#draggable").draggable();

  // 初始化可放置的区域
  $("#droppable").droppable({
    drop: function(event, ui) {
      $(this).addClass("ui-state-highlight").text("Dropped!");
    }
  });
});

这只是一小部分 jQuery UI 组件的使用示例。你可以根据自己的需求查阅 [jQuery UI 官方文档](https://api.jqueryui.com/),以深入了解每个组件的选项和方法。记得在使用 jQuery UI 之前确保已经引入了 jQuery 库。


转载请注明出处:http://www.zyzy.cn/article/detail/13032/jQuery UI