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

来源：互联网发布：怎么用js编写拖拽插件编辑：程序博客网时间：2024/05/17 06:51

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插件实现的手风琴效果也就出来了！