Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
39
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@hnakamur

jQuery用のスプリット・ペインのライブラリ比較検討メモ

左右や上下にペインを分割してドラッグでサイズを変えられるようなライブラリを探していて、いくつか見つけたので比較検討したメモです。

UI Layout Plug-in

javascript - Best way to do a split pane in html - Stack Overflowで紹介されていました。高機能そうではありますが、Downloadsを見るとスクリプトのサイズが81KBとか151KBと大きいのでパスすることにしました。

jQuery Splitter Plugin

methvin.com/splitter/splitter.jsのファイルサイズは9KBと小さくて良いのですが、jQuery Minimal Vertical splitterのサンプルをChromeで試してみると、ドラッグするときのカーソルが左右の矢印(col-resize)ではなく右矢印(e-resize)なのが、好みではない感じです。

cursor-スタイルシートリファレンスによるとcol-resizeはIE6以上の独自拡張とのことなので、それで使わないようにしているんでしょうかね。

MITとGPLのデュアルライセンスです。

タブ移動でスプリットバーにフォーカスを当ててカーソルキーで位置を調整できたり、クッキーで位置を記憶できたりと高機能ではあります。

ただ、このコードは古いようでjQuery 1.10.2には対応していませんでした。サンプルを見るとjQuery 1.3を使用していました。

internet explorer 9 - Fix for jQuery splitter in IE9 - Stack Overflowを参考に、jQuery 1.10.2対応を試みたのですが、うまくいっていません。ペインのサイズがずれてしまっています。
https://github.com/hnakamur/jquery-splitter-methvin

ということで、このライブラリの使用は諦めました。

jQuery Splitter | jQuery Plugin Registry

jQuery Plugin Registryでsplitterで検索して見つけました。

ソースはGitHubで公開されています。jcubic/jquery.splitter

jquery.splitter/js/jquery.splitter-0.12.0.js at master · jcubic/jquery.splitterを見るとJSのファイルサイズは11KBと小さくて良さそうです。

ライセンスはLGPLのv3以上です。

個人的にはBSDやMITライセンスのライブラリを優先したいので、このライブラリの使用は見送りました。

shagstrom/split-pane

Split Pane jQuery plugin | dreamchainにデモがあります。

機能はシンプルです。
http://dreamchain.com/static/split-pane/fixed-left.html のサンプルを手元で変更してみたところ、jQuery 1.10.2でも動きました。

ライセンスはMITです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
39
Help us understand the problem. What are the problem?