天天看点

通过扩展jQuery UI Widget Factory实现手动调整Accordion高度

□ 实现Accordion高度一致

可见,当把heightStyle属性设置成auto,每块区域的高度是一样的,且与最大高度保持一致:

□ 实现Accordion高度自适应

当把heightStyle属性设置成 content,高度随着内容而变化:

实现Accordion高度手动可调

而现在,我们想实现一个功能:就是让Accordian的底部可以被拖动,从而改变高度。

我们可以通过扩展"jQuery UI Widget

Factory"来实现。Widget可以看作是一个工厂或函数,可以用它来创建所有的UI。如下扩展:

调用widget的扩展方法:

$(‘#word-cup‘).newAccordion({});

Accordion有了扩展方法赋予的特征,比如底部虚线:

而且可以通过Accordion拖动底部来调整高度:

□ 总结

通过扩展"jQuery UI Widget Factory",可以为jQuery 的各种UI添加属性或行为。

参考资料: