jquery.matchHeight 插件用法


特征:

自动匹配元素组的高度

用法:

$(function() {
    $('.item').matchHeight(options);
});

选项:

默认options值为:

{
    byRow: true,
    property: 'height',
    target: null,
    remove: false
}
  • byRow 是 true 或 false 启用行检测
  • property 是要设置的 CSS 属性名称(例如 ‘height’ 或 ‘min-height’)
  • target 是要使用的可选元素,而不是具有最大高度的元素
  • remove 是 true 或 false 删除以前的绑定,而不是应用新的绑定

byRow 行检测:

<div class="row1">
<div class="item">display row1 <br> display row2</div>
<div class="item">display row1</div>
</div>

<div class="row2">
<div class="item">display row1 <br> display row2 <br> display row3</div>
<div class="item">display row1</div>
</div>

当值为 true 时,表示在行内同级的元素起作用,row1 下的两个子元素高度相同,row2 下的两个子元素相同

当值为 false 时,row1 和 row2 下的所有元素高度都相同,这就是行检测与否的区别

当需要切换行检测功能时,可使用函数:

$.fn.matchHeight._rows($('.item'));

data 属性:

使用 data 属性 data-mh=”group-name”,group-name 是任意字符串,以标识应将哪些元素视为一个组。

<div data-mh="my-group">My text</div>
<div data-mh="my-group">Some other text</div>
<div data-mh="my-other-group">Even more text</div>
<div data-mh="my-other-group">The last bit of text</div>

当加载页面时,所有具有相同组名的元素都将会自动设置为相同的高度,不管它们在DOM中的位置如何,都无需附加任何代码

但是需要注意的是,使用 data 属性时,byRow 的默认值为 true,如果想自定义设置,只能使用函数操作

手动触发:

$.fn.matchHeight._update()

当做了某些属性修改之后,可通过手动更新

取消匹配:

$('.item').matchHeight({ remove: true });

还原成原有的属性

自定义目标元素:

$(function() {
    $('.item').matchHeight({
        target: $('.sidebar')
    });
});

将元素组的属性设置成目标元素的高度

自定义属性:

$('.item').matchHeight({ property: 'min-height' });

这将设置 min-height 属性而不再是 height 属性。

回调事件:

由于 matchHeight 在某些窗口事件之后会自动处理布局的更新,因此如果需要通知您,则可以提供函数作为全局回调:

$.fn.matchHeight._beforeUpdate = function(event, groups) {
    // 更新之前,处理一些事
}
$.fn.matchHeight._afterUpdate = function(event, groups) {
    // 更新之后,处理一些事
}

其中 event 一个 jQuery 对象(如load,resize,orientationchange),groups 包含所有已被 matchHeight 应用元素组的数组,也可通过 $.fn.matchHeight._groups 访问和修改

更多信息请访问官方:

https://github.com/liabru/jquery-match-height




评论

还没有任何评论,你来说两句吧!

发表评论