13.jQuery UI 折叠菜单UI
来源:互联网 发布:linux安装镜像文件 编辑:程序博客网 时间:2024/05/21 17:59
折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功
能UI。它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了。
一.使用accordion
使用accordion 比较简单,但需要按照指定的规范即可。
html :
<div id="accordion"> <h1>菜单1</h1> <div>内容1</div> <h1>菜单2</h1> <div>内容2</div> <h1>菜单3</h1> <div>内容3</div></div>
jQuery :
$('#accordion').accordion();
二.修改accordion 样式
在显示的accordion 折叠菜单中,在火狐浏览器中打开Firebug 或者右击->查看元素。
这样,可以看看accordion 的样式,根据样式进行修改。为了和网站主题符合,对accordion
的标题背景进行修改。
//无须修改ui 里的CSS,直接用style.css 替代掉.ui-widget-header { background:url(../img/xxx.png);}
三.accordion()方法的属性
选项卡方法有两种形式:1.accordion(options),options 是以对象键值对的形式传
参,每个键值对表示一个选项;2.accordion('action', param),action 是操作选项卡
方法的字符串,param 则是options 的某个选项。
默认值/类型
说明
collapsible
false/布尔值
当设置为true 是,允许菜单折叠对应的内容。默
认值为false,不会关闭对应内容
disabled无/布尔值
默认为false,设置为true 则禁用折叠菜单
event
click/字符串
触发accordion 的事件类型,默认为click。可以
设置mouseover 等其他鼠标事件
active数组和布尔值
如果是数组,初始化时默认显示哪个tab,默认值
为0。如果是布尔值,那么默认是否折叠。条件
必须是collapsible 值为true
heightStylecontent/字符串
默认为auto,即自动根据最高的那个为基准,fill
则是填充一定的可用高度,content 则是根据内容
伸展高度
headerh1/字符串
设置折叠菜单的标题标签
icons
默认图标
设置想要的图标
$('#accordion').accordion({ collapsible : true, disabled : true, event : 'mouseover', active : 1, active : true, heightStyle : 'content', header : 'h3', icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus", },});
三.accordion()方法的事件
除了属性设置外,accordion()方法也提供了大量的事件。这些事件可以给各种不同状
态时提供回调函数。
说明
create
当创建一个折叠菜单时激活此事件。该方法有两个参数
(event, ui),ui 参数有两个子属性header 和panel,得到当
前标题和内容选项的对象
activate当切换一个折叠菜单时,启动此事件。该方法有两个参
数(event, ui),ui 参数有四个子属性newHeader、newPanel、
oldHeader,oldPanel。分别得到的时候新header 对象、
新内容对象、旧header 对象和旧内容对象
beforeActivate当切换一个折叠菜单之前,启动此事件。该方法有两个
参数(event, ui) , ui 参数有四个子属性newHeader 、
newPanel、oldHeader,oldPanel。分别得到的时候新header
对象、新内容对象、旧header 对象和旧内容对象
//当折叠菜单创建时触发$('#accordion').accordion({ create : function (event, ui) { alert($(ui.header.get()).html()); alert($(ui.panel.get()).html()); },});//当切换到一个菜单时触发$('#accordion').accordion({ activate : function (event, ui) { alert($(ui.oldHeader.get()).html()); alert($(ui.oldPanel.get()).html()); alert($(ui.newHeader.get()).html()); alert($(ui.newPanel.get()).html()); },});//当切换到一个菜单之前触发$('#accordion').accordion({ beforeActivate : function (event, ui) { alert($(ui.oldHeader.get()).html()); alert($(ui.oldPanel.get()).html()); alert($(ui.newHeader.get()).html()); alert($(ui.newPanel.get()).html()); },});
返回值
说明
accordion('disable')
jQuery 对象
禁用折叠菜单
accordion('enable')
jQuery 对象
启用折叠菜单
accordion('widget')
jQuery 对象
获取折叠菜单的jQuery 对象
accordion('destroy')
jQuery 对象
删除折叠菜单, 直接阻断了
accordion
accordion('refresh')jQuery 对象
更新折叠菜单,比如高度
accordion('option', param)
一般值
获取options 属性的值
accordion('option', param,value)
jQuery 对象
设置options 属性的值
//禁用折叠菜单$('#accordion').accordion('disable');//启用折叠菜单$('#accordion').accordion('enable');//获取折叠菜单jQuery 对象$('#accordion').accordion('widget');//更新折叠菜单$('#accordion').accordion('refresh');//删除accordion 折叠菜单$('#accordion').accordion('destroy');//得到accordion 的options 值alert($('#accordion').accordion('option', 'active'));//设置accordion 的options 值$('#accordion').accordion('option', 'active', 1);
五.accordion 中使用on()
在accordion 的事件中,提供了使用on()方法处理的事件方法。
说明
accordionactivate
折叠菜单切换时触发
accordionbeforeactivate
折叠菜单切换前触发
//菜单切换时触发$('#accordion').on('accordionactivate', function () { alert('菜单切换时触发!');});//菜单切换前触发$('#accordion').on('accordionbeforeactivate ', function () { alert('菜单切换前触发!');});
0 0
- 13.jQuery UI 折叠菜单UI
- 折叠菜单ui
- Jquery UI ztree菜单
- Jquery UI tabs(选项卡)插件和accordion(折叠菜单)插件的示例
- jQuery学习笔记(六) jQuery UI自动补齐,折叠菜单,Tab标签页和日期拾取器
- Jquery UI accordion手风琴菜单
- JQuery UI菜单改为横向
- Jquery UI 水平菜单css
- UI - 竖向折叠手风琴导航菜单[JS+div+css]
- semantic-ui引入css和js(折叠菜单为例)
- jQuery UI基础----12jQuery UI Widgets-menu(菜单
- jquery-ui 手风琴组件Accordion学习(可全部折叠)
- 【JQuery UI】面板折叠插件——accordion
- jquery ui 实现横向导航菜单
- Jquery Easy-UI 树形菜单的运用
- jquery实现菜单折叠
- Jquery折叠菜单
- jquery实现折叠菜单
- const用法
- 类的扩展
- Linux命令:rcp
- win7+vmware+linux(nat联网)
- 函数直接调用与反射性能对比
- 13.jQuery UI 折叠菜单UI
- vbox修改硬盘uuid方法
- C++静态初始化的顺序
- JavaSe基础XX10——面向对象——[多态]
- 语音合成
- ios视频学习 3.6 OC多态和动态绑定
- Android:startActivityForResult 与 onActivityResult
- HDU-4924-Football Manager(DFS+DP)
- Java Notepad++ Editor