SQLの窓

2014年06月16日


JavaScript による、時間範囲の表現( 出退勤等 )

サーバー側のデータを JavaScript 側で表現するという事を想定しています

css の設定に、jQuery を使っていますが、jQuery は特に必要ではありません。jQuery のプラグインにするより、この状態のほうがカスタマイズが容易だと思います。

※ rangebox の背景を画像にして目盛を付加するともっと表現力がアップすると思います
氏名 時間 ( 6:00 〜 28:00 ) 開始 終了
浦岡 友也1
6:00 7:00
浦岡 友也2
8:00 10:00
浦岡 友也3
11:00 14:00
浦岡 友也4
15:00 19:00
高田 冬美1
20:00 25:00
高田 冬美2
20:00 27:00

ソースコード
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
var start = 6 * 60;							// 開始時間(分)
var end = 28 * 60;							// 終了時間(分)
var base_range = end - start;				// 範囲時間
var base_width = 300;						// 表示幅
var block = base_width / (base_range/10);	// 10分単位の幅
// ***********************************************
// 時間範囲表示関数
// ***********************************************
function setRange(id,strTime1,strTime2) {

	var parts = strTime1.split(":");
	var h = parseInt( parts[0] );	// 時間部分
	var m = parseInt( parts[1] );	// 分部分
	m = (h*60 - start + m)/10;		// start からの位置
	start_pos = m * block;			// 指定時間の開始位置

	parts = strTime2.split(":");
	h = parseInt( parts[0] );	// 時間部分
	m = parseInt( parts[1] );	// 分部分
	m = (h*60 - start + m)/10;
	end_pos = m * block;
	// 二つ目は幅に変換
	block_width = end_pos - start_pos;

	// 幅を表現する BOX の開始と幅を設定( jQuery である必要はありません )
	$("#" + id).css({ "left": start_pos+"px", "width": block_width + "px" });

}

$(function() {

	setRange("timebar0001","6:00", "7:00");
	setRange("timebar0002","8:00", "10:00");
	setRange("timebar0003","11:00", "14:00");
	setRange("timebar0004","15:00", "19:00");
	setRange("timebar0005","20:00", "25:00");
	setRange("timebar0006","20:00", "27:00");

});
</script>

<style type="text/css">
.rangebox {
	width:100%;
	height: 35px;
	background-color:#e0e0e0;
	position: relative;
}
.rangebox div {
	position: absolute;
	background-color:#ff0000;
	height: 35px;
}

#lboxtable * {
	font-family: "メイリオ", Meiryo, "MS Pゴシック";
	font-size: 16px;
}
#lboxtable table {
	table-layout: fixed;
	width:600px;
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: #FFFFFF;
}
#lboxtable td {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	/* white-space: nowrap; */
}
</style>

<div id="lboxtable">
<table>
	<tbody>
		<tr>
			<td style='width:100px;'>氏名</td>
			<td style='width:300px;'>時間 ( 6:00 〜 28:00 )</td>
			<td>開始</td>
			<td>終了</td>
		</tr>
		<tr>
			<td>浦岡 友也1</td>
			<td><div class="rangebox"><div id="timebar0001"></div></div></td>
			<td>6:00</td>
			<td>7:00</td>
		</tr>
		<tr>
			<td>浦岡 友也2</td>
			<td><div class="rangebox"><div id="timebar0002"></div></div></td>
			<td>8:00</td>
			<td>10:00</td>
		</tr>
		<tr>
			<td>浦岡 友也3</td>
			<td><div class="rangebox"><div id="timebar0003"></div></div></td>
			<td>11:00</td>
			<td>14:00</td>
		</tr>
		<tr>
			<td>浦岡 友也4</td>
			<td><div class="rangebox"><div id="timebar0004"></div></div></td>
			<td>15:00</td>
			<td>19:00</td>
		</tr>
		<tr>
			<td>高田 冬美1</td>
			<td><div class="rangebox"><div id="timebar0005"></div></div></td>
			<td>20:00</td>
			<td>25:00</td>
		</tr>
		<tr>
			<td>高田 冬美2</td>
			<td><div class="rangebox"><div id="timebar0006"></div></div></td>
			<td>20:00</td>
			<td>27:00</td>
		</tr>
	</tbody>
</table>
</div>




タグ:javascript
posted by lightbox at 2014-06-16 14:40 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり