JQueryUI插件----手风琴效果(10级学员 赵成举课堂笔记)
2012-03-26 21:46
363 查看
JQueryUI插件----手风琴效果
今天我们介绍一下JQuery中UI插件中的手风琴效果,效果图如下:
像这种能够展开和折叠的div在我们项目的开发中经常需要用到,这样能够使界面更加绚丽,有些数据在这种效果下显示的更加清晰。
这种效果很多插件都可以实现(如:JQueryUi、ExtJS等),今天我们详细介绍一下在JQueryUI中实现这种效果的方法。
下面我们详细介绍在JQueryUI中实现手风琴效果的方法:
第一步:要想使用JQueryUI插件我们需要首先导入JQueryUI所需要的js文件和css文件
jquery-1.7.1.min.js //这是Jquery的js类库
jquery-ui-1.8.18.custom.min.js
//这是JqueryUI所需要的js类库
jquery-ui-1.8.18.custom.css
//这是JqueryUI所需要的css文件
第二步:在页面的body中添加要实现手风琴效果的div
<div> <h1><br></h1> <h1>模仿手风琴效果</h1> </div> <div id="accordion"> <div> <h3><a href="#">First</a></h3> <div>欢迎进入第一个界面</div> </div> <div> <h3><a href="#">Secord</a></h3> <div>欢迎进入第二个界面</div> </div> <div> <h3><a href="#">Third</a></h3> <div>欢迎进入第三个界面</div> </div> </div>
第三步:编写JQueryUI代码(今天这个是重点哦)
<script type="text/javascript">$(document).ready(function() { $("#accordion").accordion({ header:"h3",//用来指定标题头,现在的意思就是指头信息必须包含在h3标签里。 animated : "slide",//设置展开主题的动画效果 event : "click",//设置事件的触发方式mouseover 鼠标移动 click 鼠标点击等默认为click autoHeight:true,//设置自动调整主题高度 icon:{ header:"ui-accordion-header", headerSelected:"ui-accordion-header" },//设置标题的背景图片 active:0//设置默认展开的主题,默认是0 }); //获取手风琴中展开的options主题的值 //var activeVal = $("#accordion").accordion("option","active"); //设置展开option主题的值 //activeVal = $("#accordion").accordion("option","active",2); }); </script>
相关文章推荐
- JqueryUI插件---对话框的使用(10级学员 乔宇课堂总结)
- jQueryUI中Datepicker(日历)插件的介绍和使用(10级学员 郞志课堂笔记)
- jQuery插件应用之--- 选项卡插件的使用(10级学员 韩晓爽课堂笔记)
- Oracle常见数据库对象—序列(10级学员 宋立兴课堂笔记)
- 其他数据对象-----索引(10级学员 林常禹课堂笔记)
- Ext JS框架入门(10级学员 刘志飞课堂笔记)
- Spring第一个案例(10级学员 庞丽课堂总结)
- DML、DCL、DDL、DQL的介绍和区别(10级学员 姚荣旺课堂总结)
- jQueryUI插件实现tabs效果
- Jquery手风琴效果(无插件)
- Spring中的依赖注入(10级学员 韩晓爽课堂总结)
- oracle其他数据对象 --- 视图(10级学员 韩晓爽课堂总结)
- jQueryUI插件实现accordion效果
- jquery手风琴效果插件
- jquery插件手风琴的效果
- JqueryUI插件dialog实现遮罩的效果
- jQuery插件autoComplete介绍(10级学员 张帅鹏总结)
- 精心挑选的12款优秀 jQuery 手风琴效果插件和教程
- jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)(10级学员 林常禹总结)
- jquery插件手风琴效果