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

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

使用方法
(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のほか自作デザインも設定可能

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

sponsors

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

記事作成:
記事URL:

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