JQuery UI - Accordion Widget

字数 604阅读 213

首先,我们来看一下用 Accordion 做出来的效果

demo.gif

简单使用

可以看到,这么一个效果还是很美观的,那么我们应该怎么使用呢?首先我们需要 JQuery UI 提供给我们的代码资源,可以去 jqueryui.com 前去下载,然后在项目中引用。而且我们的项目还必须依赖于 JQuery ,所以我们需要引入三个文件,如下所示。

<script src="jquery-3.0.0.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">

好了,依赖文件都引入完毕了,那么我们下面就用代码去做出这么一个效果,说是我们自己写,其实是别人写好了我们用而已。

<div id="Accordion">
    <h3>Java</h3>
    <div>
        <p>

        </p>
    </div>
    <h3>Android</h3>
    <div>
        <p>

        </p>
    </div>
    <h3>JQuery</h3>
    <div>
        <p>
        </p>
    </div>
</div>

这里我将 p 标签下的内容给去掉了,太占行数了,可以自行指定,下面就是书写我们自己的 JS 代码。

<script>
    $(document).ready(function () {
        $("#Accordion").accordion();
    })
</script>

对的,只需要这么一行,就会出现这么炫酷的效果。不过这里会出现一个问题,你会发现效果不和上图一样,这里的标题左边并没有那个动态的小图标,其实想一下也应该知道,我们本地并没有图标资源,怎么可能会有图标显示出来呢?所以,在这里我们需要将一开始引入的css 替换掉,如下

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

这个时候的效果就和图中完全相同了。下面,我们将会讲一些Accordion 属性。

其他属性

以上 Accordion 效果必须有一个标题是展开的,也就是说我们无法将所有的标题都隐藏,有的时候我们并不想要这么一个效果,那么我们可以这么设置

    $(document).ready(function () {
        $("#Accordion").accordion({
            collapsible:true
        });
    })

事实上,我们可以通过两种方式为我们的方法设置属性,以上只是其中一种,还有一种如下所示

    $("#Accordion").accordion();
    $("#Accordion").accordion("option", "collapsible", true);

区别在哪里呢?很明显前一种在中括号中我们可以同时设置多个属性的值,而在后一种主要是设置一种属性的值。

当然,我们还可以指定图标的样式,以上显示的效果只是默认的一种而已,JQuery UI 官网上给我们提供了许多免费的图标样式,我们也可以手动进行指定

    $("#Accordion").accordion({
        icons: {header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s"}
    });

推荐阅读更多精彩内容