「jQuery系列」jQuery插件介绍（遮挡面板Accordion、根据输入内容过滤/补全Autocomplete）

这里提供的是Accordion和Autocomplete两个jQuery插件的简单示例。

Accordion (遮挡面板) 插件:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Accordion Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
  $("#accordion").accordion();
});
</script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Content for section 1.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Content for section 2.</p>
  </div>
</div>
 
</body>
</html>

Autocomplete (根据输入内容自动补全/过滤) 插件:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Autocomplete Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $("#tags").autocomplete({
    source: availableTags
  });
});
</script>
</head>
<body>
 
<label for="tags">Tags: </label>
<input id="tags">
 
</body>
</html>

这两个示例都使用了jQuery UI库，这是jQuery的一个扩展库，专门提供了丰富的UI组件，包括上述提到的Accordion和Autocomplete。在实际开发中，你需要确保已经正确引入了jQuery和jQuery UI的库文件。

「jQuery系列」jQuery插件介绍（遮挡面板Accordion、根据输入内容过滤/补全Autocomplete）

评论已关闭

推荐阅读