一覧リストから項目を選べるテキスト
この編集可能テキストの応用として、テキストを入力するのでなく、あらかじめ用意した項目から選んでテキスト表示を変更するというものもあります。これも先ほどの編集可能テキストと似ていますから、併せて覚えておきましょう。
<span id="collection_tag">Windows</span>
<script type="text/javascript">
<!--
new Ajax.InPlaceCollectionEditor( 'collection_tag', 'ajax.php',{collection:["Windows","Linux","Mac OS X"]});
//-->
</script>
これもajax.phpに非同期通信して表示を変更していますが、このもajax.phpは先に作成したものをそのまま使いますので特に修正などは不要です。表示されたテキストをクリックすると、ポップアップメニューが現れ、ここで値を選択できるようになります。使い方は、InPlaceEditorとほとんど同じです。
new Ajax.InPlaceCollectionEditor( 'IDの指定', '送信先アドレス',{オプション設定});
唯一違うのは、オプション設定に「collection」という項目を用意し、そこでポップアップメニューに表示する項目を配列として用意しておく、という点です。後はほぼ同じ感覚で利用することができます。
筆者の環境では、IE7でポップアップメニューが一部機能しない現象が確認できました。筆者の環境によるものかも知れませんが、もしIE7でうまく動作しない場合には、Firefoxなど他のWebブラウザで動作確認をしてみてください。
入力支援機能付のフィールド
InPlaceEditorやInPlaceCollectionEditorはテキストを編集できるようにするものでしたが、テキストを入力するフィールドに機能を付加するためのものもあります。テキストを入力するとき、リアルタイムに候補を一覧で表示する入力支援機能を付加するものです。
<input id="auto_complete" type="text" size="30" />
<div id="sel_data" class="sel_data" style="display: none;"></div>
<script type="text/javascript">
<!--
var list_data = [
'Windows 98',
'Windows 2000',
'Windows XP',
'Windows Vista'
];
new Autocompleter.Local( 'auto_complete', 'sel_data',list_data,{});
//-->
</script>
div.sel_data ul {
list-style-type:none;
margin:0px;
padding:0px;
background-color:#ddddff;
}
div.sel_data ul li {
list-style-type:none;
cursor:pointer;
}
div.sel_data ul li.selected {
background-color:#aaaaff;
}
ページをリロードし、入力フィールドに「w」と書いてみてください。Wで始まる候補が下にずらっとポップアップして表示されます。ここからマウスでどれかを選択すれば、その項目が入力フィールドに書き出されます。
この入力支援機能では、2つのタグを用意します。1つは入力用の<input type="text">タグで、もう1つはポップアップメニューを組み込むためのタグ（<div>タグなど）です。この機能では、メニュー表示用に用意したタグにメニューが組み込まれ表示されるようになっているのです。
入力支援機能を提供するのは、Autocompleter.Localというオブジェクトです。これは次のようにしてオブジェクトを作成します。
new Autocompleter.Local( '入力フィールドのID', 'ポップアップメニューを組み込むID',表示リストの配列,{オプション属性});
入力フィールドと、ポップアップメニュー用の各タグのID、それに候補となるテキストを配列としてまとめたものを引数に指定します。引数を見れば分かるように、これはAjax機能は使いません。サーバ側に仕掛けは必要なく、HTMLページ単体で機能します。
まとめ
今回は、GUI関係のコンポーネントを中心に紹介をしました。Script.aculo.usには、この他に、さまざまなエフェクトを行う視覚効果機能も多数揃っていますが、それらについてはまた次の機会に紹介したいと思います。
ここでは、それぞれのコンポーネントの最も基本的な使い方だけに絞って説明をしましたが、それでも「たったこれだけで、高度なGUIが作れる」ということは感じられたのではないでしょうか。JavaScriptを使いこなせばこんなこともできるんだ、ということの一例として、Script.aculo.usは非常に面白い機能を提供してくれます。平凡なWebページに何かちょっとした仕掛けが欲しい……と思ったとき、ぜひScript.aculo.usのことを思い出してみてください。
