通过扩展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高度,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。