网页设计技巧：jQuery UI 手风琴组件- 大数跨境

首页

网页设计技巧：jQuery UI 手风琴组件

电商实践

2009-07-30

导读：在您的电子商务网站中添加一个手风琴式交互小部件，可以成为一个出色的设计元素，既能展现专业性，又能提升内容的可读性。在网站设计中，我们常常希望在页面上展示大量内容，但除非您……

为电商网站添加交互式手风琴（Accordion）组件，不仅能提升设计质感、彰显专业性，还能有效优化内容可读性。

在网页设计中，我们常需在有限版面展示大量信息。除文章或博客外，过多的文字堆砌会导致页面过长，降低用户体验。例如产品详情页通常包含描述、图片、数十条评论、洗护说明、库存状态及配送选项等，若全部平铺展示，会造成严重的视觉负担。

此时，“手风琴”组件便是理想解决方案。它允许用户按需展开特定内容，隐藏非当前关注项，类似于垂直标签页，能高效管理密集文案。

本文将演示如何基于 jQuery 库快速实现这一实用小部件。

步骤1：下载必要文件

jQuery UI 手风琴组件即插即用，可显著提升交互体验。需从 jQuery 官网下载三个核心文件：

jQuery 基础库
jQuery UI Core 模块
jQuery UI Effects Core 模块

在下载页面勾选“UI Core”、“Accordion”和“Effects Core”即可。若计划使用其他 jQuery UI 功能，建议一并勾选相关选项。

步骤2：部署至网站目录

下载完成后解压 zip 包，内含 JavaScript 文件、CSS 样式表及示例 HTML 页面。将这些文件按结构上传至网站服务器对应目录。

步骤3：引入资源文件

在 HTML 文档的 <head> 区域添加以下引用代码：

&lt;link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet"/&gt; &lt;script type="text/javascript" src="js/jquery-1.3.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"&gt;&lt;/script&gt;

步骤4：初始化手风琴功能

添加如下 JavaScript 代码以激活组件：

$(function(){ // Accordion $("#accordion").accordion({ header: "h3" }); //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); });

步骤5：补充自定义 CSS

jQuery UI 示例包中的内部样式可用于增强视觉效果。建议将其整合至主样式表中。关键样式代码如下：

/*demo page css*/ .demoHeaders { margin-top: 2em; } #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} ul#icons {margin: 0; padding: 0;} ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} ul#icons span.ui-icon {float: left; margin: 0 4px;}

步骤6：构建 HTML 结构

创建手风琴容器及子元素，其中 <h3> 标签作为各折叠面板的标题触发器：

&lt;div id="accordion"&gt; &lt;div&gt; &lt;h3&gt;&lt;a href="#"&gt;Flash Rebirth #3&lt;/a&gt;&lt;/h3&gt; &lt;div&gt;&lt;img src="images/flash.png" alt="Flash Rebirth" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;h3&gt;&lt;a href="#"&gt;Shazam!&lt;/a&gt;&lt;/h3&gt; &lt;div&gt;&lt;img src="images/shazam.png" alt="Shazam!" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;h3&gt;&lt;a href="#"&gt;Superman, Action Comics&lt;/a&gt;&lt;/h3&gt; &lt;div&gt;&lt;img src="images/superman.png" alt="Superman, Action Comics" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

步骤7：填充实际内容

替换示例中的标题与内容后，即可获得一个兼具美观与实用性的 jQuery UI 手风琴组件，显著提升页面信息密度与浏览体验。

以下为完整示例代码供参考：

&lt;head&gt; &lt;title&gt;Practical eCommerce Mobile Commerce CSS Demonstration&lt;/title&gt; &lt;link href="style.css" rel="stylesheet" type="text/css" media="screen" /&gt; &lt;link href="handheld.css" rel="stylesheet" type="text/css" media="handheld" /&gt; &lt;link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /&gt; &lt;script type="text/javascript" src="js/jquery-1.3.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ // Accordion $("#accordion").accordion({ header: "h3" }); //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); }); &lt;/script&gt; &lt;style type="text/css"&gt; /*demo page css*/ .demoHeaders { margin-top: 2em; } #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} ul#icons {margin: 0; padding: 0;} ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} ul#icons span.ui-icon {float: left; margin: 0 4px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="access"&gt; &lt;a href=""&gt;Skip to content&lt;/a&gt; &lt;a href=""&gt;Skip to search&lt;/a&gt; &lt;/div&gt;&lt;!--end access--&gt; &lt;div id="header"&gt; &lt;a href=""&gt;&lt;img src="images/logo.png" alt="Nashville Comics" /&gt;&lt;/a&gt; &lt;div id="searchbox"&gt; &lt;input id="search" class="input-text" type="text" value="" name=""/&gt; &lt;input type="image" alt="Search" src="images/search.png"/&gt; &lt;/div&gt;&lt;!--end search--&gt; &lt;div id="top-nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Marvel&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;DC&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Darkhorse&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Image&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Verdigo&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Minx&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Zuda&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Space&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;PeC&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--end top-nav--&gt; &lt;/div&gt;&lt;!--end header--&gt; &lt;div id="content"&gt; &lt;div id="hero-section"&gt; &lt;div id="accordion"&gt; &lt;div&gt; &lt;h3&gt;&lt;a href="#"&gt;Flash Rebirth #3&lt;/a&gt;&lt;/h3&gt; &lt;div&gt;&lt;img src="images/flash.png" alt="Flash Rebirth" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;h3&gt;&lt;a href="#"&gt;Shazam!&lt;/a&gt;&lt;/h3&gt; &lt;div&gt;&lt;img src="images/shazam.png" alt="Shazam!" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;h3&gt;&lt;a href="#"&gt;Superman, Action Comics&lt;/a&gt;&lt;/h3&gt; &lt;div&gt;&lt;img src="images/superman.png" alt="Superman, Action Comics" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!--end hero-section--&gt; &lt;ul&gt; &lt;li id="product1"&gt; &lt;img src="images/ac11.png" /&gt; &lt;h3&gt;Action Comics #11&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis.&lt;/p&gt; &lt;span id="price"&gt;$11,990.00&lt;/span&gt; &lt;button class="form-button" onclick="setLocation('')"&gt;&lt;span&gt;Add to Cart&lt;/span&gt;&lt;/button&gt; &lt;/li&gt;&lt;!--end product1--&gt; &lt;li id="product2"&gt; &lt;img src="images/ac27.png" /&gt; &lt;h3&gt;Action Comics #27&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis.&lt;/p&gt; &lt;span id="price"&gt;$9,990.00&lt;/span&gt; &lt;button class="form-button" onclick="setLocation('')"&gt;&lt;span&gt;Add to Cart&lt;/span&gt;&lt;/button&gt; &lt;/li&gt;&lt;!--end product2--&gt; &lt;li id="product3"&gt; &lt;img src="images/ac1.png" /&gt; &lt;h3&gt;Action Comics #1&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis.&lt;/p&gt; &lt;span id="price"&gt;$2,102,990.00&lt;/span&gt; &lt;button class="form-button" onclick="setLocation('')"&gt;&lt;span&gt;Add to Cart&lt;/span&gt;&lt;/button&gt; &lt;/li&gt;&lt;!--end product3--&gt; &lt;li id="product4"&gt; &lt;img src="images/ac2.png" /&gt; &lt;h3&gt;Action Comics #2&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis.&lt;/p&gt; &lt;span id="price"&gt;$898,990.00&lt;/span&gt; &lt;button class="form-button" onclick="setLocation('')"&gt;&lt;span&gt;Add to Cart&lt;/span&gt;&lt;/button&gt; &lt;/li&gt;&lt;!--end product4--&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--end content--&gt; &lt;div id="footer"&gt; &lt;p&gt;Copyright 2009 Practical eCommerce, AKA Nashville Comics, All Rights Reserved&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Marvel&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;DC&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Darkhorse&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Image&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Verdigo&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Minx&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Zuda&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Space&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;PeC&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Privacy&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Customer Service&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--end footer--&gt; &lt;/div&gt;&lt;!--end wrapper--&gt; &lt;/body&gt; &lt;/html&gt;

【声明】内容源于网络

电商实践

内容 8053

粉丝 0

电商实践电商实践

总阅读37.4k

粉丝0

内容8.1k