jQuery UI | 标签

简介

jQuery UI 是一个基于 jQuery 的用户界面库，提供了通用的用户界面控件，如对话框、拖放、选项卡、进度条、自动完成等，可以使网站快速搭建出后台管理系统、电子商务系统、博客系统等复杂的界面。

特点

• 完全由 JavaScript 实现，可以方便地与其他 JavaScript 库一同使用。
• 支持大部分流行的浏览器，如 Chrome、Firefox、Safari、IE 等。
• 模块化设计，可根据需要单独引入所需的组件，减小页面加载时间。
• 兼容 jQuery UI ThemeRoller，可定制化主题。

使用方法

1. 引入 jQuery 和 jQuery UI 文件

<!-- 引入 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>
<!-- 引入默认主题 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">

2. 调用组件方法

对话框（Dialog）

<div id="dialog" title="Basic dialog">这是一个对话框。</div>

<script>
  // 初始化对话框
  $("#dialog").dialog({
    autoOpen: false, // 不自动打开
    resizable: false, // 不可改变大小
    width: 400, // 宽度为 400px
    modal: true, // 背景变暗
    buttons: {
      "确定": function() {
        $( this ).dialog( "close" ); // 点击确定按钮，关闭对话框
      },
      "取消": function() {
        $( this ).dialog( "close" ); // 点击取消按钮，关闭对话框
      }
    }
  });

  // 打开对话框
  $("#dialog").dialog("open");
</script>

拖放（Draggable）

<div id="draggable" class="ui-widget-content">
  <p>可以拖拽的元素。</p>
</div>

<script>
  // 初始化可拖放元素
  $("#draggable").draggable();
</script>

选项卡（Tabs）

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">标签页一</a></li>
    <li><a href="#tabs-2">标签页二</a></li>
    <li><a href="#tabs-3">标签页三</a></li>
  </ul>
  <div id="tabs-1">
    <p>这是标签页一。</p>
  </div>
  <div id="tabs-2">
    <p>这是标签页二。</p>
  </div>
  <div id="tabs-3">
    <p>这是标签页三。</p>
  </div>
</div>

<script>
  // 初始化选项卡
  $("#tabs").tabs();
</script>

进度条（Progressbar）

<div id="progressbar"></div>

<script>
  // 初始化进度条
  $("#progressbar").progressbar({
    value: 50 // 初始值为 50%
  });
</script>

自动完成（Autocomplete）

<label for="autocomplete">搜索：</label>
<input id="autocomplete">

<script>
  // 初始化自动完成
  $("#autocomplete").autocomplete({
    source: ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]
  });
</script>

总结

jQuery UI 提供了丰富多彩的界面组件，可以使网站的用户界面更加美观、易用。配合 ThemeRoller 可以实现定制化主题。但是，由于是纯 JavaScript 实现的，存在兼容性问题，需要根据浏览器类型和版本进行兼容性测试。