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. nodejs请求中获取参数值的方法

    req.params.xxxxx 从path中的变量 req.query.xxxxx 从get中的?xxxx=中 req.body.xxxxx 从post中的变量

  2. [转]C#中StreamReader读取中文出现乱码

    摘自:C#中StreamReader读取中文出现乱码 原因是自Windows 2000之后的操作系统在文件处理时默认编码采用Unicode所以.NET文件的默认编码也是Unicode.除非另外指定,S ...

  3. Centos6.5安装部署nodejs

    使用编译好的包安装 一.在官网下载包 https://nodejs.org/en/download/ 二.把包传送到服务器,进入到包目录并解压 tar axvf node-v6.9.5-linux-x ...

  4. IOS 创建一个可以随意拉伸不变形的图片

    创建一个扩展 UIImage的类 #import "UIImage_Extension.h" @implementation UIImage+Extension /** *返回一张 ...

  5. 【UVA10652】Board Wrapping（求凸包面积）

    点此看题面 大致题意: 告诉你若干个矩形的重心坐标.长.宽和相对\(y\)轴的偏转角度,求矩形面积和与能围住这些矩形的最小凸包面积之比. 矩形面积和 这应该是比较好求的吧. 已经给了你长和宽,直接乘起 ...

  6. 【洛谷2216】[HAOI2007] 理想的正方形（二维RMQ）

    点此看题面 大致题意: 求出一个矩阵中所有\(n*n\)正方形中极差的最小值. 另一种做法 听说这题可以用单调队列去做,但是我写了一个二维\(RMQ\). 二维\(RMQ\) \(RMQ\)相信大家都 ...

  7. tableViewcell上放定时器

    tableviewcell上的定时器: 1.创建一个管理定时器的TimerManger类, TimerManger.h #import <Foundation/Foundation.h> ...

  8. 2018.6.22 Java试题测试结果

    如何从有数字规律的网址抓取网页并保存在当前目录?假设网址为 http://test/0.xml,其中这个数字可以递增到100. for((i=0;i<100;++i));do wget http ...

  9. linux用命令行运行matlab的.mat文件

    入m文件所在目录后,运行 $ matlab -nodesktop -nosplash -r matlabfile 只用文件名matlabfile,不能添加.m

  10. 利用Theano理解深度学习——Multilayer Perceptron

    一.多层感知机MLP 1.MLP概述 对于含有单个隐含层的多层感知机(single-hidden-layer Multi-Layer Perceptron, MLP),可以将其看成是一个特殊的Logi ...