通过扩展jQuery UI Widget Factory实现手动调整Accordion高度
□ 实现Accordion高度一致
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<style type="text/css">
#word-cup {
width: 300px;
}
</style>
<script type="text/javascript">
$(function() {
$('#word-cup').accordion({
event: "mouseover",
collapsible: true,
active: 1,
heightStyle: 'auto'
});
});
</script>
</head>
<body>
<div id="word-cup">
<h3>世界杯第一天</h3>
<p>
在揭幕战中,巴西队将在圣保罗迎战克罗地亚队。
</p> <h3>世界杯第二天</h3>
<p>
今天的焦点之战是上届世界冠军巴西队将在萨尔瓦多对战"无冕之王"荷兰队。此外,墨西哥对战喀麦隆,智利对战澳大利亚队。
</p>
</div>
</body>
</html>
可见,当把heightStyle属性设置成auto,每块区域的高度是一样的,且与最大高度保持一致:
□ 实现Accordion高度自适应
当把heightStyle属性设置成 content,高度随着内容而变化:
$(function() {
$('#word-cup').accordion({
event: "mouseover",
collapsible: true,
active: 1,
heightStyle: 'content'
});
});
□ 实现Accordion高度手动可调
而现在,我们想实现一个功能:就是让Accordian的底部可以被拖动,从而改变高度。
我们可以通过扩展"jQuery UI Widget Factory"来实现。Widget可以看作是一个工厂或函数,可以用它来创建所有的UI。如下扩展:
(function($) {
$.widget("custom.newAccordion", $.ui.accordion, {
options: {
resizable: true //默认为true
},
_create: function() { //重写构造_create构造函数,所有带下划线的是widget的私有函数
this._super(); //确保accordion的默认功能生效
if (!this.options.resizable) {
return;
}
this.headers.next().resizable({ handles: "s" }) //拖动每个Accordion的bottom调整高度
.css({
"margin-bottom": "5px",
"border-bottom": "1px dashed",
"overflow": "hidden"
});
},
_destroy: function() { //移除扩展功能 恢复到先前状态
this._super();
if (!this.options.resizable) {
return;
}
this.headers.next()
.resizable("destroy")
.css({
"margin-bottom": "2px",
"border-bottom": "1px solid",
"overflow": ""
});
},
});
})(jQuery);
调用widget的扩展方法:
$('#word-cup').newAccordion({});
Accordion有了扩展方法赋予的特征,比如底部虚线:
而且可以通过Accordion拖动底部来调整高度:
□ 总结
通过扩展"jQuery UI Widget Factory",可以为jQuery 的各种UI添加属性或行为。
参考资料:
Extending the jQuery UI Accordion
通过扩展jQuery UI Widget Factory实现手动调整Accordion高度的更多相关文章
- 使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins)
使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) Note 这一章节的内容是基于 Scott Gonzalez 一篇博客 Building ...
- jQuery UI Widget Factory
https://learn.jquery.com/jquery-ui/widget-factory/ The jQuery UI Widget Factory is an extensible bas ...
- JQuery UI Widget Factory官方Demo
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- jquery ui widget 源代码分析
jquery ui 的全部组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,有用它能实现一致的API.创建有状态的插件,而无需关心插件的内部转换. $.wi ...
- jQuery UI Widget(1.8.1)工作原理--转载
先看下代码的相关注释: /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/abo ...
- jQuery UI Widget 原理
先看下代码的相关注释: /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/abo ...
- jQuery UI Widget(1.8.1)工作原理
/*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) * Dual l ...
- Jquery ui widget开发
Jquery ui 提供了一些基本的widget,但是他提供了很好的机制来创建widget.在jquery css framework中包含了基本的css样式(视觉和感觉诸如颜色,字体大小,图标等), ...
- jquery.ui.widget详解
案例详解 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
随机推荐
- delphi TComponent类(1)
来自:http://blog.csdn.net/lailai186/article/details/7442383 ------------------------------------------ ...
- JDBC核心API
JDBC核心API在java.sql.*和javax.sql.* 1.Driver接口:表示Java驱动程序接口,具体的数据库厂商要实现其此接口 connect(url.propertis):连接数据 ...
- python学习day4之路
装饰器(http://egon09.blog.51cto.com/9161406/1836763) 1.装饰器:本质是函数: 装饰器(装饰其他函数),就是为其他函数添加附加功能: 原则:1.不能修改被 ...
- Hadoop自定义类型处理手机上网日志
job提交源码分析 在eclipse中的写的代码如何提交作业到JobTracker中的哪?(1)在eclipse中调用的job.waitForCompletion(true)实际上执行如下方法 con ...
- nginx卸载与安装
1.卸载 在前面曾经安装过一次,这一次卸载再重新安装. 直接删除文件夹 2.更新软件源 3.依赖包安装 4.下载源码包并解压 5.增加用户组 6.安装 三个步骤 ./configure make ma ...
- Failed to load JavaHL Library. SVN
以前使用的电脑是32位的,安装的svn可以正常使用,但是现在的电脑室64位的,安装好svn后,把项目提交到svn的过程中,总是弹出来一个错误的对话框: Failed to load JavaHL Li ...
- Hadoop错误1(Text类型与String类型)
在此类的博客中,博主主要记录的是在Hadoop实践过程中遇到的一些错误,先上一个代码 protected void map(Object key,Text value, Context context ...
- VMware安装CentOS7教程
首先安装VM,VM破解版和激活版的百度有很多,随意下载一个 下载CentOS7 地址1:https://mirrors.btte.net/centos/7/isos/x86_64/ 地址2:http: ...
- [代码审计]eml企业通讯录管理系统v5.0 存在sql注入
0x00 前言 上周五的时候想练练手,随便找了个系统下载下来看看. 然后发现还有VIP版本,但是VIP要钱,看了一下演示站,貌似也没有什么改变,多了个导入功能?没细看. 搜了一下发现这个系统,压根就没 ...
- C#中的特性 (Attribute) 入门 (一)
C#中的特性 (Attribute) 入门 (一) 饮水思源 http://www.cnblogs.com/Wind-Eagle/archive/2008/12/10/1351746.html htt ...