jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库，可以使用它创建高度交互的 Web 应用程序。

在web页面的开发过程中，在添加元素的时候需要用到弹出窗口添加元素，最简便的就是直接通过一个隐藏的form来提交，在表单显示的时候通过js设置使得页面变暗和不可选，但是这样做未免过于麻烦，所需要的js语句也特别冗长，因此使用jQuery ui所提供的模态表单则显得简洁不少:

需要提到的是，jQueryui需要从 jQuery UI 网站上下载 jQuery UI 的副本：http://jqueryui.com/download/

然后根据自己的选择下载相应的组件

或者也可以通过jQueryUI的cdn来加载，不过在网速不佳的情况下有加载失败的可能性，下面是jQueryUI的cdn地址

官网CDN：http://code.jquery.com/ui/1.12.1/

大陆CDN加速：

https://cdnjs.loli.net/ajax/libs/jqueryui/1.9.2/

接着介绍模态表单的创建：

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI 对话框（Dialog） - 模态表单</title>

  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">

  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

  <link rel="stylesheet" href="jqueryui/style.css">

  <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" ),

      email = $( "#email" ),

      password = $( "#password" ),

      allFields = $( [] ).add( name ).add( email ).add( password ),

      tips = $( ".validateTips" );

    function updateTips( t ) {

      tips

        .text( t )

        .addClass( "ui-state-highlight" );

      setTimeout(function() {

        tips.removeClass( "ui-state-highlight", 1500 );

      }, 500 );

    }

    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;

      }

    }

    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,

      width: 350,

      modal: true,

      buttons: {

        "创建一个帐户": function() {

          var bValid = true;

          allFields.removeClass( "ui-state-error" );

          bValid = bValid && checkLength( name, "username", 3, 16 );

          bValid = bValid && checkLength( email, "email", 6, 80 );

          bValid = bValid && checkLength( password, "password", 5, 16 );

          bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "用户名必须由 a-z、0-9、下划线组成，且必须以字母开头。" );

          // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/

          bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );

          bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "密码字段只允许： 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" );

          }

        },

        Cancel: 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">

  </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>John Doe</td>

        <td>john.doe@example.com</td>

        <td>johndoe1</td>

      </tr>

    </tbody>

  </table>

</div>

<button id="create-user">创建新用户</button>

</body>

</html>

效果如下：

点击创建新用户后，原页面变暗，按钮和元素不可选：

使用jQuery ui创建模态表单的更多相关文章

  1. jQuery动态创建form表单并提交到后台(携带一定的数据进行页面跳转)

    今天遇到这么一个需求,携带一个编号一个名字跳转到另一个JSP页面,直接页面跳转(get携带数据)的话不太安全,于是想到到后台转发一下. 第一种:直接以表单提交方式的进行 JS代码: var form ...

  2. jquery动态创建form表单

    function exportExcel() { var merchantName = $('#merchantName').val(); var merchantNo = $('#merchantN ...

  3. jQuery UI 对话框（Dialog） - 模态表单

    <!doctype html><html lang="en"><head> <meta charset="utf-8" ...

  4. Jquery来对form表单提交（mvc方案）

    来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来 ...

  5. jquery通过class验证表单不能为空

    在开发系统时,往往都有某些表单数据为必填项,若用jQuery通过ID去验证,不仅会影响效率,还会有所遗漏,不易于后期维护. 本章将介绍如何利用jQuery,通过为表单配置class进行统一验证.(ID ...

  6. 用JS动态创建登录表单，报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  7. 快速创建InfoPath表单

    快速创建InfoPath表单 2010年已经过去了一半了,这时候再说初识InfoPath可能会被很多人笑话,但是又有多少人真正认识InfoPath呢?无论你是刚刚 听说这个东西还是它的老相好都请同我一 ...

  8. Cocos2d学习之路三（使用Zwoptex创建精灵表单和CCAnimate动画）

    创建精灵表单: 创建动画先要把图片整合到一个图片上然后生成plist文件: 方法下载Zwoptex软件:http://www.zwopple.com/zwoptex/ 然后打开选择 create ne ...

  9. 运用jQuery写的验证表单

    //运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

随机推荐

  1. MongoDB-2.6.0 (OpenLogic CentOS7.2)

    平台: CentOS 类型: 虚拟机镜像 软件包: mongodb basic software database linux open source 服务优惠价: 按服务商许可协议 云服务器费用:查 ...

  2. windows 7 X64 提示“com surrogate 已停止工作”的解决方案

    C:\Windows\SysWOW64\dllhost.exe 把以上文件添加至“数据执行保护”.

  3. POJ 2429 GCD & LCM Inverse（Miller-Rabbin素性测试，Pollard rho质因子分解）

    x = lcm/gcd,假设答案为a,b,那么a*b = x且gcd(a,b) = 1,因为均值不等式所以当a越接近sqrt(x),a+b越小. x的范围是int64的,所以要用Pollard_rho ...

  4. Problem D: 双向冒泡排序

    Problem D: 双向冒泡排序 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 447  Solved: 197[Submit][Status][We ...

  5. CUDA：Supercomputing for the Masses (用于大量数据的超级计算)-第三节

    原文链接 第三节:错误处理和全局内存性能局限 恭喜!通过对CUDA(Compute Unified DeviceArchitecture,即计算统一设备架构的首字母缩写)系列文章第一节和第二节,您现在 ...

  6. Servlet 的生命周期 及 注意事项 总结

    Servlet的生命周期 图解Servlet的生命周期 生命周期的各个阶段 实例化 :Servlet 容器创建 Servlet 的实例 初始化 :该容器调用init() 方法 请求处理 :如果请求Se ...

  7. 对mysql快速批量修改,查重

    更新UPDATE mytable SET myfield = CASE id WHEN 1 THEN 'value' WHEN 2 THEN 'value' WHEN 3 THEN 'value' E ...

  8. 第17题：打印1到最大的n位数

    面试题17:打印1到最大的n位数  题目:输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则打印出1.2.3一直到最大的3位数即999. 考点: 用字符串或者数组表达一个大数. 思路 1. ...

  9. mysql update 多表关联更新

    UPDATE new_schedules_spider_static_schedule s join new_scac_port p on p.`PORT` = s.`PORT` and p.SCAC ...

  10. 神经网络系列学习笔记(二)——神经网络之DNN学习笔记

    一.单层感知机(perceptron) 拥有输入层.输出层和一个隐含层.输入的特征向量通过隐含层变换到达输出层,在输出层得到分类结果: 缺点:无法模拟稍复杂一些的函数(例如简单的异或计算). 解决办法 ...