コンピュータクワガタ

かっぱのかっぱによるコンピュータ関連のサイトです

Dojoのcombobox

Dojoでcomboboxを設定してみる。
まず、Dojoのダウンロード
http://dojotoolkit.org/downloads
から、Dojo Toolkit 1.2.3: Dojo + Dijit + DojoXをダウンロードし、展開する。
展開すると、

  • dijit
  • dojo
  • dojox

という3つのフォルダができる。
同じ階層に、以下のHTMLを置くとコンボボックスができる。これはマニュアル通り(http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-specialized-input/auto-completer)のHTMLだが、cssJavaScriptのファイルはローカルを見るように変更している。また、JavaScriptファイルの読み込みで、dojo/dojo.xd.jsとなっているが、ここはdojo/dojo.jsとしている。一応ネットワーク越しにアクセスされても困るのでネットワークケーブルを抜いて実行してみる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Simple ComboBox</title>
    <style type="text/css">
        @import "dijit/themes/tundra/tundra.css";
        @import "dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="dojo/dojo.js"
        djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.ComboBox");
       function setVal1(value) {
           console.debug("Selected "+value);
       }
   </script>
</head>
<body class="tundra">
        <select name="state1"
                dojoType="dijit.form.ComboBox"
                autocomplete="false"
                value="California"
                onChange="setVal1">
                <option selected="selected">California</option>
                <option >Illinois</option>
                <option >New York</option>
                <option >Texas</option>
        </select>
</body></html>