首页 > 代码库 > 通过扩展jQuery UI Widget Factory实现手动调整Accordion高度

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

2024-07-07 03:33:42   225人阅读

□ 实现Accordion高度一致

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href=http://www.mamicode.com/"~/Content/jquery-ui.min.css" rel="stylesheet" />
    <script src=http://www.mamicode.com/"~/Scripts/jquery-1.10.2.min.js"></script>
    <script src=http://www.mamicode.com/"~/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，每块区域的高度是一样的，且与最大高度保持一致：
1

 

□ 实现Accordion高度自适应

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

$(function() {
            $(‘#word-cup‘).accordion({
                event: "mouseover",
                collapsible: true,
                active: 1,
                heightStyle: ‘content‘
            });
        });

2

 

□ 实现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有了扩展方法赋予的特征，比如底部虚线：
3

 

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

 

□ 总结

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

 

参考资料：
Extending the jQuery UI Accordion


联系
我们