jQuery

【jQuery】ライン要素の高さを自動調整するプラグインMagic Height

February 20, 2018
Magic Height

Magic Heightはライン要素の高さを自動調整するjQueryプラグイン。

Getting Started

jQueryライブラリとプラグインを含める

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="dist/jquery.magic-height.min.js"></script>

Html markup:

<div class="container js-demo-container">
  <div class="row">
    <div class="col-xs-12 js-demo-item">your content or markup</div>
    <div class="col-xs-12 js-demo-item">your content or markup</div>
    <div class="col-xs-12 js-demo-item">your content or markup</div>
    <div class="col-xs-12 js-demo-item">your content or markup</div>
    <div class="col-xs-12 js-demo-item">your content or markup</div>
  </div>
</div>

Start plugin:

$(function () {
    $('.js-demo-container').magicHeight({
      itemClass: '.js-demo-item'
    });
});

Options

  1. itemClass
  2. line
  3. resize
  4. load

MIT