jQuery UI 1.10 API 文档

jQuery UI 1.10 API 文档

jQuery UI是一个功能强大的JavaScript库，其中包含了各种各样的用户界面相关的功能，如: 对话框、标签页、拖放、排序、自动完成等等。

基础使用

  1. 首先需要引入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>
  1. 创建一个基本的对话框
$( "#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的一些使用方法，虽然不是非常全面，但是足以实现大多数的基本要求。在实际项目中可以根据情况自行进行配置或者扩展，可以让我们在页面交互设计方面做到事半功倍。

jqueryui教程 jQuery UI API 类别 - UI 核心（UI Core）