IWidgets オブジェクト(内部ウインドウ,テーブル等)

IWidgets オブジェクトとは,普通の HTML 要素に様々な機能を付加して操作性をアップさせることができる Javascript オブジェクトです。

現在利用可能な IWidgets オブジェクトには,以下のものがあります。

以下では各オブジェクトの機能と使い方を説明します。

IWindow : 内部ウインドウ

内部ウインドウとは,ブラウザ内部にウインドウを表示するためのオブジェクトです。
内部ウインドウには HTML で記述されたものならば何でも表示できます。

例えば,ここをクリック すると,青枠で囲まれた説明部分を内部ウインドウに表示します。

IWindow の機能

IWindow (内部ウインドウ) には以下の機能があります。

また,タイトルバーを非表示にしたり,枠線のドラックを抑制したりして,利用者によるウインドウ操作をできなくすることも可能です。(詳細は API リファレンスを)

IWindow の使用法

内部ウインドウは IWindow オブジェクトの操作により使用できます。
IWindow オブジェクトの操作は,以下の3ステップで行なえます。

  1. IWindow オブジェクトを使用可能にするために,スクリプト (conga.js) とCSSファイル (conga.css) を読み込み指定する。
  2. 表示したい内容をもつHTMLオブジェクトを引数に渡して IWindow オブジェクトを作成する。
  3. ウインドウの表示位置やサイズを設定する。

使用例 (ここをクリックすると表示します)

<html>
<head>

<link rel="stylesheet" href="../dhtml/conga.css" type="text/css">
<script type="text/javascript" src="../dhtml/conga.js" charset="UTF-8"></script>

<script type="text/javascript">
<!--
function showWindow() {
  var obj = document.getElementById("content");
  var win = new IWindow("test", obj);
  win.setSize(300,200);
}
//-->
</script>
</head>
<body onload="showWindow()">

 <div id="content">
  <p>ウインドウに表示する内容です。</p>
  <p>なんでも表示できます。</p>
 <div>

</body>
</html>

IWindow のコンストラクタは2つの引数を受け取ります。ひとつめはタイトルバーに表示する文字列,2つめはウインドウ表示するオブジェクト(HTML要素)です。
ここでは,setSize メソッドにより,ウインドウのサイズを設定していますが,他にも,setPosition, setBounds メソッドで表示位置あるいはサイズの設定を行なうことができます。
詳細は API リファレンスでご確認ください。

Celcel : Excel 風の操作性をもつテーブル

Web アプリケーションの中のテーブルを Excel ライクに操作できるようにするためのオブジェクトが Celcel です。
例えば,以下に表示されているテーブルは,今は普通のテーブルですが,ここをクリックすると Celcel に変換されます。

A B C D E
1
2
3
4
5
6
7
8
9
10

現在実装されている主な機能は以下の通りです。

Celcel の使用法

HTML で記述した普通の table オブジェクトを引数にして Celcel のコンストラクタを呼び出すことにより Celcel オブジェクトを作成することができます。
コンストラクタでは,固定行数・固定列数を指定することもできます省略可)。
Celcel オブジェクトの作成後は,必要に応じて高さ設定などを行なってください。
その他利用可能なメソッドは API リファレンスでご確認ください。

Celcel 化可能な table の記述方法

Celcel を使用するためには,以下のように table タグを記述する必要があります。

なお,Celcel 処理後の table 位置を固定するために,table オブジェクトには div タグで専用の(該当 table 以外に子要素をもたない)親要素を指定しておくこと(<div>...</div>で囲んでおくこと)をお勧めします。

使用例 (ここをクリックすると表示します)

<html>
<head>
<link rel=stylesheet type="text/css" href="../dhtml/conga.css">
<script type="text/javascript" src="../dhtml/conga.js" charset="UTF-8"></script>
<script type="text/javascript">
<!--
function toCelcel() {
  var obj = document.getElementById("table");
  var celcel = new Celcel(obj, 1, 1);
  celcel.setHeight(100);
}
//-->
</script>
</head>
<body onload="toCelcel()">

<div>
<table id="table">

<col style="width:20px"/>
<col style="width:80px"/>
<col style="width:120px"/>
<col style="width:40px"/>

<tr>
 <th></th>
 <th>A</th>
 <th>B</th>
 <th>C</th>
</tr>

<tr>
 <th>1</th>
 <td><input type="text" value="aaa"/></td>
 <td><input type="text" value="abcdefghijklmnopqrstuvwxyz"/></td>
 <td><input type="text" value="あいうえお"/></td>
</tr>

<tr>
 <th>2</th>
 <td><input type="text" value="aaa"/></td>
 <td><input type="text" value="abcdefghijklmnopqrstuvwxyz"/></td>
 <td><input type="text" value="あいうえお"/></td>
</tr>

<tr>
 <th>3</th>
 <td><input type="text" value="aaa"/></td>
 <td><input type="text" value="abcdefghijklmnopqrstuvwxyz"/></td>
 <td><input type="text" value="あいうえお"/></td>
</tr>

</table>
</div>

</body>
</html>

その他・注意点

2005年9月時点では,firefox ではいまひとつちゃんと動かない部分がいくつかあります。

IMenu : コンテキストメニュー(右クリックメニュー)

IMenu は,右クリックした際に表示されるメニューです。
IMenu の addItem メソッドでメニュー項目を追加し,addTarget メソッドで右クリックメニュー表示対象となるオブジェクトを指定することにより,右クリックメニュー表示が可能になります。
詳細は API リファレンスでご確認ください。

使用例 (ここをクリックすると表示します)

<html>
<head>
<link rel="stylesheet" href="../dhtml/conga.css" type="text/css">
<script type="text/javascript" src="../dhtml/conga.js" charset="UTF-8"></script>
<script type="text/javascript">
<!--
function init() {
  var menu = new IMenu();
  menu.addItem("テスト1", test1);
  menu.addItem("テスト2", test2);
  var obj = document.getElementById("target");
  menu.addTarget(obj);
}

function test1() {alert("test1");}
function test2() {alert("test2");}

//-->
</script>
</head>
<body onload="init()">

<div style="margin:20px;width:100px;height:100px;border:solid blue 1px;"
     id="target">
メニューが表示できる部分
</div>

</body>
</html>

IDebug : デバッグウインドウ

IDebug は内部ウインドウを使用したデバッグ表示のためのツールです。
Javascript の任意の場所で,IDebug.print("...") メソッドを呼び出せば,デバッグ表示を行なうことができます。
多機能ではありませんが,alert("...") でのデバッグ表示に比べれば「OK」ボタンを押さなくて良い分楽ではないかと...。

使用例 (ここをクリックすると表示します)

<html>
<head>
<link rel="stylesheet" href="../dhtml/conga.css" type="text/css">
<script type="text/javascript" src="../dhtml/conga.js" charset="UTF-8"></script>
</head>
<body>

<div style="margin:20px;width:100px;height:100px;border:solid blue 1px;"
 onmouseover="IDebug.print('きた')">
ここにマウスが載るとデバッグ表示します
</div>

</body>
</html>

TOP