topical media & game development

talk show tell print

lib-jquery-style-custom-development-bundle-demos-dialog-modal-form.htm / htm



  <!doctype html>
  <html lang="en">
  <head>
          <title>jQuery UI Dialog - Modal form</title>
          <link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
          <script type="text/javascript" src="jquery-1.3.2.js"></script>
          <script type="text/javascript" src="ui/ui.core.js"></script>
          <script type="text/javascript" src="ui/ui.draggable.js"></script>
          <script type="text/javascript" src="ui/ui.resizable.js"></script>
          <script type="text/javascript" src="ui/ui.dialog.js"></script>
          <script type="text/javascript" src="ui/effects.core.js"></script>
          <script type="text/javascript" src="ui/effects.highlight.js"></script>
          <script type="text/javascript" src="external/bgiframe/jquery.bgiframe.js"></script>
          <link type="text/css" href="lib-jquery-style-custom-development-bundle-demos-demos.css" rel="stylesheet" />
          <style type="text/css">
                  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-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
                  .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
                  
                  
          </style>
          <script type="text/javascript">
          $(function() {
                  
                  var name = $("#name"),
                          email = $("#email"),
                          password = $("#password"),
                          allFields = $([]).add(name).add(email).add(password),
                          tips = $("#validateTips");
  
                  function updateTips(t) {
                          tips.text(t).effect("highlight",{},1500);
                  }
  
                  function checkLength(o,n,min,max) {
  
                          if ( o.val().length > max || o.val().length < min ) {
                                  o.addClass('ui-state-error');
                                  updateTips("Length of " + n + " must be between "+min+" and "+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").dialog({
                          bgiframe: true,
                          autoOpen: false,
                          height: 300,
                          modal: true,
                          buttons: {
                                  'Create an account': 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,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
                                          // 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])+/,"Password field only allow : 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').click(function() {
                          $('#dialog').dialog('open');
                  })
                  .hover(
                          function(){ 
                                  this.addClass("ui-state-hover"); 
                          },
                          function(){ 
                                  this.removeClass("ui-state-hover"); 
                          }
                  ).mousedown(function(){
                          this.addClass("ui-state-active"); 
                  })
                  .mouseup(function(){
                                  this.removeClass("ui-state-active");
                  });
  
          });
          </script>
  </head>
  <body>
  
  <div class="demo">
  
  <div id="dialog" title="Create new user">
          <p id="validateTips">All form fields are required.</p>
  
          <form>
          <fieldset>
                  <label for="name">Name</label>
                  <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
                  <label for="email">Email</label>
                  <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
                  <label for="password">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>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" class="ui-button ui-state-default ui-corner-all">Create new user</button>
  
  </div><!-- End demo -->
  
  <div class="demo-description">
  
  <p>Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
  
  </div><!-- End demo-description -->
  
  </body>
  </html>
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.