□ 实现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. opencv(3)视频操作

    视频中最常用的就是从视频设备采集图片或者视频,或者读取视频文件并从中采样.所以比较重要的也是两个模块,一个是VideoCapture,用于获取相机设备并捕获图像和视频,或是从文件中捕获.还有一个Vid ...

  2. elasticsearch学习笔记--原理介绍

    前言:上一篇中我们对ES有了一个比较大概的概念,知道它是什么,干什么用的,今天给大家主要讲一下他的工作原理 介绍:ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户 ...

  3. epoll对poll(select)的改进

    select的几大缺点:   每次调用select,都需要把fd集合从用户态拷贝到内核态,这个开销在fd很多时会很大: 每次调用select,内核需要遍历传递进来的所有fd(判断检测文件是否可用).有 ...

  4. 不同意义的new和delete

    补充说明: new/delete是运算符而非函数,operator new/delete并非是new/delete的重载.事实上,我们无法自定义new/delete的行为: operator new/ ...

  5. WordPress解决优酷、土豆视频移动端观看问题并自适应

    转:https://www.xhsay.com/wp-iframe-handler-youku-tudou.html 虽然WordPress能直接插入优酷.土豆的视频但是无法在移动端观看,于是乎笨笨就 ...

  6. Linux系统的优势

    熟悉电脑的人都知道,Linux 相比较于 Windows 有着众多的优势,所以现在越来越多的电脑用户开始使用 Linux 进行办公.学习.总体来讲,Linux 的优势主要有以下几个方面. 一.开源.免 ...

  7. pyqt5猜数小程序

    程序界面用qt设计师制作,并用pyuic5命令转换成form.py文件 #-*- coding:utf-8 -*- from PyQt5.QtWidgets import QApplication,Q ...

  8. MemSQL Start[c]UP 2.0 - Round 1 F - Permutation 思维+线段树维护hash值

    F - Permutation 思路:对于当前的值x, 只需要知道x + k, x - k这两个值是否出现在其左右两侧,又因为每个值只有一个, 所以可以转换成,x+k, x-k在到x所在位置的时候是否 ...

  9. 使用ASP.NET MVC+Entity Framework快速搭建系统

    详细资料: http://www.cnblogs.com/dingfangbo/p/5771741.html 学习 ASP.NET MVC 也有一段时间了,打算弄个小程序练练手,做为学习过程中的记录和 ...

  10. 神经网络一（用tensorflow搭建简单的神经网络并可视化）

    import tensorflow as tf import numpy as np import matplotlib.pyplot as plt #创建一个input数据,-1到1之间300个数, ...