Web開発者必見! jQuery UI ウィジェット3選

思いのままのダイアログを - UI/Dialog

UI/Dialogはダイアログを簡単に作成することができるウィジェット。お知らせといった簡単な文章を表示するダイアログから、リサイズをサポート・ボタンラベルを自由に定義することができるダイアログも作成することが可能だ。こちらも他のウィジェットと同様、$('#dialog').dialog()というように、dialog()メソッドを呼び出して使用する。

HTMLファイル - dialog.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css">
<title>jQuery UI 1.5.1 Demos / Dialog</title>
<script type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/jquery-ui-personalized-1.5.1.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() 
{
    $('#dialog').dialog(
    { 
        buttons:
        { 
            "Ok": function()
            { 
                alert("Ok"); 
            }
        }
    }); 
}

);
-->
</script>
</head>

<body>

<h1>Dialog</h1>

<div id="dialog">これはダイアログです</div>

</body>

</html>

図6: Windows XP SP3 / Internet Explorer 7でアクセス

図7: FreeBSD 8-current / Firefox 3でアクセス

ボタンの生成以外とくにオプションを指定していないが、ダイアログをドラッグで移動可、リサイズができるようになっている。

次に各オプションを使用した、処理中止時事前に表示する確認ダイアログのサンプルを紹介する。

HTMLファイル - dialog_confirm.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css">
<title>jQuery UI 1.5.1 Demos / Dialog</title>
<script type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/jquery-ui-personalized-1.5.1.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() 
{
    $('#bt_cancel').click
    (
        function()
        {
            $('#dialog').dialog(
            {
                width: 370,
                draggable: false,
                resizable: false,
                modal: true,
                overlay:
                {
                    opacity: 0.5, 
                    background: 'black' 
                },
                title: '確認',
                open: function()
                {
                    $('#dialog').text('入力した内容は保存されません。よろしいですか？');
                },
                buttons:
                { 
                    '入力を続行する': function()
                    {
                        // 入力を続行する場合の処理をここに記述
                        // 今回はダイアログを閉じるのみ
                        $('#dialog').dialog('close');
                    },
                    '保存せずに中止する': function()
                    { 
                       // 保存せずに中止する場合の処理をここに記述
                    }
                }
            })
        }
    );
}

);
-->
</script>
</head>

<body>

<h1>Dialog</h1>

<form action="post.php" method="post">
   <p>
       名前: <input type="text" name="name">
   </p>
   <p>
       メールアドレス: <input type="text" name="mail">
   </p>
   <p>
       <input type="submit" id="bt_exec" value="送信">
       <input type="button" id="bt_cancel" value="保存せずに中止する">
   </p>
</form>

<div id="dialog">&nbsp;</div>

</body>

</html>

図8: Webブラウザに実装されているconfirm()よりも、柔軟なダイアログを作成することが可能だ

今回使用しているオプションは次のとおり(抜粋)。