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

转载 2012年03月26日 21:46:58

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>

相关文章推荐

jQueryUI中Datepicker(日历)插件的介绍和使用(10级学员 郞志课堂笔记)

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 说明 ...

JqueryUI插件---对话框的使用(10级学员 乔宇课堂总结)

Jquery 中的对话框的设置以及使用          对话框:首先,我们知道我们这个jquery中的对话框,我们必须使用jquery的js和css,那么我们必须引入必须的js和css了.   ...

jQuery插件应用之--- 选项卡插件的使用(10级学员 韩晓爽课堂笔记)

jQuery插件应用之 --- 选项卡插件的使用 一  首先来介绍一下选项卡插件的作用 jQuery UI插件折叠板可以实现页面中指定区域的折叠效果,即通过单击某个面板中的标题栏,就会展开相应的内...

其他数据对象-----索引(10级学员 林常禹课堂笔记)

其他数据对象-----索引 什么是索引? 它是一种用于提升查询效率的数据库对象。 索引的分类 索引分为两种,分别为唯一性索引和非唯一性索引。 索引的优点 1.加快数据的检索速度; 2.创...

Ext JS框架入门(10级学员 刘志飞课堂笔记)

Ext JS框架入门 一、概述: ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。 功...

jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)(10级学员 林常禹总结)

jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)     使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚...

jQuery插件autoComplete介绍(10级学员 张帅鹏总结)

jQuery插件autoComplete介绍 概述:AutoComplete为自动填充,展示之意。用户在使用文本框搜索信息时,使用插件的autoplete方法绑定文本框。当在文本框中输入某个字符时,...

Oracl中PL/SQL编程(10级学员 张帅鹏课堂总结)

Oracl中PL/SQL编程 概述: PL/SQL是oracle的专用语言,它对标准的SQL语言的扩展.SQL语句可以嵌套在PL/SQL语言中,并结合处理语句。举例,一般在银行系统中,都是事先写好的...

WebService入门介绍及案例分析(10级学员 庞丽课堂总结)

WebService入门介绍及案例分析 一、WebService入门概述: 1、什么是WebService? WebService,就是基于Web的服务。它使用Web(HTTP)方式,接收和响应...

Extjs继承机制和窗体创建(10级学员 刘根鹏课堂总结)

在extJs中,define方法是用来实现窗体自定义的 以下就是一个define方法的使用,相信看过些方法后,会有更深刻的理解 首先利用create方法创建窗口对象,在4.0中create与new...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)