フロートウィンドウを作成するJavaScript「(mb)ContainersPlus」

ある部分だけ目立たせたいけど、ユーザーの邪魔にならないよう閉じられるようにしたい。
誰しもがもつ欲求をかなえてくれるのが、jQueryプラグイン「(mb)ContainersPlus」です。
移動、リサイズなどが可能なフロートウィンドウをJavaScriptで作成できます。

使用方法

(mb)ContainersPlusからファイル一式をダウロードします。

<link rel="stylesheet" type="text/css" href="mbContainer.css" title="style"  media="screen">
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript" src="ui.core.min.js"></script>
<script type="text/javascript" src="ui.draggable.min.js"></script>
<script type="text/javascript" src="ui.resizable.min.js"></script>
<script type="text/javascript" src="mbContainer.js"></script>
<script type="text/javascript">
	$(function(){
		$(".containerPlus").buildContainers({
			containment:"document",
			elementsPath:"elements/" //アイコン画像までのパス
		});
	});
</script>
上記を記述したら、以下のようにフロートボックスを作成を記述します。

<div class="containerPlus draggable resizable" width="500" buttons="m,c,i"  style="top:200px;right:200px" icon="chart.png" skin="default">
	<div class="no"><div class="ne"><div class="n">タイトル</div></div>
		<div class="o"><div class="e"><div class="c">
			<div class="content">
				コンテンツ
			</div>
		</div></div></div>
		<div >
			<div class="so"><div class="se"><div class="s"></div></div></div>
		</div>
	</div>
</div>
width、heightに関してはCSSではなくこちらで記述する必要があります。
また、オプションのような形で、リサイズやドラッグブル、スキンの変更が可能です。
■class：draggable（移動可能）、resizable（リサイズ可能）
■buttons：m（縮小）,c（閉じる）,i（隠す）
■skin：default、white、blackのほか自作デザインも設定可能

サンプル

Title container 1

E qui va il contenuto!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras metus. Maecenas justo elit, lacinia sit amet, cursus ut, sagittis sed, eros. Suspendisse potenti. Maecenas nec nisi. Donec vestibulum sollicitudin tellus. Sed consequat pellentesque ante. Vestibulum turpis quam, vulputate nec, nonummy convallis, ultrices congue, ligula. Ut rutrum leo et orci. Proin pharetra. Nam non sem ut eros fringilla ornare. In ullamcorper lorem eget ipsum. Suspendisse semper enim in arcu cursus consectetuer. Suspendisse potenti. Proin libero eros, adipiscing quis, volutpat in, ultrices ut, lacus.

Nulla facilisi. Vestibulum vel magna in ante lobortis semper. Integer posuere justo et urna. Vestibulum sit amet sapien ut quam tempor fringilla. Fusce a neque a enim mattis dapibus. Ends with a paragraph element!

ＡＬＥＲＴ

Attenzione!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras metus. Maecenas justo elit, lacinia sit amet, cursus ut, sagittis sed, eros. Suspendisse potenti. Maecenas nec nisi. Donec vestibulum sollicitudin tellus. Sed consequat pellentesque ante. Vestibulum turpis quam, vulputate nec, nonummy convallis, ultrices congue, ligula. Ut rutrum leo et orci. Proin pharetra. Nam non sem ut eros fringilla ornare. In ullamcorper lorem eget ipsum. Suspendisse semper enim in arcu cursus consectetuer. Suspendisse potenti. Proin libero eros, adipiscing quis, volutpat in, ultrices ut, lacus.

Nulla facilisi. Vestibulum vel magna in ante lobortis semper. Integer posuere justo et urna. Vestibulum sit amet sapien ut quam tempor fringilla. Fusce a neque a enim mattis dapibus. Ends with a paragraph element!

Title container 3

E qui va il contenuto!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras metus. Maecenas justo elit, lacinia sit amet, cursus ut, sagittis sed, eros. Suspendisse potenti. Maecenas nec nisi. Donec vestibulum sollicitudin tellus. Sed consequat pellentesque ante. Vestibulum turpis quam, vulputate nec, nonummy convallis, ultrices congue, ligula. Ut rutrum leo et orci. Proin pharetra. Nam non sem ut eros fringilla ornare. In ullamcorper lorem eget ipsum. Suspendisse semper enim in arcu cursus consectetuer. Suspendisse potenti. Proin libero eros, adipiscing quis, volutpat in, ultrices ut, lacus.

Nulla facilisi. Vestibulum vel magna in ante lobortis semper. Integer posuere justo et urna. Vestibulum sit amet sapien ut quam tempor fringilla. Fusce a neque a enim mattis dapibus. Ends with a paragraph element!

Javascriptサンプルページ一覧
skuare.net