jQuery UI 使用学习笔记

介绍

jQuery UI 是一款基于 jQuery 的框架，用于创建交互式 Web 应用程序的用户界面。该框架提供了丰富的 UI 组件和效果，如按钮、对话框、自动完成、时间选择器等，可帮助开发人员轻松地创建专业的 Web 应用程序。

安装

你可以从 jQuery UI 官网下载最新版本的框架，也可以使用 CDN 进行引入。

htmlCopy Code
<!-- 引入 jQuery 核心库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 jQuery UI 核心库 -->
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

<!-- 引入 jQuery UI 样式文件 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">

常用组件

按钮（Button）

按钮是一种常用的 UI 元素，用于触发操作或完成表单提交等相关任务。使用 jQuery UI 的按钮组件可以轻松地创建各种不同样式的按钮。

HTML 代码：

htmlCopy Code
<button id="btnSubmit">提交</button>

JavaScript 代码：

javascriptCopy Code
$(document).ready(function() {
  $("#btnSubmit").button();
});

对话框（Dialog）

对话框是一种常用的 UI 组件，用于向用户显示信息、收集数据等。使用 jQuery UI 的对话框组件可以轻松地创建各种不同样式的对话框。

HTML 代码：

htmlCopy Code
<div id="dialog" title="提示">
  <p>确定要删除该记录吗？</p>
</div>

JavaScript 代码：

javascriptCopy Code
$(document).ready(function() {
  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "是": function() {
        $(this).dialog("close");
        // 执行删除操作
      },
      "否": function() {
        $(this).dialog("close");
      }
    }
  });
  
  $("#btnDelete").click(function() {
     $("#dialog").dialog("open");
  });
});

自动完成（Autocomplete）

自动完成是一种常用的 UI 组件，用于向用户提供输入建议，减少输入错误，并提高数据输入效率。使用 jQuery UI 的自动完成组件可以轻松地创建各种不同样式的自动完成输入框。

HTML 代码：

htmlCopy Code
<label for="txtName">姓名：</label>
<input type="text" id="txtName">

JavaScript 代码：

javascriptCopy Code
$(document).ready(function() {
  var availableTags = ["张三", "李四", "王五", "赵六"];
  
  $("#txtName").autocomplete({
    source: availableTags
  });
});

时间选择器（Datepicker）

时间选择器是一种常用的 UI 组件，用于向用户提供时间选择、日期选择等操作。使用 jQuery UI 的时间选择器组件可以轻松地创建各种不同样式的时间选择器。

HTML 代码：

htmlCopy Code
<label for="txtDate">日期：</label>
<input type="text" id="txtDate">

JavaScript 代码：

javascriptCopy Code
$(document).ready(function() {
  $("#txtDate").datepicker({
    dateFormat: "yy-mm-dd"
  });
});

结束语

本文介绍了 jQuery UI 的安装和常用组件，包括按钮、对话框、自动完成和时间选择器。通过学习本文内容，你可以轻松地应用 jQuery UI 创建专业的 Web 应用程序。