□ 实现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添加属性或行为。