□ 实现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高度的更多相关文章

  1. 使用 jQuery UI Widget Factory 编写有状态的插件（Stateful Plugins）

    使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) Note 这一章节的内容是基于 Scott Gonzalez 一篇博客 Building ...

  2. jQuery UI Widget Factory

    https://learn.jquery.com/jquery-ui/widget-factory/ The jQuery UI Widget Factory is an extensible bas ...

  3. JQuery UI Widget Factory官方Demo

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. jquery ui widget 源代码分析

    jquery ui 的全部组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,有用它能实现一致的API.创建有状态的插件,而无需关心插件的内部转换. $.wi ...

  5. jQuery UI Widget(1.8.1)工作原理--转载

    先看下代码的相关注释: /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/abo ...

  6. jQuery UI Widget 原理

    先看下代码的相关注释: /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/abo ...

  7. jQuery UI Widget(1.8.1)工作原理

    /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) * Dual l ...

  8. Jquery ui widget开发

    Jquery ui 提供了一些基本的widget,但是他提供了很好的机制来创建widget.在jquery css framework中包含了基本的css样式(视觉和感觉诸如颜色,字体大小,图标等), ...

  9. jquery.ui.widget详解

    案例详解 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. glBlendFunc的几种常用情况

    先Mark一下,后面有时间补上DEMO 1.画航母大灯,手电筒(效果为:透过黑色半透明层可看到下面的背景图,仅圆圈部分) 1)先画圆圈 2)再画背景图(大背景) 大背景设置  glBlendFunc ...

  2. IEEEXtreme 极限编程大赛题解

    这是 meelo 原创的 IEEEXtreme极限编程大赛题解 IEEEXtreme全球极限编程挑战赛,是由IEEE主办,IEEE学生分会组织承办.IEEE会员参与指导和监督的.IEEE学生会员以团队 ...

  3. USACO 完结的一些感想

    其实日期没有那么近啦……只是我偶尔还点进去造成的,导致我没有每一章刷完的纪念日了 但是全刷完是今天啦 讲真,题很锻炼思维能力,USACO保持着一贯猎奇的题目描述,以及尽量不用高级算法就完成的题解……例 ...

  4. USACO 4.3 Buy Low, Buy Lower

    Buy Low, Buy Lower The advice to "buy low" is half the formula to success in the stock mar ...

  5. css盒子垂直居中

    首先父盒子包住子盒子 <body> <div class="outbox"> <div class="box"></d ...

  6. HDU 1028 HDU 1398 （母函数）

    题意:输入一个n  给出其所有组合数 如: 4 = 4;  4 = 3 + 1;  4 = 2 + 2;  4 = 2 + 1 + 1;  4 = 1 + 1 + 1 + 1; 重复不算 母函数入门题 ...

  7. Ionic入门十：icon(图标)

    ionic 也默认提供了许多的图标,大概有500多个.用法也非常的简单: <i class="icon ion-star"></i> 图标列表如下:   ...

  8. jquery 查询IP归属地

    <script src="http://c.csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type=&q ...

  9. 组装者模式在React Native项目中的一个实战案例

    前言 在实际的开发中,如果遇到多个组件有一些共性,我们可以提取一个BaseItem出来,然后在多个组件中进行复用,一种方式是通过继承的方式,而今天我们要说的是另一种方式--组装者模式. 什么是组装者模 ...

  10. 试水jdk8 stream

    jdk8出来日子不短了,jdk11都出来了,不过用的最多的不过是1.5罢了. 今年终于鼓起勇气认真对待它,在18年记录下学习stream,画上一个圆. 先看个图 Java8中有两大最为重要的改变.第一 ...