📌  相关文章
📜  jQuery UI切换(1)

📅  最后修改于: 2023-12-03 14:43:14.399000             🧑  作者: Mango

jQuery UI切换

简介

jQuery UI是一套基于jQuery的用户界面库，包含了许多常见的UI组件及效果，如Accordion、Autocomplete、Button、Datepicker、Dialog、Progress Bar等。其中之一就是切换组件，可以用于制作跨浏览器的颜色选项卡、垂直/水平滑块等等。本文将介绍如何使用jQuery UI实现切换效果。

使用方法
引入jQuery和jQuery UI库
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
HTML代码
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">选项卡1</a></li>
    <li><a href="#tabs-2">选项卡2</a></li>
    <li><a href="#tabs-3">选项卡3</a></li>
  </ul>
  <div id="tabs-1">
    <p>内容1</p>
  </div>
  <div id="tabs-2">
    <p>内容2</p>
  </div>
  <div id="tabs-3">
    <p>内容3</p>
  </div>
</div>
JavaScript代码
$(function() {
  $("#tabs").tabs();
});
实例说明

通过上述代码，可以实现选项卡的效果，用户可以通过点击选项卡来切换展示内容，如下图所示：

jquery-ui-tabs-demo

在上述代码中，我们定义了一个id为"tabs"的容器，并将选项卡和内容包含在其中。JavaScript中使用$("#tabs").tabs()对选项卡效果进行初始化。

属性和方法
属性
  • active
    • 功能：获取或设置当前选项卡的索引。
    • 代码示例：
      var activeIndex = $("#tabs").tabs("option", "active"); // 获取当前选项卡的索引
$("#tabs").tabs("option", "active", 1); // 设置当前选项卡为第2个
  • collapsible
    • 功能：获取或设置是否允许折叠所有选项卡。
    • 代码示例：
      var isCollapsible = $("#tabs").tabs("option", "collapsible"); // 获取是否允许折叠所有选项卡
$("#tabs").tabs("option", "collapsible", true); // 允许折叠所有选项卡
方法
  • add()
    • 功能：添加新的选项卡。
    • 参数：label（选项卡的标签文本）、content（选项卡对应的内容，可以是HTML代码）、index（新选项卡的索引，默认为最后一个）
    • 代码示例：
      $("#tabs").tabs("add", "选项卡4", "<p>内容4</p>", 3);
  • disable()
    • 功能：禁用指定的选项卡。
    • 参数：index（要禁用的选项卡的索引）
    • 代码示例：
      $("#tabs").tabs("disable", 2);
  • enable()
    • 功能：启用指定的选项卡。
    • 参数：index（要启用的选项卡的索引）
    • 代码示例：
      $("#tabs").tabs("enable", 2);
  • destroy()
    • 功能：销毁选项卡。
    • 代码示例：
      $("#tabs").tabs("destroy");
总结

使用jQuery UI的切换组件可以很方便地实现选项卡效果，具有丰富的属性和方法，可以灵活地控制选项卡的个数、内容和样式。同时，jQuery UI是开源的，具有良好的兼容性，可以跨平台、跨浏览器地使用。