jQuery UI 1.10 API 文档
jQuery UI 1.10 API 文档
jQuery UI是一个功能强大的JavaScript库,其中包含了各种各样的用户界面相关的功能,如: 对话框、标签页、拖放、排序、自动完成等等。
基础使用
- 首先需要引入jQuery和jQuery UI的js和css文件。
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
- 创建一个基本的对话框
$( "#my-dialog" ).dialog();
对话框
创建一个对话框
$( "#my-dialog" ).dialog();
更改对话框的主题
$( "#my-dialog" ).dialog({
classes: {
"ui-dialog": "custom-dialog"
}
});
更改对话框的尺寸
$( "#my-dialog" ).dialog({
width: "500px",
height: "auto"
});
关闭对话框
$( "#my-dialog" ).dialog( "close" );
拖放
创建一个可拖放的元素
$( ".my-draggable" ).draggable();
创建一个可拖放的元素,并设置拖放范围
$( ".my-draggable" ).draggable({
containment: ".my-container"
});
限制元素自由拖动的方向
$( ".my-draggable" ).draggable({
axis: "x"
});
排序
创建可排序的元素
$( ".sortable" ).sortable();
可排序元素的拖动过程中的占位符
$( ".sortable" ).sortable({
placeholder: "ui-state-highlight"
});
自动完成
创建自动完成
$( ".my-input" ).autocomplete({
source: availableTags
});
设置自动完成的数据源
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
结论
以上就是jQuery UI 1.10的基础API的一些使用方法,虽然不是非常全面,但是足以实现大多数的基本要求。在实际项目中可以根据情况自行进行配置或者扩展,可以让我们在页面交互设计方面做到事半功倍。