jQuery 中的等高列

2024-01-09

你好,我正在寻找一个基于 jQuery 的等高列。我知道有很多这样的东西漂浮在周围但是我的要求有点不同。我想在超级菜单中使用它们,其中有大约 4-5 个下拉菜单,每个下拉菜单有 3-4 列。

我希望所有这些 3-4 列具有相同的高度,但不是在所有下拉菜单中,因为根据该部分的内容,其他下拉菜单中的列高度会有所不同。

我在 MooTools 中找到了一个非常适合我的要求的解决方案。下面的 MooTools 代码使特定 div 中的所有列等于其父 div 的高度

MooTools 代码:

var Equalizer = new Class({
 initialize: function(elements) {
  this.elements = $$(elements);
 },
 equalize: function(hw) {
  if(!hw) { hw = 'height'; }
  var max = 0,
   prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min-' : '') + hw; //ie6 ftl
   offset = 'offset' + hw.capitalize();
  this.elements.each(function(element,i) {
   var calc = element[offset];
   if(calc > max) { max = calc; }
  },this);
  this.elements.each(function(element,i) {
   element.setStyle(prop,max - (element[offset] - element.getStyle(hw).toInt()));
  });
  return max;
 }
});

Usage :

var columnizer = new Equalizer('.sizeMe').equalize('height'); //call .equalize() as often as you want!

有人可以帮我在 jQuery 中转换这段代码吗?实际上,我的整个模板都是基于 jQuery 的,只是为了这个等高函数,我不想加载另一个 JavaScript 库。

请帮忙!


是的,我认为这可能有用,所以将其制作成 jQuery 插件供您使用。

Demo: http://jsfiddle.net/AXqBb/ http://jsfiddle.net/AXqBb/

均衡器.js:

(function($) {
    String.prototype.capitalize = function() {
        return this.replace(/^(.)/, function (c) { return c.toUpperCase(); })
    };

    $.fn.equalize = function(hw) {
        if (!hw) {
            hw = 'height';
        }

        var max = 0;
        var prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min' + hw.capitalize() : hw);
        var offset = 'offset' + hw.capitalize();

        this.each(function() {
            var calc = parseInt(this[offset]);
            if (calc > max) {
                max = calc;
            }
        });

        this.each(function() {
            $(this).css(prop, max - (parseInt(this[offset]) - $(this)[hw]()));
        });

        return max;
    };
})(jQuery);

像这样调用:

var maxHeight = $('.sizeMe').equalize('height');

我已将代码尽可能与您发布的代码保持相似,以便您可以看到更改,因此对任何不好的风格表示歉意 - 希望它可归因于原作者。 ;-)

注意。我在这段代码中向 String 添加了基本的首字大写功能;如果已经定义,则需要将其删除。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery 中的等高列 的相关文章

  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • 如何让 jquery Tooltipster 插件适用于新创建的 DOM 元素?

    我正在使用 Tooltipster 插件http calebjacob com tooltipster http calebjacob com tooltipster 这很棒 但我已经动态生成了插入到 DOM 中的内容 工具提示程序似乎没有
  • 当用户单击链接时,如何记录 MixPanel 事件?

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是
  • 无法在 Chrome 中设置 currentTime

    由于某些原因 在 Chrome 中我无法设置音频标签的 currentTime 属性 我可以提醒 currentTime 并且它显示正确 但是当我尝试设置 currentTime 时它会恢复为零 进度条上有一个事件侦听器 它会触发如下所示的
  • 使用 Javascript/JQuery 的 JSON 对象的差异

    我在 Javascript 中有两个 JSON 对象 除了数值之外 它们都是相同的 它看起来像这样 var data eth0 Tx 4136675 Rx 13232319 eth1 Tx 4 Rx 0 lo Tx 471290 Rx 47
  • 如何在没有 JQuery 的情况下模仿跨浏览器 $(document).ready() 行为[重复]

    这个问题在这里已经有答案了 可能的重复 document ready 相当于没有 jQuery https stackoverflow com questions 799981 document ready equivalent witho
  • jquery:$().animate() 不是函数

    我已经做了很多搜索 但无法找到我的问题的答案 所以这里是 我正在尝试创建一个滑出切换菜单本教程 http alijafarian com jquery horizontal slideout menu 我收到一个错误slideoutMenu
  • 如何在Jquery-Select2中设置多值选择中的选定值?

    我正在绑定我的下拉菜单Jquery Select2 它工作正常 但现在我需要绑定我的多值selectBox通过使用Jquery Select2 我的下拉菜单 div class divright div
  • 具有有限行数和字符数限制的文本区域

    我需要具有 TextArea 的功能 1 maximum total lines 6 and 2 in each line there must be maximum of 16 chars 3 if user enters 17th ch
  • 在jqGrid中查找当前页码

    如何在 jqGrid 中找到当前页码 当然使用 jQuery 另外我怎么知道总共有多少页 这应该可以做到 sp 1 text total pages ui pg input val current page Edit 我发现了一个更好的方法
  • 是否可以禁用特定 jQuery Ajax 调用的 Turbolinks 以防止页面刷新和滚动?

    我有一个 Rails 5 应用程序 非常想使用 Turbolinks 在应用程序中 有几个 PATCH ajax 调用 它们只是用新数据更新服务器 但不需要担心更新页面的状态 每当这些 ajax 请求返回时 Turbolinks 就会刷新页
  • 如何动态添加和删除jquery选项卡?

    我有一个 aspx 页面 上面有 2 个静态 jquery 选项卡 单击其中一个选项卡上的按钮后 我想动态添加一个新选项卡 该选项卡从另一个 aspx 页面加载其内容 我也尝试使用以下示例 http jquery ui googlecode
  • 如何在文档加载时立即进行 AJAX 调用

    我想在加载文档后立即执行 ajax 调用 我正在做的是加载一个字符串 其中包含我将用于自动完成功能的数据 这就是我所做的 但它没有调用servlet 我删除了对各种 JS 脚本的调用 以使其更清晰 我在代码中做了几个类似的 AJAX 调用
  • Jquery ajax请求,等待最新请求完成

    我有一个文本框 每次用户输入一个字母时 我都会使用 ajax 请求进行搜索 并为用户 实时 显示结果 通常 当用户键入字母时 发出请求所需的时间比用户输入新字母所需的时间更长 因此在第一个请求结束之前发出新请求 如果第一个请求能够在我执行下
  • 如何通过 HTML 按钮播放声音

    我目前通过网站播放音乐的方法是通过 HTML 音频标签 不过我希望能够通过 HTML 按钮来播放它 该按钮应该能够在播放和停止之间切换音乐 我在 JSFiddle 创建了一个示例 但不知道如何实现它 有人可以告诉我如何使用我的 JSFidd
  • jQuery如何让Enter(Return)通过输入文本字段充当Tab键但最终触发提交按钮

    我已经屏蔽了 Enter 返回 键 实际上 将其转换为 Tab 键 因此 当在输入文本字段内按下时 它充当 Tab 键 这很好 但我需要它在最后一个字段中按下时触发提交按钮 下面是 Enter 键突变的代码 input keydown fu
  • 根据用户输入使用 Jquery 显示/隐藏字段

    li class numeric optional li
  • 有没有非常轻的灯箱? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • jQuery:动态添加 DOM 元素时尝试将函数挂钩到 onclick,但它立即执行该函数

    我正在使用 jQuery 动态 我的意思是在运行时 向页面的 DOM 添加一个 span 元素 create add task button document createElement span attr id activityNameH

随机推荐

  • 从 Javascript 访问 Chrome 的内部 gzip 例程

    所有现代浏览器都包含用于与服务器交换压缩数据的 gzip 例程 谁能给我指出正确的方向来编写一个允许 Javascript 利用这个例程的 Chrome 扩展 我想在通过 WebSocket 将一些数据发送到服务器之前先用 Javascri
  • 如何设置基于注释的路由翻译?

    我网站的所有路由都是基于注释来实现的 现在 我想翻译我的路由 为了实现这一点 我尝试使用捆绑包JMSI18n路由包 https github com schmittjoh JMSI18nRoutingBundle 然而 文档没有给出任何如何
  • SQLite3 忽略重音符号

    如何在 SQLite3 上使用 LIKE 子句进行 SELECT 忽略重音符号 PS 这是为了Android内置的SQLite支持 有一个解决方案 它并不优雅 但可以在 Android 上运行 REPLACE 函数可以用普通字符替换重音字符
  • 将部分接口类型的对象转换为 TypeScript 中的“完整”接口类型

    假设我有一个界面A看起来像这样 interface A prop1 string prop2 string 我初始化对象obj像这样 const obj Partial a prop1 xyz 有什么办法可以投吗obj to A并自动设置未
  • R studio 列表和数据框自动名称完成不再工作

    突然 R Studio 在输入时停止自动完成我的列表和数据框内容mylist 然后按Tab 我得到的结果消息是 无匹配 我在非常简单的列表或数据框上尝试过 例如 simpledataset lt data frame a rep 0 100
  • 来自 Microsoft 文档的 C# String.Length

    微软文档指出 https msdn microsoft com en us library system string length 28v vs 110 29 aspx该代码将返回 7 个字符 Length 属性返回此实例中 Char 对
  • 如何从 iframe src 获取哈希值?

    当我执行 iframe src 时 我的 iframe 有一个带有哈希值的 url 它只是为我提供了 url 而没有从其他域附加哈希值 我可以读取带有哈希值的整个网址吗 由于安全限制不太可能 我很惊讶你甚至可以获得 URL 你能显示代码吗
  • 动态创建变量

    我曾尝试过学习Python org https www learnpython org en Hello 2C World 21要动态创建变量 可以按如下方式创建 food bread vars food asdasd print brea
  • OAuth 2.0 - 何时应使用刷新令牌更新访问令牌?

    我目前正在使用 OAuth 2 0 访问 Google API 根据我的理解 我应该使用返回的刷新令牌来更新访问令牌 是否应该在过期之前刷新 还是应该在用户使用已过期的访问令牌从 api 请求数据时刷新 如果应该在过期之前完成 我是否应该运
  • 断言在 Python 单元测试中调用了某个方法

    假设我在 Python 单元测试中有以下代码 aw aps Request nv1 aw2 aps Request nv2 aw 有没有一种简单的方法来断言特定方法 在我的例子中aw Clear 在测试的第二行期间被调用 例如有没有这样的事
  • 从大文件中分块数据进行多重处理?

    我正在尝试使用多处理并行化应用程序 该应用程序接受 一个非常大的 csv 文件 64MB 到 500MB 逐行进行一些工作 然后输出一个小的固定大小 文件 目前我做一个list file obj 不幸的是它已完全加载 进入内存 我认为 然后
  • ASP.NET 5 Web 项目和实体框架位于单独的项目中

    从哪里开始 这已经困扰我一整天了 我已更新我的项目以使用新的 ASP NET 5 空预览模板 我已经成功构建了所有项目 但是当我运行我的网站时 出现此错误 当前运行时目标框架不兼容 我的 WEB 命名空间 当前运行时目标框架 DNX 版本
  • 应用程序与 Nexus 7 和 Acer Iconia a210 不兼容

    我知道这个问题已经被问过几次了 但为什么我的应用程序与 Nexus 7 和 Acer Iconia a210 不兼容 我在现有问题中没有找到可行的解决方案 那么我还可能缺少什么
  • 等待直到通过 webClient 从 URL 下载文件

    我很难从 URL 下载几 MB 的 excel 文件然后使用它 我使用VS2010所以我不能使用await关键字 我的代码如下 using WebClient webClient new WebClient setting Windows
  • 动态生成单选按钮

    我有一个 redux 表单 其中包含一些单选按钮
  • ubuntu 上的 codeigniter 问题

    我在 Ubuntu 10 LAMP 上安装了 Codeigniter 我有一个 htaccess 文件
  • 为什么 iPad 上只能嵌入 YouTube?

    我试图找出为什么 YouTube 嵌入在 iPad 上运行良好 而不是任何其他视频网站的嵌入 YouTube 嵌入示例
  • 必须了解机器架构才能编写代码吗?

    假设我正在用 Java 或 Python 或 C 编程解决一个简单的问题 可能是构建 TCP UDP 回显服务器或阶乘计算 我是否需要关心架构细节 即它是 32 位还是 64 位 恕我直言 除非我正在编程一些与相当低级的东西有关的东西 否则
  • 实体框架 - 使用多列索引作为标识符的种子 AddOrUpdate

    我正在尝试使用以下方式播种数据库context AddOrUpdate方法 但问题是我需要基于多列索引使插入的数据唯一 Table climbing grades public class ClimbingGrade EntityBase
  • jQuery 中的等高列

    你好 我正在寻找一个基于 jQuery 的等高列 我知道有很多这样的东西漂浮在周围但是我的要求有点不同 我想在超级菜单中使用它们 其中有大约 4 5 个下拉菜单 每个下拉菜单有 3 4 列 我希望所有这些 3 4 列具有相同的高度 但不是在