Split.js 事始め 2

前回、 <div> 要素をいい具合に配置してくれる Split.js というライブラリを紹介しました。

今回は、この配置した要素をマウスでサイズ変更できるようにしてみましょう。

Hello World 2 ～ 要素をマウスでサイズ変更 ～

前回の最後に作った、3つの <div> を横に並べるサンプルから始めます。

このサンプルで、 3つの <div> をくくっている、大元の <div> に ID を付与し、 css でその ID を指定して "display: flex" を設定します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.2/split.min.js"></script>
<div id="flex">
  <div class="split" id="one">Hello</div>
  <div class="split" id="two">World</div>
  <div class="split" id="Three">FooBar</div>
</div>

<style type="text/css">
.split {
 float: left;
}

#flex {
 display: flex;
}
</style>

<script type="text/javascript">
Split(['#one', '#two', '#three'], {
 sizes: [25, 25, 50],
})
</script>

すると、以下のように3つの <div> の間に隙間が作られ、マウスでドラッグすることでサイズを変更することができるようになります。(要素の最小幅はデフォルトで 100px とのことで、動作が分かりやすいようにサンプルでは最小幅を 10px としています。以降も同様です)

ちなみに、以下のように "class=split" に対応するスタイルを削除しても、動作は変わりません。

<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.2/split.min.js"></script>
<div id="flex">
  <div class="split" id="one">Hello</div>
  <div class="split" id="two">World</div>
  <div class="split" id="Three">FooBar</div>
</div>

<style type="text/css">

#flex {
 display: flex;
}
</style>

<script type="text/javascript">
Split(['#one', '#two', '#three'], {
 sizes: [25, 25, 50],
})
</script>

カスタマイズしてみましょう

以上で要素のサイズ変更という目的を達成してしまったので、多少のカスタマイズを施してみます。

まずは、サイズが可変であることがわかるように、領域の境界にマウスカーソルを持っていったらカーソル形状を変えてみましょう。 css に以下を追加してみます。

.gutter {
  cursor: ew-resize;
}

これで、境界の "溝" にマウスカーソルを持っていくと、左右矢印に変わるようになります。 "gutter" クラスは境界部分に自動で付与されるクラスのようです。ちなみに "gutter" は "溝" とか "側溝" とか、あとボーリングのガターという意味があります。

次に、この gutter の幅が少し狭いと思ったので、 gutter を広げてみます。 gutter のサイズは Split 関数のオプションとして gutterSize を渡してあげます。デフォルトでは 10 px とのことです。

Split(['#one', '#two', '#three'], {
 sizes: [25, 25, 50],
 gutterSize: 20
})

さらに、この gutter に画像を表示してみましょう。「境界でここをドラッグすることでサイズを変更できる」ということがわかるような画像が望ましいと思います。ここでは、base64エンコードされた画像を使用してみます。

gutter に画像を表示するには、 css で gutter クラスの background-image を指定するだけで可能です。また、繰り返し無し、配置を中央としてみます。

.gutter {
  cursor: ew-resize;
  background-image: url("foo.png");
  background-repeat: no-repeat;
  background-position: 50%;
}

以下の例では画像表示が分かりやすいように、要素の縦幅も広げています。なんとなく、「この境界、触れるかな？」というのが感じられる雰囲気になったと思います。境界部分にマウスカーソルを持っていけばカーソル形状も変わりますし。

おわりに

今回は Split.js で分割表示した要素間の境界をマウスでドラッグする仕組みについて触れました。左右に画面分割し、そのサイズをマウスで変更できるというだけですが、思っていたよりも簡単に実現できて個人的に感動したものです。ちなみに公式とは多少記述が違う (少し端折っているものがある) のですが、今のところは動いているので良し！です。

次回の Split.js の記事では、レイアウトについて触れたいと思います。具体的には、前回の記事の冒頭で示した画面構成で使用した書き方について紹介できればと思います。

# 申し送りですが、前回今回の記事に掲載している CodePen はあくまでも "Works for me" のコードですので、ご承知おきください。