Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。3)は処理をモジュールという形で提供しています。Toolsのモジュールについて説明しました。今回は、プログラム作成にグラフィカルなユーザインタフェースを提供するウィジェット(Widgets)について説明します。4タブパネルまとめはじめに今回は、プログラム作成に、グラフィカルなユーザインタフェースを提供するウィジェット(Widgets)について説明して行きたいと思います。ウイジェットには、表などをページにポップアップさせるモジュールOverlay、スライダーを表示するモジュールSlider、タブパネルを可能にするインターフェースを提供するモジュールTabviewがあります。Libraryに注目している人。HTMLとJavaScriptを使える人を対象にしています。必要な環境HTMLとJavaScriptが作成できるエディターとインターネットにつながっているパソコンがあれば、例題の作成、確認ができます。ポップアップページ作成時、一時的に表などをポップアップさせたいときがあると思います。このような時便利な、ポップアップをサポートするモジュールOverlayの説明を行ないます。ポップアップで表示した表をボタンで表示/非表示にする例題を示します。以下が例題起動時の画面です。リスト1を見てください。JavaScriptとCSSのライブラリーです。現在バージョンは3.11です。URLを指定してつかうことも出来ます。(1)モジュールの形で提供されています。(2)コアモジュール/ユーティリティモジュールがあります。</div></div></body>(1)でモジュールoverlayを指定しています。(2)でoverlayの表示の指定を行っています。srcNodeで表示する対象を指定して、widthで幅を15文字に指定しています。(3)render()でメモリー上に作成し表示します。(4)show()は、render()で作成/表示された内容が非表示の時、表示させます。(5)hide()で非表示になります。他に表示場所を指定するset()、表示場所を移動するmove()などがあります。書き方をリスト2に示します。[リスト2].set()と.moveの書き方overlay.set("x",150);overlay.set("y",250);overlay.set("xy",[150,250]);overray.move(150,250);overray.move([150,250]);.set()はx,y,xyを指定して、値を指定します。.move()は、(150,250)か([150,250])のいずれかで位置を指定します。NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Technologies。執筆コミュニティ「WINGSプロジェクト」代表。