Jquery UI插件---手风琴效果

最新推荐文章于 2022-11-23 09:38:40 发布

向日葵的眼里只有太阳

最新推荐文章于 2022-11-23 09:38:40 发布

阅读量2.8k

点赞数

分类专栏： jQuery 文章标签： jquery ui div header css function

本文链接：https://blog.csdn.net/smallsundoudou/article/details/7396938

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Jquery UI插件---手风琴效果

今天我们学习了Jquery的UI插件，感觉这个确实是个很好用的制作页面的工具。做出来的页面简单大方，很漂亮。

下面，我就主要来介绍一下我们今天学习的jquery UI插件的一种手风琴的效果。用它可以制作后台的一种手风琴式的菜单，比较不错哦！

那么，下面我们来看一下这个手风琴的效果：如下图所示：

怎么样，。还不错吧。

那么下面让我们来具体的学习一下实现它的代码。

1、首先我们需要将我们所需要的jquery的版本的是1.8的，我们要将所需的CSS文件和JS文件导入到项目中，如下图：

2、下面我们要新建一个JSP的页面。accordion.jsp

首先我们要引入JS文件和CSS文件。

如下代码：

3、下面我们要把显示的页面效果写出来：代码如下：

<body>

    <div>

    <div>

        <h1>模仿手风琴的效果</h1>

       <div id="accordion">

               <h2><a href="#">First</a></h2>

               <div>欢迎进入第一个界面内容</div>

               <h2><a href="#">Second</a></h2>

               <div>欢迎进入第一个界面内容</div>

               <h2><a href="#">Thirst</a></h2>

               <div>欢迎进入第一个界面内容</div>

       </div>

    </div>

  </body>

4、最后我们要将实现效果的jquery的代码写出来，来实现手风琴的效果：

代码如下：代码的一些注释也写在代码中，这里就不做过多的解释了。

<script type="text/javascript">

    //页面加载完毕触发匿名函数

    $(document).ready(function(){

       $("#accordion").accordion({

              

              header:"h2",//header设置头标题标签必须是h2,如果改变则没有这个效果

              animated:"slide",//代表是否有动画效果， false代表没有动画，默认值是：slide.

              event:"mouseover", //event事件处理方式click点击事件 mouseover代表鼠标移动过的事件处理

              autoHeigth:true,

              icon:{

                  header:"ui-accordion-header",

                  headerSelect:"ui-accordion-header"

                  },//设置小图标

              active:1 //设置默认展开主题 1代表的是第二个，默认是0

              //获取手风琴中的options的值

       });

       var activeVal =$("#accordion").accordion("option","active");

       //设置值

       var activeVal =$("#accordion").accordion("option","active",2);

       alter(activeVal);

    });

 </script>

5、测试，得到显示的效果。

相信你做完这些，我们用jqueryUI插件实现的手风琴效果也就出来了！