HOME > お役立ちツール > BrowsWin
【BrowsWin】 - ブラウザ内ウインドウ実装スクリプトライブラリ

BrowsWinは、ブラウザ内で利用できるウインドウをシンプルに実装するための、クロスブラウザ対応のスクリプトライブラリです。
ドラッグによるウインドウの移動や、ウインドウのリサイズ機能も実装しており、通常のアプリのウインドウに近い感覚で操作を行う事ができます。


1.サンプル
2.実装方法
3.カスタマイズ
4.関数リファレンス
5.更新履歴
6.ダウンロード
概要へ

サンプル

サンプルウインドウ2・3・4を呼び出します。


サンプルウインドウ5を呼び出します。
概要へ

実装方法

1. htmlヘッダにbrowswin.jsbrowswin.cssを追記します。
<script type="text/javascript" src="browswin.js"></script>
<link href="browswin.css" rel="stylesheet" type="text/css"/>

2. BrowsWinのオブジェクトを用意します。
/* オブジェクトを作成します。 */
//オブジェクト作成時にパラメータを指定する事でデザインのカスタマイズができます。
//パラメータにつきましては、後述の『カスタマイズ』の項をご参照下さい。
var bwin = new BrowsWin({
    id:"sample"
});

3. ウインドウにするDIVエレメントに設定を行います。
対象のDIVエレメントにIDを付加し(必須)、"window"属性を追記します。
値には設定するBrowsWinオブジェクトのIDを指定します。
<!-- 以下のdivエレメントはIDが"sample"であるコンテキストメニューを呼び出します。 -->
<!-- このほかにもBrowsWin特有の属性を幾つか付加する事で、ウインドウの設定を行う事ができます。 -->
<!-- これらの属性についきましては、後述の『カスタマイズ』の項をご参照下さい。 -->
<div id="window1" window="sample">
    ウインドウの内容
    …
</div>
概要へ

カスタマイズ

ウインドウの機能やデザインのカスタマイズは、BrowsWinオブジェクトを作成する際に幾つかのパラメータを指定したり、対象のDIVエレメントに属性を付加する事で実現できます。
/* パラメータによるカスタマイズの例 */
var bwin = new BrowsWin({
    id:"sample",
    classWindow:"my_window",
    classTitle:"my_title",
    minWidth:50,
    minHeight:50
});

カスタマイズに関するパラメータは以下の通りです。
id BrowsWinオブジェクトのIDを設定します。
未指定の場合は"BrowsWin"が設定されます。
classWindow ウインドウ全体のスタイルクラスを設定します。
デフォルトでは"browswin_win"が指定されています。
(これはbrowswin.cssに予め登録されているスタイルクラス名称です。)
classTitle ウインドウのタイトル部のスタイルクラスを設定します。
デフォルトでは"browswin_title"が指定されています。
(これはbrowswin.cssに予め登録されているスタイルクラス名称です。)
minWidth サイズ変更時、ウインドウがとれる幅の最小値を設定します。
デフォルトでは100です。
minWidth サイズ変更時、ウインドウがとれる幅の最小値を設定します。
デフォルトでは100です。

※デザインのカスタマイズに関しましては、browswin.cssの内容を修正する事でも行うができます。
 この方法の場合、BrowsWinを利用した全てのウインドウに設定内容が反映されます。
 個々のウインドウのデザインをカスタマイズしたい場合は、パラメータ指定が必要となります。


また、ウインドウの対象となるDIVエレメントに属性を付加する事で、個々のウインドウの状態を設定する事ができます。
<!-- 属性によるカスタマイズの例 -->
<div id="window1" window="sample" top="100" left="300" width="500" height="300">
    ウインドウの内容
    …
</div>

カスタマイズに関する属性は以下の通りです。
top ウインドウの初期表示位置の垂直方向位置を指定します。
未指定の場合は0が設定されます。
left ウインドウの初期表示位置の水平方向位置を指定します。
未指定の場合は0が設定されます。
width 初期表示時のウインドウの幅を指定します。
未指定の場合は300が設定されます。
height 初期表示時のウインドウの高さを指定します。
未指定の場合は200が設定されます。
display "none"を指定するとウインドウが初期表示されません。
ウインドウの表示を行う際には、show()関数を使用する必要があります。
(関数リファレンスをご参照下さい)
resizable "none"を指定するとウインドウのサイズは変更できなくなります。
概要へ

関数リファレンス

BrowsWinにはウインドウの動作に関するいくつかの関数があります。
show(id, [position]) : ウインドウを表示する。
idに指定されたIDを持つウインドウ(DIVエレメントのIDに相当します)を表示します。
positionに[top, left]を指定すると、指定位置にウインドウを表示させる事ができます。
position未指定の場合は、前回の表示位置にウインドウが表示されます。
hide(id) : ウインドウを非表示にする。
idに指定されたIDを持つウインドウ(DIVエレメントのIDに相当します)を非表示にします。
isShown(id) : ウインドウが表示されているかどうかの判断
idに指定されたIDを持つウインドウ(DIVエレメントのIDに相当します)が表示されている場合に、trueを返します。
非表示の場合はfalseを返します。
概要へ

更新履歴

2010/02/01  Ver1.0公開
概要へ

ダウンロード

以下のリンクからダウンロードする事ができます。
BrowsWin.zip (Ver1.0)
ページのトップ
ブラウザ位置[top:20, left:300]の位置に表示しているウインドウです。
「×」ボタンを押下するとウインドウを閉じます。
表示位置は前回の位置です。
セル1 セル2 セル3
1、1 1、2 1、3
2、1 2、2 2、3
固定位置に表示されます。
このウインドウはサイズ変更ができません。
固定位置に表示されます。

テキスト1:
テキスト2:
スタイル違いのウインドウです。