Jquery UI插件---手风琴效果
今天我们学习了Jquery的UI插件,感觉这个确实是个很好用的制作页面的工具。做出来的页面简单大方,很漂亮。
下面,我就主要来介绍一下我们今天学习的jquery UI插件的一种手风琴的效果。用它可以制作后台的一种手风琴式的菜单,比较不错哦!
那么,下面我们来看一下这个手风琴的效果:如下图所示:
怎么样,。还不错吧。
那么下面让我们来具体的学习一下实现它的代码。
1、 首先我们需要将我们所需要的jquery的版本的是1.8的,我们要将所需的CSS文件和JS文件导入到项目中,如下图:
2、 下面我们要新建一个JSP的页面。accordion.jsp
首先我们要引入JS文件和CSS文件。
如下代码:
<!-- 引入相应的jqueryUI的类库文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.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插件实现的手风琴效果也就出来了!