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