JQueryUI插件----手风琴效果(10级学员 赵成举课堂笔记)

标签: divjqueryheaderextjscssfunction
3418人阅读 评论(0) 收藏 举报
分类:

JQueryUI插件----手风琴效果

今天我们介绍一下JQueryUI插件中的手风琴效果,效果图如下:

像这种能够展开和折叠的div在我们项目的开发中经常需要用到,这样能够使界面更加绚丽,有些数据在这种效果下显示的更加清晰。

这种效果很多插件都可以实现(如:JQueryUiExtJS等),今天我们详细介绍一下在JQueryUI中实现这种效果的方法。

下面我们详细介绍在JQueryUI中实现手风琴效果的方法:

第一步:要想使用JQueryUI插件我们需要首先导入JQueryUI所需要的js文件和css文件

jquery-1.7.1.min.js      //这是Jqueryjs类库

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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1893590次
    • 积分:16646
    • 等级:
    • 排名:第604名
    • 原创:209篇
    • 转载:76篇
    • 译文:0篇
    • 评论:703条
    最新评论