如何在Ajax中使用手风琴小部件HTML5和CSS3编程
时间：2020-02-23 14:46:02 来源:igfitidea点击:
一些最强大的jQuery工具实际上是HTML5和CSS3编程中最容易使用的。
手风琴小部件已成为jQuery UI工具集的极其流行的一部分。
其中你看到了书标题。
第一个的细节可用，但其他书籍的细节是隐藏的。
这种奇妙的效果允许用户在看到整体轮廓时专注于更大的上下文的特定部分。
它被称为手风琴，因为各种各样的碎片延长和收缩，以允许用户专注于一部分而不会失去其位置的位置。
可折叠内容已成为Mac OS和其他流行可用性工具中的系统栏流行的重要可用性工具。
手风琴效果与jQuery非常易于实现：
<!DOCTYPE html>
<html lang = "en-US">
<head>
<title>accordion.html</title>
<meta charset = "UTF-8"
<link rel = "stylesheet"
type = "text/css"
href = "css/ui-lightness/jquery-ui-1.10.3.custom.css"
<script type = "text/javascript"
src = "js/jquery-1.9.1.js"></script>
<script type = "text/javascript"
src = "js/jquery-ui-1.10.3.custom.min.js"></script>
<script type = "text/javascript">
$(init);
function init(){
$("#accordion").accordion();
}
</script>
</head>
<body>
<h1>Accordion Demo</h1>
<div id = "accordion">
<h2><a href = "#">Book I - Creating the HTML Foundation</a></h2>
<ol>
<li>Sound HTML Foundations</li>
<li>It's All About Validation</li>
<li>Choosing your Tools</li>
<li>Managing Information with Lists and Tables</li>
<li>Making Connections with Links</li>
<li>Adding Images</li>
<li>Creating forms</li>
</ol>
<h2><a href = "#">Book II - Styling with CSS</a></h2>
<ol>
<li>Coloring Your World</li>
<li>Styling Text</li>
<li>Selectors, Class, and Style</li>
<li>Borders and Backgrounds</li>
<li>Levels of CSS</li>
</ol>
<h2><a href = "#">Book III - Using Positional CSS for Layout</a></h2>
<ol>
<li>Fun with the Fabulous Float</li>
<li>Building Floating Page Layouts</li>
<li>Styling Lists and Menus</li>
<li>Using alternative Positioning</li>
</ol>
</div>
</body>
</html>
正如我们通过查看代码所看到的，它主要只是HTML。
效果真的很容易完成：
进口所有通常的嫌疑人。
我们需要导入jQuery和jQuery UI JavaScript文件以及主题CSS文件。我们还需要确保CSS可以使用图标和背景访问图像目录，因为它将自动使用一些这些图像。将HTML页面正常构建。
构建一个HTML页面，就像通常这样做一样。注意你想要崩溃的部分。每个元素通常应该是标题标记，所有元素都在同一级别。创建包含整个可折叠内容的DIV。
将所有可折叠内容放在单个div中，用ID。你将把这个div转变为手风琴jquery元素。在每个标题周围添加一个锚点，我们要将其指定为可折叠。
在每个标题周围放置一个空锚标记(<a href="#"> </a>)，以便用作可折叠标题。标志表示锚点将调用同一页面，用作jQuery UI引擎的占位符。我们可以直接在HTML或者jQuery代码中添加锚点。创建jQuery init()函数。
使用正常技术构建jQuery Initializer。将手风琴()方法应用于DIV。
使用jQuery识别包含可折叠内容的DIV并将手风琴()应用于IT：
function init(){
$("#accordion").accordion();
}
