jquery.matchHeight

2018-06-13 admin

jquery.matchHeight是什么

什么是jquery.matchHeight,a responsive equal heights plugin for jQuery

jquery.matchHeight介绍、jquery.matchHeight使用

matchHeight makes the height of all selected elements exactly equal.

It handles many edge cases that cause similar plugins to fail.

brm.io/jquery-match-height

Demo - Features - Gallery - Install - Usage - Options - Data API Advanced Usage - Tests - Known limitations - Changelog - License

Demo

See the jquery.matchHeight.js demo.

jquery.matchHeight.js screenshot

Features

  • match the heights for groups of elements automatically
  • use the maximum height or define a specific target element
  • anywhere on the page and anywhere in the DOM
  • responsive (updates on window resize)
  • row aware (handles floating elements and wrapping)
  • accounts for box-sizing and mixed padding, margin, border values
  • handles images and other media (updates after loading)
  • supports hidden or none-visible elements (e.g. those inside tab controls)
  • throttled to balance performance and smoothness
  • easily removed when needed
  • maintain scroll position
  • data attributes API
  • callback events
  • unit tests
  • module loader support
  • tested in IE8+, Chrome, Firefox, Safari, Android, iOS

Gallery

See how others are using jquery.matchHeight.js

Install

jQuery is required, so include it first. Download jquery.matchHeight.js and include the script in your HTML file:

<script src="jquery.matchHeight.js" type="text/javascript"></script>

You can also install using the package managers Bower and NPM.

bower install matchheight
npm install jquery-match-height

Usage

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

Where options is an optional parameter. See below for a description of the available options and defaults.

The above example will set all selected elements with the class item to the height of the tallest. If the items are on multiple rows, the items of each row will be set to the tallest of that row (see byRow option).

Call this on the DOM ready event (the plugin will automatically update on window load). See the included test.html for many working examples.

Also see the Data API below for a simple, alternative inline usage.

Options

The default options are:

{
    byRow: true,
    property: 'height',
    target: null,
    remove: false
}

Where:

  • byRow is true or false to enable row detection
  • property is the CSS property name to set (e.g. 'height' or 'min-height')
  • target is an optional element to use instead of the element with maximum height
  • remove is true or false to remove previous bindings instead of applying new ones

Data API

Use the data attribute data-mh="group-name" where group-name is an arbitrary string to identify which elements should be considered as a group.

<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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33931.html

文章标题:jquery.matchHeight

回到顶部