YUIで簡単なスクリプトを作成する

ダイアログボックスを表示するスクリプト

　前回は、実際にYahoo! UI Library（YUI）を利用する方法を紹介しました。今回は、YUIを利用して、簡単なスクリプトを作成してみましょう。

　今回作るプログラムは、図1-1のようなダイアログボックスを表示するスクリプトです。データを管理する画面などで、データを削除したり変更するなどに間違いがないように「本当によいですか？」といった確認を促す時などに利用できます。それでは早速作ってみましょう。

　まずは、必要なライブラリなどをそろえていきます。前回（http://thinkit.jp/article/767/1/）紹介した通り、さまざまな利用方法がありますが、ここではYahoo!のサーバーから直接リンクするやり方で参照します。

　まず、「Yahoo! UI Library: SimpleDialog（http://developer.yahoo.com/yui/container/simpledialog/）」をご覧ください。

　はじめの「Getting Started」に必要なライブラリが列記されています。これらをすべてコピーしても構いませんし、「OPTIONAL」と書かれているライブラリは必要に応じて参照することができます。今回必要なライブラリは以下の通りです。









　次に、HTMLを準備します。ここではbutton要素を利用してボタンを作ります。見慣れない要素ですがスクリプトではよく使われます。

削除する

　ID属性を忘れずにつけてください。そして、スクリプトを記述します。head要素内に記述しましょう（図1-2）。これで準備完了です。

YUIの「スキン」という概念

　しかし、このままではダイアログボックスが表示されても、図1-3のように崩れた状態で表示されてしまいます。これは、スタイルシートが整っていないためです。YUIには「スキン」という概念があり、スキンを当てないとデザインが整いません。

　そこで、body要素に次のように書き加えましょう。



　これで完成です。動作を確認してみましょう。

　画面を表示し、ボタンをクリックするとダイアログボックスが表示されます。「いいえ」ボタンをクリックするとダイアログが閉じ、「はい」をクリックすると「complete.php」という別のファイルにジャンプします。こうして、確認ダイアログボックスを表示することができます。

　スクリプトの内容を簡単に確認しておきましょう。ダイアログの生成は「Yahoo.widget.SimpleDialog」というオブジェクトで行います。IDを付与した後、さまざまなオプションを設定することができます（図1-4）。

　設定の内容は、「Yahoo! UI Library: SimpleDialog（http://developer.yahoo.com/yui/container/simpledialog/#config）」を参照してください。

　ダイアログボックスに表示されるボタンの定義は、「buttons」というオプションで行います。

buttons: [ { text:"はい", handler:handleYes, isDefault:true },
{ text:"いいえ", handler:handleNo } ]

　handlerとは、そのボタンをクリックした時の内容を記述します。ここではスクリプトの上の方にその定義が記述されています。

var handleYes = function() { location.href = 'complete.php';};
var handleNo = function() { this.hide();};

　内容としては簡単で、「はい」をクリックした時は「location.href」で別画面へジャンプ、「いいえ」をクリックした時は「hide」メソッドでダイアログボックスを閉じます。

　こうして作った「simpledialog1」というオブジェクトは「render」および「show」のメソッドを順番に呼び出すと表示されます。「render」とは、ダイアログが所属する要素を指定するメソッドで、通常は「document.body」としておけば良いでしょう。div要素に所属させたい場合などは、そのID属性を指定します。

　そして、「show」メソッドを呼び出します。ここでは、ボタンがクリックされた時に表示させたいので「Yahoo.util.Event.addListener」メソッドを使って、イベント定義を行っています。これで、ボタンがクリックされたタイミングを監視してダイアログが表示されるというわけです。

　すべてを理解しようとするとなかなか難しいですが、まずはサンプルをそのまま利用し、改造を加えながら動きを確認するなどして、少しずつ理解していくと良いでしょう。次回も、別のサンプルを試してみましょう。