通常,对话框依赖于divHTML中的。有时您可能想以编程方式从头开始创建对话框。这是一个使用交互功能动态创建的复杂模式对话框的示例。
的HTML
<div id="users-contain" class="ui-widget"> <h1>Existing Users:</h1> <table id="users" class="ui-widget ui-widget-content"> <thead> <tr class="ui-widget-header "> <th>Name</th> <th>Email</th> <th>Password</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>johndoe1</td> </tr> </tbody> </table> </div> <button id="create-user">Create new user</button>
的CSS
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; }
jQuery的
$(function() { // 为对话框,表单和用于验证表单中电子邮件地址的正则表达式定义变量 var dialog, form, emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/; // 检测到表单中的问题时更新提示的功能 // t =要输入的文本作为提示 function updateTips(t) { tips .text(t) .addClass("ui-state-highlight"); setTimeout(function() { tips.removeClass("ui-state-highlight", 1500); }, 500); } // 检查输入到字段中文本长度的功能 // o =对象引用(对象),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 + " must be between " + min + " and " + max + "."); return false; } else { return true; } } // 对字段中输入的文本执行正则表达式检查的功能 // o =对象引用(对象),regexp =正则表达式引用(RegExp对象),n =字段名称 function checkRegexp(o, regexp, n) { if (!(regexp.test(o.val()))) { o.addClass("ui-state-error"); updateTips(n); return false; } else { return true; } } //提交表单时调用的函数,它将检查所有表单字段。如果所有字段均包含文本,并且所有文本均符合要求,则将收集数据并将其添加回表中。 function addUser() { var valid = true; allFields.removeClass("ui-state-error"); valid = valid && checkLength(name, "username", 3, 16); valid = valid && checkLength(email, "email", 6, 80); valid = valid && checkLength(password, "password", 5, 16); valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter."); valid = valid && checkRegexp(email, emailRegex, "eg. ui@jquery.com"); valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"); if (valid) { $("#users tbody").append("<tr>" + "<td>" + name.val() + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "</tr>"); dialog.dialog("close"); } return valid; } // 创建对话框对象 dialog = $("<div>", { id: "dialog-form", title: "Create New User" }).dialog({ autoOpen: false, height: 400, width: 350, modal: true, buttons: { "Create an account": addUser, Cancel: function() { dialog.dialog("close"); } }, close: function() { form[0].reset(); allFields.removeClass("ui-state-error"); } }); // 在要显示的对话框中添加元素 dialog.html("<p class='validateTips'>All form fields are required.</p>") // 创建要在对话框中显示的表单对象 form = $("<form>").submit(function(e) { e.preventDefault(); addUser(); }).appendTo(dialog); // 向表单,字段集和字段添加元素 form.append($("<fieldset>")); var markup = ""; markup += "<label for='name'>Name</label>\r\n"; markup += "<input type='text' name='name' id='name' value='Jane Smith' class='text ui-widget-content ui-corner-all'>"; markup += "<label for='email'>Email</label><input type='text' name='email' id='email' value='jane@smith.com' class='text ui-widget-content ui-corner-all'>\r\n"; markup += "<label for='password'>Password</label><input type='password' name='password' id='password' value='xxxxxxx' class='text ui-widget-content ui-corner-all'>\r\n"; markup += "<input type='submit' tabindex='-1' style='position:absolute; top:-1000px'>\r\n"; // 将我们的字段HTML标记分配给字段集 form.find("fieldset").html(markup); // 分配变量以方便参考,后期创建和动态对象修改 var name = $("#name"), email = $("#email"), password = $("#password"), allFields = $([]).add(name).add(email).add(password), tips = $(".validateTips"); // 覆盖按钮的click事件以启动动态对话框 $("#create-user").button().on("click", function() { dialog.dialog("open"); }); });
供参考的工作示例:https://jsfiddle.net/Twisty/LqjuxLu1/