Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

JavaScriptライブラリ「Wijmo(ウィジモ)」の便利なウィジェットを試す

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

ダウンロード WijmoSample.zip (6.7 KB)

目次

jQuery UIよりも多機能なDialogウィジェット

 Dialogウィジェット(wijdialog)は、Web画面上にダイアログを表示するウィジェットです。Wijmoが下敷きとしているjQuery UIにもダイアログウィジェットが存在しますが、Wijmoのダイアログウィジェットには以下の機能が追加されています。ここでは追加された機能を中心に紹介していきます。

  • ダイアログの最大化・最小化
  • ダイアログの固定
  • コンテンツの切り替え・再読み込み

 あるHTML要素をダイアログとして表示する記述はリスト3です。表示されるダイアログの右上には、左から順に以下のボタンが表示されます。

  • ダイアログ固定:ダイアログをマウスでドラッグできるかどうかを切り替える
  • 更新:ダイアログ内容を更新する
  • 折りたたみ:ダイアログを折りたたむ(上部タイトルバーのみ表示)
  • 最小化:ダイアログを最小化する
  • 最大化:ダイアログを最大化する
  • 閉じる:ダイアログを閉じる
[リスト3]Dialogウィジェットの設定
require(["wijmo.wijdialog"], function(){ 
    $(function(){ 
        $("#dialog").wijdialog({ 
            autoOpen: true
        }); 
    }); 
}); 
図2 リスト3で表示されるダイアログ
図2 リスト3で表示されるダイアログ

 ダイアログのautoOpenプロパティにtrueを設定することで、ページ表示直後からダイアログを表示状態にすることができます。ページ表示後にダイアログを表示・非表示にするにはそれぞれopen・closeメソッドを使用します。

[リスト4]ダイアログの表示・非表示
$("#dialog").wijdialog("open");  // ダイアログを表示
$("#dialog").wijdialog("close"); // ダイアログを非表示

 ダイアログ右上に表示されるボタン(閉じるボタンを除く)はcaptionButtonsプロパティを指定することで非表示にすることができます。閉じるボタン以外をすべて表示しない指定方法はリスト5になります。

[リスト5]captionButtonsオプションの指定
captionButtons: {
    pin:      { visible: false }, // ダイアログ固定(Pin)ボタンを非表示にする
    refresh:  { visible: false }, // 更新(Refresh)ボタンを非表示にする
    toggle:   { visible: false }, // ダイアログ折りたたみ(Toggle)ボタンを非表示にする
    minimize: { visible: false }, // 最小化(Minimize)ボタンを非表示にする
    maximize: { visible: false }  // 最大化(Maximize)ボタンを非表示にする
} 

 contentUrlプロパティにURLを指定することで、ダイアログ内にWebページを表示することができます。

[リスト6]ダイアログ内にWebページを表示する指定
$("#dialog").wijdialog({
    contentUrl: "http://codezine.jp/"
}); 
図3 ダイアログ内にWebページを表示できる
図3 ダイアログ内にWebページを表示できる

 なおcontentUrlプロパティの値を変更することで、表示後に内容を差し替えることも可能です。ダウンロードできるサンプルコードには内容を変更する処理の例が含まれています。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5