ウィンドウのタイトルバーをドラッグするとウィンドウを移動できます。
ウィンドウを上下左右に近づけるとブラウザの端にドッキングすることができます。
ウィンドウを画面中央に移動すると大きく表示されます。
シンプルな構成なので、軽量で、ほかのプラグインとも自在に組み合わせることができます。
オプション一覧(とデフォルト値)
x: 10,
y: 10,
width: 300,
maxWidth: 0,
minWidth: 0,
height: 200,
maxHeight: 0,
minHeight : 0,
//ウィンドウがドッキングできる位置を | で区切って指定します
windowMode: "top | left | right |
bottom | fill",
//ウィンドウのタイトルに描画される文字列。
caption: "Window",
//未実装
closeButton: true,
//初期のドッキング位置
docking: DOCK.NONE,
//タイトルバーを表示するか
windowStyle: true
ちなみに、このページの一番上の白い部分はwindowStyle:falseで表示してます
まず、<head>要素内に以下のように記述し、jQueryとdockedwindowsを読み込みます。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dockedwindows.min.js"></script>
次に
ウィンドウと、ウィンドウを表示するためのエリアを作成します。
<div id="container"></div>
<div class="window" data-caption="タイトル" data-x="25" data-y="65">
ウィンドウの内容
</div>
そして最後にJavaScriptを記述します。
<script type="text/javascript">
var area =
$('#container').dockedWindows();
$('.window').setDockedWindow(area);
</script>
以上です。
以下のように、タイトルなどのオプションを一斉に設定することもできます。
$('.window').setDockedWindow(area, {
x: 10,
y: 20,
width: 500
});
数値の指定では単位(px)を入れてはいけません。