【JQuery】FlexBoxを使って簡単にリサイズ可能なレイアウトを作れる「jquery-resizable」プラグイン

2019年7月20日2020年10月27日Javascript,開発

おはようございます。

昨日はまた急に暑くなりましたね。
暑いとぼーっとして生産性が落ちるので大変です。

職場に卓上扇風機を買おうか迷っていて、先日のプライムデーで買っておけばよかったと後悔。

本題ですが、
今日は便利な JQueryプラグインの紹介。

1. jquery-resizable
2. プログラム
3. 起動してみる
4. まとめ

jquery-resizable

Rick Strahl さんが公開している JQuery プラグイン。（MITライセンス）

jquery-ui の resizable とは別物です。

簡単にリサイズ可能なボックスやレイアウト、列リサイズできるテーブルなどを実現することができます。

ダウンロードはこちら

ということで試しに弄ってみました。

プログラム

css

css/style.css

html,
body {
	height: 100%;
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	padding: 0;
	margin: 0;
	overflow: auto;
}

.main-header {
	-o-transition:margin-left .3s ease-in-out;
	-webkit-transition:margin-left .3s ease-in-out;
	border:none;
	border-radius:0;
	margin-bottom:0;
	margin-left:0;
	max-height:50px;
	min-height:50px;
	transition:margin-left .3s ease-in-out;
	background-color: #7e83b6;
}
.main-header div {
	padding:10px 10px;
	font-size: 24px;
}
.panel-container {
	display: flex;
	flex-direction: row;
	border: 1px solid silver;
	overflow: hidden;
	xtouch-action: none;
}

.panel-left {
	flex: 0 0 auto;
	padding: 10px;
	width: 300px;
	min-height: 200px;
	min-width: 150px;
	white-space: nowrap;
}

.splitter {
	flex: 0 0 auto;
	width: 10px;	
	background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #c1d0ea;
	min-height: 200px;
	cursor: col-resize;	
}

.panel-right {
	flex: 1 1 auto;
	/* resizable */
	padding: 10px;
	width: 100%;
	min-height: 200px;
	min-width: 200px;
	background: #e6e8f3;
}

html,

body {

height:100%;

font-family:'Trebuchet MS','Lucida Sans Unicode','Lucida Grande','Lucida Sans',Arial,sans-serif;

padding:0;

margin:0;

overflow:auto;

}

.main-header {

-o-transition:margin-left.3sease-in-out;

-webkit-transition:margin-left.3sease-in-out;

border:none;

border-radius:0;

margin-bottom:0;

margin-left:0;

max-height:50px;

min-height:50px;

transition:margin-left.3sease-in-out;

background-color:#7e83b6;

}

.main-header div {

padding:10px10px;

font-size:24px;

}

.panel-container {

display:flex;

flex-direction:row;

border:1pxsolidsilver;

overflow:hidden;

xtouch-action:none;

}

.panel-left {

flex:00auto;

padding:10px;

width:300px;

min-height:200px;

min-width:150px;

white-space:nowrap;

}

.splitter {

flex:00auto;

width:10px;

background:url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png)centercenterno-repeat#c1d0ea;

min-height:200px;

cursor:col-resize;

}

.panel-right {

flex:11auto;

/* resizable */

padding:10px;

width:100%;

min-height:200px;

min-width:200px;

background:#e6e8f3;

}

HTML

sample.html

<html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>リサイズレイアウトサンプル</title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="docManagerContents" class="wrapper" >
		<header id="header-menu" class="main-header">
			<div>
				<span>ヘッダー</span>
			</div>
		</header>
		<div class="panel-container">
			<div class="panel-left" >
				サイド
			</div>
			<div class="splitter"></div>
			<div class="panel-right">
				<div class="content">
					コンテンツ
				</div>
			</div>
		</div>
	</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/jquery-resizable.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

<html>

<!DOCTYPE html>

<head>

<title>リサイズレイアウトサンプル</title>

</head>

<body>

<div>

</div>

</header>

サイド

</div>

コンテンツ

</div>

</body>

</html>

Javascript

js/script.js

/**
 * 画面読み込み後に高さを調整する
 */
$(window).on("load resize", function(){
	var h = $(window).height() - 90;
	$(".content").css("max-height", h);
	$(".content").css("height", h);
	
})

/**
 * 読み込み時の処理
 */
$(function(){
	// リサイズできるようにする
	$(".panel-left").resizable({
		handleSelector: ".splitter",
		resizeHeight: false
	});
});