jQuery Dialog对话框组件的用法（附带实例）

对话框（Dialog）是一个悬浮窗口，包含一个标题栏和一个内容区域。对话框可以移动、重新调整大小，默认情况下通过单击“×”图标关闭。

使用对话框的时候：

如果内容长度超过对话框的最大高度，滚动条会自动出现。
使用对话框时，底部按钮栏和半透明的模式覆盖层是最常见的添加选项。

对话框部件使用 jQuery UI CSS 框架来定义它的外观和感观的样式。如果需要使用对话框指定的样式，则可以使用如下 CSS class 名称：

ui-dialog：对话框的外层容器；
ui-dialog-titlebar：包含对话框标题和关闭按钮的标题栏；
ui-dialog-title：对话框标题周围的容器；
ui-dialog-titlebar-close：对话框的关闭按钮；
ui-dialog-content：对话框内容周围的容器；
ui-dialog-content：对话框内容周围的容器；
ui-dialog-buttonpane：包含对话框按钮的面板。只有当设置了 buttons 选项时才呈现；
ui-dialog-buttonset：按钮周围的容器。

【实例】用对话框演示创建新用户的过程，具体实现时在内容区域嵌入 <form> 标记，设置 modal 选项值为 true，并通过 buttons 选项来指定主要的和次要的用户动作。程序开发步骤如下：

新建一个 index.html 文件；
复制 jQuery UI 文件夹的 jquery-ui-1.13.2.custom 和 index.html 放在一起。
使用 VS Code 打开 index.html 文件，在 index.html 文件中编写如下代码，实现在网页中显示对话框的功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<title>对话框（Dialog）的使用</title>
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script>
$(function(){
    var $name   = $("#name");        // id为属性值name的input对象
    $email      = $("#email");       // id为属性值email的input对象
    $password   = $("#password");    // id为属性值password的input对象
    allFields   = $([]).add($name).add($email).add($password); // 将以上3个jquery对象添加到allFields中
    $tips       = $(".validateTips"); // class属性值为validateTips的对象，即提示信息所在的对象

    // 更新提示信息
    function updateTips(t){
        $tips
            .text(t)
            .addClass("ui-state-highlight");
        setTimeout(function(){
            $tips.removeClass("ui-state-highlight", 1500);
        }, 500);
    }

    /*
    检测输入信息的长度
    参数 o 为要检测的 input 对象
    参数 n 为提示信息中文本框字段的名称
    参数 min 为所需长度的最小值
    参数 max 为所需长度的最大值
    */
    function checkLength(o, n, min, max){
        if(o.val().length > max || o.val().length < min){
            o.addClass("ui-state-error");
            updateTips("" + n + " 的长度必须在 " + min + " 和 " + max + " 之间。");
            return false;
        }else{
            return true;
        }
    }

    /*
    使用正则表达式检测输入内容
    参数 o 为要检测的 input 对象
    参数 regexp 为要使用的正则表达式
    参数 n 为要修改的提示信息
    */
    function checkRegexp(o, regexp, n){
        if(!(regexp.test(o.val()))){
            o.addClass("ui-state-error");
            updateTips(n);
            return false;
        }else{
            return true;
        }
    }

    $("#dialog-form").dialog({
        autoOpen: false,            // 不自动显示对话框
        height: 300,                // 设置对话框的高度为300px
        width: 350,                 // 设置对话框的宽度为350px
        modal: true,                // 以模态方式打开对话框，即页面背景变灰
        buttons: {
            "创建一个用户": function(){
                var bValid = true;
                allFields.removeClass("ui-state-error");
                bValid = bValid && checkLength($name, "用户名", 3, 16);  // 用户名为3～16位
                bValid = bValid && checkLength($email, "邮箱", 6, 80);   // 邮箱为6～80位
                bValid = bValid && checkLength($password, "密码", 5, 16); // 密码为5～16位
                bValid = bValid && checkRegexp($name, /^[a-z]([0-9a-z_])+$/i, "用户名必须由 a～z、0～9、下画线组成，且必须以字母开头。");
                if(bValid){
                    $("#users tbody").append("<tr>" +
                        "<td>" + $name.val() + "</td>" +
                        "<td>" + $email.val() + "</td>" +
                        "<td>" + $password.val() + "</td>" +
                        "</tr>");
                    $(this).dialog("close"); // 关闭对话框
                }
            },
            "取消": function(){          // 单击“取消”按钮
                $(this).dialog("close"); // 关闭对话框
            }
        },
        close: function(){
            allFields.val("").removeClass("ui-state-error");
        }
    });

    // 单击“创建新用户”按钮时打开对话框
    $("#create-user")
        .button()
        .click(function(){
            $("#dialog-form").dialog("open");
        });
});
</script>
</head>
<body>
<div id="dialog-form" title="创建新用户">
    <p class="validateTips">所有的表单字段都是必填的。</p>
    <form>
        <fieldset>
            <label for="name">名字</label>
            <input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all">
            <label for="email">邮箱</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
        </fieldset>
    </form>
</div>

<div id="users-contain" class="ui-widget">
    <h1>已有的用户：</h1>
    <table id="users" class="ui-widget ui-widget-content">
        <thead>
            <tr class="ui-widget-header">
                <th>名字</th>
                <th>邮箱</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>c.biancheng.net</td>
                <td>2758010091@qq.com</td>
                <td>c.biancheng.net</td>
            </tr>
        </tbody>
    </table>
</div>
<button id="create-user">创建新用户</button>
</body>
</html>

使用 Chrome 浏览器运行 index.html 文件，在页面中显示已有的用户，效果如下图所示：

图 1 显示已有的用户

单击图 1 中的“创建新用户”按钮，弹出一个“创建新用户”模态对话框。该对话框中实现的是创建新用户的功能，效果如下图所示：

图 2 “创建新用户”模态对话框

jQuery Dialog对话框组件的用法（附带实例）

相关文章