Jquery UI accordion手风琴菜单
最近学习jQuery,总结了一些心得。
1.引用 <script type="text/javascript" src=jquery.js></script> 需要放在第一引用；
2.脚本的引用需要写<script></script>,不能够写<script />;
3.当调用jQuery的 Plugin 的时候，需要在 jQuery90.ready.function( '需要调用的plugin')写;
4.jQuery Accordion Plugin的用法是：引用
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript" src="js/lib/chili-1.7.pack.js"></script>（可选）
<script type="text/javascript" src="js/jquery.easing.js"></script>（动态效果）
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
5.jQuery Accordion Plugin的用法2：
使用参数的时候需要在
jQuery('#navigation').accordion({
active: false,
header: '.head',
navigation: true,
event: 'mouseover',
fillSpace: true,
animated: 'easeslide'
});
'navigation'为主要起作用的样式名称；
言归正传，先看个例子吧！
大家可以复制下来，看看哦。
<!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 UI accordion手风琴菜单的更多相关文章
- jQuery UI -- Repeater & 手风琴(Accordion)效果
jQuery UI -- Repeater & 手风琴(Accordion)效果 很简单的范例,完全不用写程序 直接套用就能做! 但是,基础不稳的人,连「复制贴上」直接套用, 对您而言,都困难 ...
- jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
- jquery.ui.accordion的修改（支持展开多个）
原文:jquery.ui.accordion的修改(支持展开多个) 背景:原jquery.ui.accordion插件,最多只能展开一个,不能展开多个,后来在网上找到了一个基于它的一个修改版(http ...
- 使用jQuery开发accordion手风琴插件
一.插件效果 手风琴插件常用的功能均已实现,包括:手风琴菜单项的折叠展开效果.选中指定菜单项.判断菜单项是否选中等. 效果如下: 二.插件内部HTML元素结构 <!-- accordioon组件 ...
- boostrap折叠，jquery ui accordion同时打开多个标签
http://caibaojian.com/bootstrap/javascript.html http://www.w3cschool.cc/jqueryui/example-accordion.h ...
- jQuery实现多级手风琴树形下拉菜单（源码）
前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...
- 通过扩展jQuery UI Widget Factory实现手动调整Accordion高度
□ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width&q ...
- [转载]jQuery UI 使用
最近项目中使用了一些插件来做页面,这里把jQuery UI的使用分享出来,希望 对新手有帮助.文章结尾附源码下载. 1 jQuery UI 2 为我所用 2.1 Tabs 2. ...
- 关于jQuery UI 使用心得及技巧
1 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码.直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行j ...
随机推荐
- 【LeetCode题意分析&解答】33. Search in Rotated Sorted Array
Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...
- linux用户管理最常用的三个文件说明（不完整版）
涉及到三个文本文件:/etc/passwd /etc/shadow /etc/group 文件相关: /etc/passwd和用户名相关 /etc/shadow和密码相关 /etc/group和用户所 ...
- IList, ICollection ,IEnumerable AND IEnumerator in C#
IList, ICollection ,IEnumerable 很显然,这些都是集合接口的定义,先看看定义: // 摘要: // 表示可按照索引单独访问的对象的非泛型集合. [ComVisible(t ...
- 无法启动此程序，因为计算机中丢失QtCore4.dll。尝试重新安装该程序以解决此问题（在系统里添加3个路径）
解决方法: 计算机-属性-高级系统设置-高级-环境变量-系统变量-Path 添加 E:\Qt\4.8.5\bin; E:\Qt\4.8.5\qmake; E:\mingw\bin 重启计算机 http ...
- BZOJ 1088 扫雷Mine （递推）
题解:如果确定了第一排前两个数,那么剩下的数是唯一确定的,所以只要分情况讨论即可. #include <cstdio> #include <cstring> int n,a[1 ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
- android基础篇------------java基础(12)（多线程操作）
<一>基本概念理解 1.什么是进程? 进程就是在某种程度上相互隔离,独立运行的程序.一般来说,系统都是支持多进程操作的,这所谓的多进程就是让系统好像同时运行多个程序. 2.什么是线程呢? ...
- .net c# 提交包含文件file 的form表单 获得文件的Stream流
1.前台html代码 要写一个有id的form,可是不能有runat="server"属性.由于一个页面中,有这个属性的form表单仅仅能有一个. 再要有一个有name的ifram ...
- 08.net网站开发（前端）：5.jQuery
开发网站肯定要会JS,嫌代码太难看难学那至少要学会jQuery.当然我见过有些项目纯用服务端控件也是能做出来的,但我相信,那些碰到复杂的需求的话肯定很棘手的.jQuery是对JS和DOM的封装,少量代 ...
- 如何在自己的Activity中去控制EditText的焦点
在进入一个Activity时,如果这个Activity中有EditText,则这个EditText会自动获取焦点,然后就会弹出软键盘,这样给用户体验不是很好.所以一般会通过代码控制让EditText不 ...