□ 实现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. hdu 4664 划线（SG）

    N个平面,每个平面有ni个点 两个人玩游戏,划线,他们可以划任意一个平面的两个点,有以下要求:两个人划得线不能交叉,不要划已经划过的线,如果一个平面被划了一个空心的三角形,那么这个平面就不能继续划线了 ...

  2. day4 计算器

    作业:计算器开发 (1)实现加减乘除及拓号优先级解析: (2)用户输入 1 - 2 * ( (60-30 +(-40/5) * (-9-2*5/-3 + 7 /3*99/4*2998 +10 * 56 ...

  3. C语言：10个整数排序（别忘了负数）

    题目内容: 10个整数排序(别忘了负数) 例如 input 1 0 2 0 3 4 1 9 8 7 output 0 0 1 1 2 3 4 7 8 9 编码: void sort(int *a); ...

  4. MyEclipse个性化设置

    1.修改项目文件默认编码 Note:myEclipse默认的编码是GBK, 也就是未设置编码格式的文件都默认使用GBK进行编码, 而更糟糕的是JSP.JavaScriptt默认编码竟然是ISO-885 ...

  5. LoadRunner参数化时的中文乱码问题

    http://blog.sina.com.cn/s/blog_6cf205160100mdxi.html

  6. 黑马程序员_java基础笔记(11)...反射

    —————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流! —————————— 1,字节码.2,Constructor类.3,Field类.4,Method类.5 ...

  7. nginx配置web服务器

    一:设置虚拟服务器 1.设置 http { server { listen 127.0.0.1:8080; server_name example.org www.example.org; } } 2 ...

  8. Django项目从零开始的大概脉络

    Django项目从零开始脉络 创建虚拟环境,隔离项目python环境:mkvirtualenv -p /usr/bin/python3.6 envname 安装Django:pip install d ...

  9. date time insert

    DATE=`date '+%m/%d/%Y'`TIME=`date '+%H:%M:%S'` sed -i '1i1***** start*****' test.kshsed -i '2i\ REPO ...

  10. C# 复制、粘贴文本信息到系统剪贴板

    复制: Clipboard.SetDataObject(textBox1.SelectedText); 粘贴: IDataObject iData = Clipboard.GetDataObject( ...