- Web 2.0 Integration


QrONE Pulldown

QrONE Pulldownは、ウェブ上で拡張されたプルダウンメニュー付き <input type="text"> 部品を提供する小型の JavaScript ファイルです。見た目のままです。


| HOME | Components | ColorPicker | Pulldown | Spinner | TextArea |


以下が実際に利用可能になるプルダウン付き <input> のサンプルです。メニューを表示してそれを選択できるようになっています。


ダウンロード

QrONE ColorPicker は QrONE Components の一つです。実行コードのダウンロードはそちらからどうぞ

導入方法

<link rel="stylesheet" type="text/css" href="qrx/qrpulldown.css">
<SCRIPT lang="JavaScript" src="qrx/qrcpulldown.js"></SCRIPT>

を、<head> ~ </head> 内に記述し

<SCRIPT lang="JavaScript"><!--
var pulldown= new QrPulldown("value","5","pull1"); //value, size, name
pulldown.render();
pulldown.addItem("item1","item1");
pulldown.addItem("item2 - Can <b>be</b> HTML","item2");
pulldown.addItem("item3","item3");
pulldown.addItem("item4","item4");
--></SCRIPT>

を、入力ボックスが必要な位置に挿入してください。上記のコードに対応する従来のタグは <input type="text" value="value" size="5" name="pull1"/> になります。

関数

var pulldown = new QrPulldown(value, size, name);
QrSpinner オブジェクトを作ります。一つに一つ必要です。<inputvalue="..." size="..." name="..."/> の各値を指定します。
pulldown.set(value);
var value = pulldown.get();
値を取得・設定します。
pulldown.render();
QrPulldown コンポーネントを描画する HTML を記述場所に document.write します。document.write(spinner.getHTML()) と等価です。
var html = pulldown.getHTML();
描画用 HTML を取得します。スクリプトから div.innerHTML などに流し込みたいときに利用してください。<SCRIPT> タグをそのまま流し込んでもうまく動かない事が多いです。
pulldown.onChange = function(value){}
値の変化時に呼び出されます。変化後の値を引数にとる関数を代入します。

機能と仕様

Ajax 等の通信などは行っていません。通常の <input type="text"> の後ろにプルダウンメニュー表示用のボタン画像を付け加えただけの簡単な部品です。
Copyright © 2006 Qronon. All rights reserved.