折叠菜单(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/ui_header_bg.png);
}

  三. accordion()方法的属性
选项卡方法有两种形式: 1.accordion(options), options 是以对象键值对的形式传参,每
个键值对表示一个选项; 2.accordion('action', param), action 是操作选项卡方法的字符串,
param 则是 options 的某个选项。

$('#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()方法也提供了大量的事件。 这些事件可以给各种不同状态
时提供回调函数。

//当折叠菜单创建时触发
$('#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').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()方法处理的事件方法。

//菜单切换时触发
$('#accordion').on('accordionactivate', function () {
alert('菜单切换时触发! ');
});
//菜单切换前触发
$('#accordion').on('accordionbeforeactivate ', function () {
alert('菜单切换前触发! ');
});

  

20151225jquery学习笔记---折叠菜单UI的更多相关文章

  1. 第一百八十九节,jQueryUI,折叠菜单 UI

    jQueryUI,折叠菜单 UI 学习要点: 1.使用 accordion 2.修改 accordion 样式 3.accordion()方法的属性 4.accordion()方法的事件 5.acco ...

  2. Android:日常学习笔记(8)———探究UI开发(5)

    Android:日常学习笔记(8)———探究UI开发(5) ListView控件的使用 ListView概述 A view that shows items in a vertically scrol ...

  3. Android:日常学习笔记(7)———探究UI开发(4)

    Android:日常学习笔记(7)———探究UI开发(4) UI概述  View 和 ViewGrou Android 应用中的所有用户界面元素都是使用 View 和 ViewGroup 对象构建而成 ...

  4. Android:日常学习笔记(8)———探究UI开发(3)

    Android:日常学习笔记(8)———探究UI开发(3) 详解四种基本布局 前言 布局定义用户界面的视觉结构,如Activity或应用小部件的 UI.您可以通过两种方式声明布局: 在 XML 中声明 ...

  5. Android:日常学习笔记(8)———探究UI开发(2)

    Android:日常学习笔记(8)———探究UI开发(2) 对话框 说明: 对话框是提示用户作出决定或输入额外信息的小窗口. 对话框不会填充屏幕,通常用于需要用户采取行动才能继续执行的模式事件. 提示 ...

  6. Android:日常学习笔记(7)———探究UI开发(1)

    Android:日常学习笔记(7)———探究UI开发(1) 常用控件的使用方法 TextView 说明:TextView是安卓中最为简单的一个控件,常用来在界面上显示一段文本信息. 代码: <T ...

  7. 20151225jquery学习笔记---选项卡UI

    圣诞节快乐,哈哈哈....选项卡(tab),是一种能提供给用户在同一个页面切换不同内容的 UI. 尤其是在页面布局紧凑的页面上,提供了非常好的用户体验.一. 使用 tabs使用 tabs 比较简单,但 ...

  8. 前端学习笔记——移动前端UI选择

    一.jQuery Mobile jQuery Mobile 是jQuery在移动设备上的版本,做为主要针对移动设备的框架来说,它提供一个移动设备平台统一的接口来兼容不同的移动平台,其特性包括: 1.简 ...

  9. jQuery学习笔记(jquery.ui插件)

    官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...

随机推荐

  1. JFinal介绍

    JFinal是基于Java语言的极速Web + ORM框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展.Restful.在拥有Java语言所有优势的同时再拥有Ruby.Py ...

  2. opencv保存选择图像中的区域(二)

    /* * ===================================================================================== * * Filen ...

  3. Codeforces Round #343 (Div. 2) B. Far Relative’s Problem

    题意:n个人,在规定时间范围内,找到最多有多少对男女能一起出面. 思路:ans=max(2*min(一天中有多少个人能出面)) #include<iostream> #include< ...

  4. vlookup使用案例

    http://www.360doc.com/content/13/1119/20/9842991_330586745.shtml

  5. Step-by-Step Guide to Portal Development for Microsoft Dynamics CRM - 摘自网络

    The Challenge Oftentimes in the world of Dynamics CRM, the need arises for non-CRM users to gain acc ...

  6. Java 下 SSL 通信原理及实例

    有关SSL的原理和介绍在网上已经有不少,对于Java下使用keytool生成证书,配置SSL通信的教程也非常多.但如果我们不能够亲自动手做一个SSL Sever和SSL Client,可能就永远也不能 ...

  7. VC++深入详解-第一章学习心得(一)

    句柄是系统为资源分配内存的标识号. 相当于一个指针指向一块内存空间,我暂时理解成一个地址,一个门牌号 HWND 窗口句柄 HICON 图标句柄 HCURSOR 光标句柄 HBRUSH 画刷句柄 消息的 ...

  8. 浅谈js单例模式

    单例模式就是在系统中保存一个实例,就是一个全局变量,在团队开发中,为了实现一些相似的功能,比如不同页面之间的表单验证,可能需求是不一样的,但是呢命名可能一样,这时就会产生冲突,这时候单例模式就能很好的 ...

  9. iOS开发:创建真机调试证书

    关于苹果iOS开发,笔者也是从小白过来的,经历过各种困难和坑,其中就有关于开发证书,生产证书,in_house证书,add_Hoc证书申请过程中的问题,以及上架发布问题.今天就着重说一下关于针对于苹果 ...

  10. Cassandra的登录认证授权

    cassandra的登录验证机制是独自的,数据是集群共享的 参考:http://blog.csdn.net/y_y_y_k_k_k_k/article/category/5943357 1.初始安装启 ...