jQuery开发基础教程第8章 jQuery UI插件的使用.ppt

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, // 设置对话框的高度为300 width: 350, // 设置对话框的宽度为350 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 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