【第22期】观点:IT 行业加班,到底有没有价值?

jquery accordion 手风琴的使用

转载 2012年03月28日 22:02:05

首先,accordion 的意思是手风琴,发音是 饿考滴儿 ,嘿嘿,我觉得大家在使用的时候应该使用它的正确发音,我想是因为效果像是手风琴吧,所以叫做accordion吧,我开始没有仔细看,还以为是according呢,哈~~,像不像周星驰的经典笑声啊?
原创作品,转载请注明地址。AUTHOR:Jevoly

言归正传,先看个例子吧!
大家可以复制下来,看看哦。

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
<script language="javascript">


$(function(){
//Accordion 先设定属性,标题头就是h3,默认选项是第二个,默认选项是从0开始的,icons是设置图标的,下面有详细讲解
"#accordion").accordion({header:"h3",active:1,event:"mouseover",icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus'};

$('#accordion').bind('accordionchange', function(event, ui) {
alert($(ui.newHeader).html());
});//这里绑定了一个change事件,下面有详解,注意:在这里绑定change必须用“accordionchange”.
</script>
<style type="text/css">
body{font:62.5% "宋体","Trebuchet MS",sans-serif;margin:50px;}
.demoHeaders{margin-top:2em;}
#container1{
width:200px;
}
</style>
</head>
<body>
<div id="container1">
<!--Accordion-->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
   <div >
     <h3 id=1><a href="#">壹</a></h3>
<div>你好,你是个大驴头。</div>
   </div>
   <div >
     <h3 id=2><a href="#">贰</a></h3>
<div>你好不好啊?</div>
   </div>
   <div >
     <h3 id=3><a href="#">叁</a></h3>
<div>你是个大猪头啊。</div>
   </div>
</div>
</div>
</body>
</html>
看完例子,大家来看看手风琴的详细参数吧。哈哈~~哈哈~~哈哈,又出现了一次。
要使用这个插件ui.core.js和ui.accordion.js这两个js文件是必不可少的,当然jquery文件也是必须的,好像是废话哦。
1 选项:
1.1 active 这个参数是设置默认选项的,默认情况下是0,也就是第一个哦。哈哈。
初始化设置例:
$('#accordion').accordion({ active: 2 });
在初始化之后的获取和设置例:
//获取 var active = $('#accordion').accordion('option', 'active');

//设置 $('#accordion').accordion('option', 'active', 2);
1.2 animated 这个参数是设置动画效果 默认选项是‘slide’
可以设置你喜欢的动画效果,或不使用动画效果(设置false),除了默认设置,使用'bounceslide'和'easeslide'需要UI Effects Core 。。。嘿嘿。。。
初始化设置例: $('#accordion').accordion({ animated: 'easeslide' });
在初始化之后的获取和设置例:
//获取
var animated = $('#accordion').accordion('option', 'animated');
//设置
$('#accordion').accordion('option', 'animated', 'easeslide');
1.3 autoHeight 默认是true,如果设置,所有内容部分的高被设定为其中最高内容的高。
 初始化设置:$('#accordion').accordion({ autoHeight: false });
初始化以后的获取或设置
//获取
var autoHeight = $('#accordion').accordion('option', 'autoHeight');
//设置
$('#accordion').accordion('option', 'autoHeight', false);
1.4 clearStyle 默认是false,似乎是清除style,哈哈~~~
初始化设置 $('#accordion').accordion({ clearStyle: true });
初始化后的获取和设置和上面的差不多。。。省略。。。
1.5 event 默认是'click' 如何展开选项。可以设置长双击、鼠标滑过等。。。
初始化设置例:$('#accordion'
).accordion(event:"mouseover");
初始化后的设置请参考上面的 ,此处省略。。。
1.6 fillSpace ,充满父元素的高,默认为false ,使用此项,autoHeight无效。
初始化设置例:$('#accordion').accordion({ fillSpace: true });
初始化后的获取和设置请参考上面的 ,此处省略。。。
1.7 header,设置头元素(见上面实例),默认值为:'> li > :first-child,> :not(li):even' 
此处省略,自己理解。。。
1.8 icon,设置小图标,默认值为: { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' } 
另外,请看下面的英国字儿~~~只可意会不可言传。。。
Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by 
jQuery UI ThemeRoller

初始化设置例:$('#accordion').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });
初始化后的获取和设置省略。。。
1.9 navigation 和navigationFilter暂时不知道到底是做什么用的,回头再说吧。。。

2 事件
2.1 change事件 accordion改变时触发的事件,有两种绑定方法
第一种:
$('#accordion').bind('accordionchange', function(event, ui) {
ui.newHeader // jQuery 对象, 激活 header
ui.oldHeader // jQuery 对象, 之前 header
ui.newContent // jQuery 对象, 激活 content
ui.oldContent // jQuery 对象, 之前 content
});这种方法在前面的例子中已经都有喽~~
第二种:
$('#accordion').accordion({
   change: function(event, ui) { ... }
}); 看清楚了吧。哈哈。

3 方法
3.1 destroy :毁灭地球...
使用方法:.accordion( 'destroy' ) 
3.2 disable:accordion不可用,使之无效。
使用方法:.accordion('disable')
3.3 enable: 可用,使之有效,使用方法:略...
3.4 option:参数,使用方法:前面都已经用过了,例:.accordion( 'option' , optionName , [value] ) 
3.5 activate:也是设置默认选项,和参数active 作用一样。例:.accordion( 'activate' , index )

举报

相关文章推荐

JQuery 插件之-Accordion的示例及相关配置

效果:点击头部,展开、折叠对应的内容元素,有点类似于tabs插件,只不过是以行的形式展示。此插件同一时间内只允许展开一个内容页,此控件的效果是很不错的。 官方示例地址:http://jqueryui...

jquery ui accordion的详细参数

1.1 active   这个参数是设置默认选项的,默认情况下是0,也就是第一个哦。初始化设置例:$('#accordion').accordion({ active: 2 }); 在初始化之后的...
  • smeyou
  • smeyou
  • 2011-09-06 10:24
  • 10287

jquery easyui Accordion 动态生成菜单

package com.kerun.app.action; import java.util.ArrayList; import java.util.List; import org.s...

jquery.ui.accordion的修改(支持展开多个)

背景:原jquery.ui.accordion插件,最多只能展开一个,不能展开多个,后来在网上找到了一个基于它的一个修改版(https://code.google.com/p/jquery-multi...

【jQueryUI】利用accordion、tabs与自定义面板布局

下面将用以下的一个布局,说明jQueryUI中accordion、tabs的应用,如何用.ui-widget-content与.ui-widget-header两个元素搞出面板。 以下是在IE8的测...

Simple JQuery Accordion menu

function initMenus() { $(ul.menu ul).hide(); $.each($(ul.menu), function(){ var cookie = $.cookie(th...

JQuery第一弹:accordion菜单详解

PS:1.需要用户有点Jquery核心插件的基础2.所有讲解都不包含CSS样式,只说动态效果,样式根据自己实际情况修改一.导入Jquery核心插件二.导入与accordion菜单相关的UI插件(ui....

jQuery Accordion

jQuery Accordion jQuery Accordion 插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。 ...

jquery mutillevel Accordion 多级折叠组件 多级折叠菜单

用jquery 写的折叠组件,可以实现多级折叠,可以通过json文件加载数据。可实现多级折叠菜单 jquery  mutillevel Accordion 多级折叠组件 多级折叠菜单 其中参数hp...
  • hgyu
  • hgyu
  • 2011-08-29 22:44
  • 1031

jQuery Easy UI Accordion(可伸缩面板)组件

Accordion 可伸缩面板组件,基于panel,示例如下: Document $(function(){ $('#ac').accordio...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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