网页设计技巧:jQuery UI Accordion Widget

2021年2月24日07:40:25 发表评论 57 次浏览

添加互动你的电子商务网站的手风琴小部件可以提供出色的设计功能, 传达专业知识并使你的内容更具可读性。

在网站设计中, 当我们希望页面上有很多内容时, 有很多实例, 但是, 除非你要创建文章或博客文章, 否则过多的文本会导致页面滚动, 从而使内容的可读性降低。

例如, 假设你有一个产品详细信息页面, 其中包含产品说明, 产品图片, 20条或更多客户评论, 洗涤和保养说明, 库存可用性, 相关产品以及运输选项。页面类型(例如, 联系页面, 甚至是产品详细信息页面)上的很多文本通常滚动效果不佳。那么, 你如何管理所有副本?

一种解决方案是使用设计者所谓的手风琴, 它可以同时显示一些内容, 同时隐藏其他内容。你可以将其视为垂直选项卡。

在此版本的"网页设计技巧", 我将向你展示如何快速实现基于jQuery库的手风琴小部件。

视频:实现jQuery手风琴小部件

步骤1:下载

jQuery用户界面手风琴小部件易于使用, 易于实施, 可以为你的网站增加上述交互性和可读性。为了使手风琴工作, 你将需要从jQuery站点下载三个文件, 包括jQuery库, jQuery UI核心和jQuery UI Effects核心。

你可以从jQuery UI下载页面。为此, 你只需要选择三个复选框-UI Core, Accordion和Effects Core, 但是如果你打算在网站上使用其他jQuery UI效果或小部件, 则可能需要选择更多选项, 然后再下载。

步骤2:将jQuery UI文件添加到你网站的目录中

下载文件时, 你会收到一个包含JavaScript文件, 一些CSS甚至HTML页面的zip文件。我们将把它移到我们的网站层次结构中。

步骤3:链接jQuery文件和用户界面CSS

只需将以下代码添加到<头>HTML文档的一部分。

<code>&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;
</code>

步骤4:添加手风琴功能

现在添加此手风琴功能:

$(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下载中包含的HTML具有内部CSS, 以补充外部样式。定制手风琴小部件时, 你可能需要将这些样式集成到主CSS中。无论你如何实现这些样式, 都在这里。

<code>        /*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;}
</code>

第6步:添加手风琴<div>和它的孩子

接下来, 我们需要创建手风琴小部件将修改的HTML。这<h3>标签代表手风琴中每一层的内容标题。

<code>    &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="网页设计技巧:jQuery UI Accordion Widget" 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="网页设计技巧:jQuery UI Accordion Widget" 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="网页设计技巧:jQuery UI Accordion Widget" alt="Superman, Action Comics" /&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code>

步骤7:添加你的内容

现在, 只需将你的标题和内容添加到手风琴的每一层中, 你就会拥有一个出色的jQuery UI小部件, 该小部件有助于使你的网站更易于阅读和更具交互性。

我在下面的演示中包含了示例页面中的所有代码。请务必观看视频, 以了解我如何实现此小部件。

<code>&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="网页设计技巧:jQuery UI Accordion Widget" 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" alt="网页设计技巧:jQuery UI Accordion Widget"/&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="网页设计技巧:jQuery UI Accordion Widget" 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="网页设计技巧:jQuery UI Accordion Widget" 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="网页设计技巧:jQuery UI Accordion Widget" 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" alt="网页设计技巧:jQuery UI Accordion Widget" /&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" alt="网页设计技巧:jQuery UI Accordion Widget" /&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" alt="网页设计技巧:jQuery UI Accordion Widget" /&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" alt="网页设计技巧:jQuery UI Accordion Widget" /&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;
</code>
一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: