20151225jquery学习笔记---折叠菜单UI
折叠菜单(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的更多相关文章
- 第一百八十九节,jQueryUI,折叠菜单 UI
jQueryUI,折叠菜单 UI 学习要点: 1.使用 accordion 2.修改 accordion 样式 3.accordion()方法的属性 4.accordion()方法的事件 5.acco ...
- Android:日常学习笔记(8)———探究UI开发(5)
Android:日常学习笔记(8)———探究UI开发(5) ListView控件的使用 ListView概述 A view that shows items in a vertically scrol ...
- Android:日常学习笔记(7)———探究UI开发(4)
Android:日常学习笔记(7)———探究UI开发(4) UI概述 View 和 ViewGrou Android 应用中的所有用户界面元素都是使用 View 和 ViewGroup 对象构建而成 ...
- Android:日常学习笔记(8)———探究UI开发(3)
Android:日常学习笔记(8)———探究UI开发(3) 详解四种基本布局 前言 布局定义用户界面的视觉结构,如Activity或应用小部件的 UI.您可以通过两种方式声明布局: 在 XML 中声明 ...
- Android:日常学习笔记(8)———探究UI开发(2)
Android:日常学习笔记(8)———探究UI开发(2) 对话框 说明: 对话框是提示用户作出决定或输入额外信息的小窗口. 对话框不会填充屏幕,通常用于需要用户采取行动才能继续执行的模式事件. 提示 ...
- Android:日常学习笔记(7)———探究UI开发(1)
Android:日常学习笔记(7)———探究UI开发(1) 常用控件的使用方法 TextView 说明:TextView是安卓中最为简单的一个控件,常用来在界面上显示一段文本信息. 代码: <T ...
- 20151225jquery学习笔记---选项卡UI
圣诞节快乐,哈哈哈....选项卡(tab),是一种能提供给用户在同一个页面切换不同内容的 UI. 尤其是在页面布局紧凑的页面上,提供了非常好的用户体验.一. 使用 tabs使用 tabs 比较简单,但 ...
- 前端学习笔记——移动前端UI选择
一.jQuery Mobile jQuery Mobile 是jQuery在移动设备上的版本,做为主要针对移动设备的框架来说,它提供一个移动设备平台统一的接口来兼容不同的移动平台,其特性包括: 1.简 ...
- jQuery学习笔记(jquery.ui插件)
官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...
随机推荐
- Java C# MD5 加密串一致性
Java C# MD5 加密串一致性 Java public final static String md5(String s) { char hexDigits[] = { '0', '1', ...
- VS2010如何调试IIS上的网站
通常,我们在Visual Studio里调试ASP.NET网站,都是加个断点,然后按F5,在VS自带的虚拟服务器下调试的.但有时候,VS自带的服务器弱爆了,无法满足一些特定情况的要求,我们必须把网站放 ...
- ruby编程语言-学习笔记3(第4章 表达式和操作符)
4.6 操作符 了解优先级很重要 位移操作符 (0b1011)<< 1 # ==> "10110" 11 << 1 = 22 ...
- 【原】Comparator和Comparable的联系与区别
1.知识点了解 Comparator和Comparable都是用用来实现集合中元素的比较.排序的,所以,经常在集合外定义Comparator接口的方法和集合内实现Comparable接口的方法中实现排 ...
- apple公司的潮起潮落——浪潮之巅
今天代码写不下去的时候,躺在床上看了一下浪潮之巅.翻了一下书目,选了apple公司那一篇. 其实apple公司的事情我已经听过不止一次了,但是每次都是间间断断地听说,都没有系统地了解它到底是经历了怎么 ...
- POJ1423 - Big Number(Stirling公式)
题目大意 求N!有多少位 题解 用公式直接秒杀... 代码: #include<iostream> #include<cmath> using namespace std; # ...
- 扫描线专题 hdu1255
hdu1255 求覆盖至少两次的面积,和直接求覆盖面积比,就是保证cover>1就可以了. 没有进行lazy操作,因为每一次更新伴随着询问,感觉没有必要.982MS水过. #include &l ...
- epoll原理解释(转)
转自:http://yaocoder.blog.51cto.com/2668309/888374 首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作的内核对象. ...
- poj 1144 Network【双连通分量求割点总数】
Network Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 11042 Accepted: 5100 Descript ...
- HDU 4452 Running Rabbits (模拟题)
题意: 有两只兔子,一只在左上角,一只在右上角,两只兔子有自己的移动速度(每小时),和初始移动方向. 现在有3种可能让他们转向:撞墙:移动过程中撞墙,掉头走未完成的路. 相碰: 两只兔子在K点整(即处 ...