□ 实现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. NYOJ 石子合并（一）(区间DP)

    题目链接:http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=737 题目大意: 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆 ...

  2. Centos7.3安装和配置jre1.8

    在正式环境里 我们可以不安装jdk ,仅仅安装Java运行环境 jre即可: 第一步:下载jre 我们去oracle官方下载下jre http://www.oracle.com/technetwork ...

  3. 《精通Python设计模式》学习结构型之装饰器模式

    这只是实现了Python的装饰器模式. 其实,python的原生的装饰器的应用比这个要强,要广的. ''' known = {0:0, 1:1} def fibonacci(n): assert(n ...

  4. Mongo分片基础命令

    一.三节点作用 Shard: 用于存储实际的数据块,实际生产环境中一个shard server角色可由几台机器组个一个replica set承担,防止主机单点故障 Config Server: mon ...

  5. HBase（四）HBase集群Shell操作

    一.进入HBase命令行 在你安装的随意台服务器节点上,执行命令:hbase shell,会进入到你的 hbase shell 客 户端 [admin@node21 ~]$ hbase shell S ...

  6. 【POJ】1740.A New Stone Game

    题解 想去学习一下博弈论的SG函数 不过貌似这道题就是猜结论并且证明 题意是,随便选择一堆石子,扔掉至少一个,然后从扔石子的这堆里选择任意多(可以不选)放到其他任意多的未选择完的石堆里 一堆石子,先手 ...

  7. 易普优高级计划排程Light版助力中小企业实现精益化计划

    易普优高级计划排程Light版助力中小企业实现精益化计划 一.业务与排产需求 根据统计,目前中小企业已经占到我国工业企业总数的95%以上,对中国GDP贡献超过60%,税收超过了50%,提供了70%的进 ...

  8. MemSQL Start[c]UP 2.0 - Round 1 E - Three strings 广义后缀自动机

    E - Three strings 将三个串加进去,看每个节点在三个串中分别出现了多少次. #include<bits/stdc++.h> #define LL long long #de ...

  9. Gitlab Issue Tracker and Wiki(二)

    一. 引用问题 1. 登陆 Gitlab服务器 2. 进入到super-git项目 3. 创建一个问题 4. 查看创建问题的号码,可以在下图找到. 5. 对代码进行提交去关闭这个问题,首先把项目在本机 ...

  10. php读取文件内容的4钟常用方法函数

    这四种方法根据不同情况使用,可以实现对文件的任何操作,下面有详细介绍. 1.把整个文件读入一个字符串中 file_get_contents(); 2.把整个文件读入一个数组中,一行就是一个数组元素 f ...