`

jquery ui中的dialog

阅读更多

        听说jquery ui中dialog和easy ui中的dialog很像,因为没有用过easy ui,但在工作中有用到jquery ui中dialog,于是从官网上将例子看了下,并记录如下。

实例一

        这是一个很简单的应用,打开一个对话框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery-1.10.2.js"></script>
  <script src="jquery-ui.js"></script>
  <link rel="stylesheet" href="style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

</body>
</html>
       代码$( "#dialog" ).dialog();加载页面的时候弹出一个对话框。效果如下:

 

实例二

        点击按钮,弹出带动画功能的对话框,定义显示和影藏效果,effect: "blind":打开时时百叶窗效果,从上到下显示,effect: "explode"关闭时是爆发,碎片效果。

        这里不是页面加载的时候就显示对话框,而是点击添加账号的时候弹出这个对话框,所以要先定义这个对话框“$( "#dialog" ).dialog({,”,点击添加按钮的时候弹出对话框“dialog.dialog( "open" );”。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery-1.10.2.js"></script>
  <script src="jquery-ui.js"></script>
  <link rel="stylesheet" href="style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
<button id="opener">Open Dialog</button>

</body>
</html>

        运行效果:

 

实例三

        作用是弹出一个模态确认对话框,mode:true,不能操作后面的父页面,除非关闭当前的对话框。在对话框上加了两个按钮,一个确认,一个取消,可以分别做一些操作,其实也不限于这两个按钮,如果需要的话可以在下面添加任意多个按钮,实现任意多的功能。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Modal confirmation</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery-1.10.2.js"></script>
  <script src="jquery-ui.js"></script>
  <link rel="stylesheet" href="style.css">
  <script>
  $(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });
  </script>
</head>
<body>
 
<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
 
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

</body>
</html>

        运行效果:


 

实例四

        带form功能的对话框,这个例子有些复杂,可以实现验证,请求等功能。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Modal form</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery-1.10.2.js"></script>
  <script src="jquery-ui.js"></script>
  <link rel="stylesheet" href="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 dialog, form,
 
      // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
      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])?)*$/,
      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( "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;
      }
    }
 
    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 = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Create an account": addUser,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
        allFields.removeClass( "ui-state-error" );
      }
    });
 
    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
    });
 
    $( "#create-user" ).button().on( "click", function() {
      dialog.dialog( "open" );
    });
  });
  </script>
</head>
<body>
 
<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>
  <form>
    <fieldset>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
      <label for="email">Email</label>
      <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
      <label for="password">Password</label>
      <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
 
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </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">Create new user</button>

</body>
</html>

        运行效果:

        点击添加用户弹出对话框

        元素验证失败时


        这个带请求功能的对话框,代码很严谨,例子很经典!

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])?)*$/,
name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );

        定义元素变量,要用到的验证,allFields = $( [] ).add( name ).add( email ).add( password ),这个用来把要用到的变量加到集合里面,用来添加和删除css样式,后面会用到的,很巧妙,$( [] )这个写法可以把多个元素添加到一个集合中。

function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
}

        给元素添加文字和css样式,并且在500毫秒内移除这个样式。

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;
      }
}

        检查输入文字的长短,4个参数分别是元素本身,元素名称,最小长度,最大长度。

function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
}

        用正则表达式检查元素是否符合规则,3个参数,元素本身,正则表达式,错误提示。

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;
}

        添加用户的方法,验证方法valid = valid && 这个用的很巧妙,连续利用了&&操作,这里的写法非常的灵活也很巧妙。在这里可以实现具体的功能,也可以在form里面添加action,form到具体页面中操作。

dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Create an account": addUser,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
        allFields.removeClass( "ui-state-error" );
      }
});

        这里是最主要的功能,一个定义一个对话框,其中有个2个按钮,一个是添加一个账号,访问addUser函数,一个是取消,直接定义关闭对话框,最后还定义了默认的关闭功能,form中清除元素的值,清除错误提示。

form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
});

        定义form,其实就是页面中的form,还定义了提交时请求动作,首先取消默认事件,然后执行addUser。

$( "#create-user" ).button().on( "click", function() {
      dialog.dialog( "open" );
});

        给添加用户按钮绑定事件,这里绑定事件没有直接.click,也没有live,也没有trigger,on是jquery官方推荐的一个绑定函数方法。注意这里不是页面加载的时候就显示对话框,而是点击添加账号的时候弹出这个对话框,所以要先定义这个对话框“dialog = $( "#dialog-form" ).dialog({”,点击添加按钮的时候弹出对话框“dialog.dialog( "open" );”。

 

实例五

        模态对话框,作用是弹出一个模态对话框,mode:true,其实就是后面不能回到后面的父页面,除非关闭当前的对话框。在对话框后面加了一个OK关闭按钮。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Modal message</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery-1.10.2.js"></script>
  <script src="jquery-ui.js"></script>
  <link rel="stylesheet" href="style.css">
  <script>
  $(function() {
    $( "#dialog-message" ).dialog({
      modal: true,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });
  </script>
</head>
<body>
 
<div id="dialog-message" title="Download complete">
  <p>
    <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
    Your files have downloaded successfully into the My Downloads folder.
  </p>
  <p>
    Currently using <b>36% of your storage space</b>.
  </p>
</div>
 
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

</body>
</html>
        运行效果:



实例来源:http://jqueryui.com/dialog/#modal-message

  • 大小: 4.9 KB
  • 大小: 6.6 KB
  • 大小: 9.4 KB
  • 大小: 12.6 KB
  • 大小: 13.4 KB
  • 大小: 10.3 KB
分享到:
评论

相关推荐

    jquery ui Dialog 添加最大最小化按钮控制

    在IT领域,jQuery UI是一个非常流行的前端开发库,它提供了许多可交互的用户界面组件,如Dialog(对话框)就是其中之一。"jquery ui Dialog 添加最大最小化按钮控制"的主题涉及如何扩展jQuery UI Dialog的功能,使其...

    jqueryUI_dialog实例

    总结来说,"jqueryUI_dialog实例"主要涉及了如何使用jQuery UI库中的Dialog组件创建交互式的对话框,并通过添加按钮和配置参数来实现特定的功能。掌握这些知识,能够帮助开发者构建更具有吸引力和用户体验友好的Web...

    jQuery UI Frame Dialog官方修正版(官方1.1.2版本上面有问题)

    jQuery UI Frame Dialog是一款基于jQuery UI库的对话框插件,用于在网页中创建具有框架效果的弹出对话框。在官方1.1.2版本中,存在一个CSS加载问题,导致对话框的样式可能无法正常显示,影响了用户体验。这个问题在...

    jquery ui dialog 扩展

    在前端开发中,jQuery UI Dialog是一个非常实用的组件,它提供了弹出对话框的功能,可以用于警告、确认、信息提示等场景。这篇内容将深入探讨jQuery UI Dialog的扩展,包括如何自定义行为、增强功能以及与其他技术...

    jquery-ui-dialog-demo

    在 `jquery-ui-dialog-demo` 中,`alert` 和 `confirm` 功能是通过 Dialog 组件模拟实现的。这允许开发者自定义对话框的外观和行为,相比原生的 `window.alert` 和 `window.confirm` 函数,它们提供了更多的定制空间...

    JQuery UI 中文帮助文档

    1. **引入库文件**:首先在HTML文件中引入jQuery库和jQuery UI的CSS与JS文件,确保正确加载。 2. **选择元素**:通过jQuery选择器选取需要应用组件的DOM元素。 3. **调用方法**:对选中的元素调用jQuery UI提供的...

    JQuery UI Dialog使用样例

    在本篇文章中,我们将深入探讨如何使用 jQuery UI 实现 Dialog,并通过实例来展示其用法。 1. **引入 jQuery 和 jQuery UI** 在使用 Dialog 之前,确保你的页面已经引入了 jQuery 和 jQuery UI 的 CSS 和 JS 文件...

    jquery.ui.dialog

    里面是经过修改的jquery.ui.dialog.js(版本jQuery UI Dialog 1.8.12),添加了parentElement: 'body',详情查看http://forum.jquery.com/topic/dialog-will-move-its-div-tag-to-body

    JQuery UI Dialog

    在本文中,我们将详细介绍 JQuery UI Dialog 的一些重要属性和方法,并提供实践中常见的应用场景。 一、autoOpen 属性 autoOpen 属性用于设置对话框是否在页面加载完成后自动打开。如果将其设置为 true,那么...

    jQuery UI dialog 的使用

    在web开发中,jQuery UI是一个提供丰富交互效果的JavaScript库,它为jQuery增强了许多高级的UI组件。本知识点专注于jQuery UI的dialog组件的使用方法。 首先,要使用jQuery UI的dialog组件,必须确保已经正确引入了...

    jqueryUI插件中Dialog的运用

    **jQuery UI插件中的Dialog组件详解** jQuery UI是一款强大的JavaScript库,它提供了丰富的用户界面组件,包括对话框(Dialog)、日期选择器、滑块、排序等。Dialog组件是jQuery UI中的一个核心功能,用于创建模态...

    Jquery UI dialog 详解 (弹出层)

    Jquery UI Dialog 是 jQuery UI 库中的一个重要组件,它提供了一个简洁而强大的界面来创建对话框或者弹出层。通过简单的配置和使用,开发人员可以轻松地集成各种交互式的弹出窗口到他们的网站或应用中。本文档将详细...

    jQuery UI组件 jQuery UI

    `development-bundle`目录包含未压缩和未合并的jQuery UI资源,适合在开发过程中使用,便于调试和定制。而`css`和`js`目录则包含已经压缩和合并的文件,适用于生产环境,以减少加载时间和网络带宽。 总的来说,...

    jquery.ui.dialog修改版,支持closable

    在原始的jQuery UI Dialog中,关闭按钮是默认显示的,且按下ESC键会关闭Dialog。如果我们想要禁用关闭按钮和ESC键关闭功能,可以使用`closable`选项。然而,这个选项并不在官方文档中,我们需要在`jquery.ui.dialog....

    jQuery_UI全教程之一(dialog的使用教程).

    在这个“jQuery UI全教程之一”中,我们将重点关注dialog组件的使用。 Dialog组件在jQuery UI中扮演着弹出窗口的角色,常用于创建登录、注册、消息提示等交互功能。它具有高度的可定制性,可以根据需求调整样式、...

    JQueryUI,EasyUI一些控件的使用

    在本文中,我们将深入探讨JQueryUI和EasyUI这两个JavaScript库在创建用户界面时的一些关键控件和功能,包括表单、Tab切换以及样式切换。它们都是为了提升Web应用程序的用户体验和交互性而设计的。 首先,让我们了解...

    jquery-ui.css、jquery-ui.js下载

    例如,要创建一个对话框,只需简单调用`.dialog()`方法,jQuery UI会自动处理剩下的布局、事件绑定和动画效果。 jQuery UI的组件丰富多样,例如: 1. **Dialogs** - 提供模态和非模态对话框,用于展示信息、警告或...

    jquery UI中文文档

    在提供的压缩包文件中,可以看到不同版本的 jQuery UI,例如 `jquery-ui-1.10.3.zip` 和 `jquery-ui-1.7.2.custom.zip`。每个版本可能引入了新功能、优化或修复了已知问题。开发者应根据项目需求和兼容性选择合适的...

    formValidator代码生成器+jQuery+formValidator+jquery.ui.dialog

    例如,当用户在表单中输入数据时,`formValidator`会实时验证输入,如果发现错误,可以通过`jquery.ui.dialog`弹出一个警告对话框,清晰地告知用户错误信息。同时,通过jQuery处理用户触发的事件,如点击“提交”...

Global site tag (gtag.js) - Google Analytics