jQuery UI 實(shí)例 – 對(duì)話框（Dialog）

2022-06-07 15:44 更新

jQuery UI 實(shí)例 - 對(duì)話框（Dialog）

在一個(gè)交互覆蓋層中打開內(nèi)容。

如需了解更多有關(guān)dialog部件的細(xì)節(jié)，請(qǐng)查看API文檔對(duì)話框部件（Dialog Widget）。

默認(rèn)功能

基本的對(duì)話框窗口是一個(gè)定位于視區(qū)中的覆蓋層，同時(shí)通過一個(gè) iframe 與頁(yè)面內(nèi)容分隔開（就像select元素）。它由一個(gè)標(biāo)題欄和一個(gè)內(nèi)容區(qū)域組成，且可以移動(dòng)，調(diào)整尺寸，默認(rèn)可通過'x'圖標(biāo)關(guān)閉。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 對(duì)話框（Dialog） - 默認(rèn)功能</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>
 
<div id="dialog" title="基本的對(duì)話框">
  <p>這是一個(gè)默認(rèn)的對(duì)話框，用于顯示信息。對(duì)話框窗口可以移動(dòng)，調(diào)整尺寸，默認(rèn)可通過 'x' 圖標(biāo)關(guān)閉。</p>
</div>
 
 
</body>
</html>

動(dòng)畫

可以通過為show/hide屬性指定一個(gè)特效來動(dòng)畫顯示對(duì)話框。您必須為想使用的特效引用獨(dú)立的特效文件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 對(duì)話框（Dialog） - 動(dòng)畫</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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>這是一個(gè)動(dòng)畫顯示的對(duì)話框，用于顯示信息。對(duì)話框窗口可以移動(dòng)，調(diào)整尺寸，默認(rèn)可通過 'x' 圖標(biāo)關(guān)閉。</p>
</div>
 
<button id="opener">打開對(duì)話框</button>
 
 
</body>
</html>

基本的模態(tài)

模態(tài)對(duì)話框防止用戶與對(duì)話框以外的頁(yè)面其他部分進(jìn)行交互，直到對(duì)話框關(guān)閉為止。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 對(duì)話框（Dialog） - 基本的模態(tài)</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script>
  $(function() {
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });
  });
  </script>
</head>
<body>
 
<div id="dialog-modal" title="基本的模態(tài)對(duì)話框">
  <p>添加模態(tài)覆蓋屏幕，讓對(duì)話框看起來更突出，因?yàn)樗岉?yè)面上其他內(nèi)容變暗。</p>
</div>
 
<p>Sed vel diam id libero <a href="http://www.o2fo.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>

模態(tài)確認(rèn)

確認(rèn)一個(gè)動(dòng)作可能是破壞性的也可能是有意義的。設(shè)置modal選項(xiàng)為true，并通過buttons選項(xiàng)來指定主要的和次要的用戶動(dòng)作。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 對(duì)話框（Dialog） - 模態(tài)確認(rèn)</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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="清空回收站嗎？">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>這些項(xiàng)目將被永久刪除，并且無法恢復(fù)。您確定嗎？</p>
</div>
 
<p>Sed vel diam id libero <a href="http://www.o2fo.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>

模態(tài)表單

使用模態(tài)對(duì)話框來請(qǐng)求用戶在一個(gè)多步驟過程中輸入數(shù)據(jù)。在內(nèi)容區(qū)域嵌入form標(biāo)記，設(shè)置modal選項(xiàng)為true，并通過buttons選項(xiàng)來指定主要的和次要的用戶動(dòng)作。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 對(duì)話框（Dialog） - 模態(tài)表單</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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 + " 的長(zhǎng)度必須在 " + 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: {         
       "創(chuàng)建一個(gè)帳戶": 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="創(chuàng)建新用戶">
  <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">創(chuàng)建新用戶</button>
 
 
</body>
</html>

模態(tài)消息

使用模態(tài)對(duì)話框來在下一步動(dòng)作執(zhí)行之前確認(rèn)信息和動(dòng)作。設(shè)置modal選項(xiàng)為true，并通過buttons選項(xiàng)來指定主要的動(dòng)作（Ok）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 對(duì)話框（Dialog） - 模態(tài)消息</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script>
  $(function() {
    $( "#dialog-message" ).dialog({
      modal: true,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });
  </script>
</head>
<body>
 
<div id="dialog-message" title="下載完成">
  <p>
    <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
    您的文件已經(jīng)成功下載到文件夾中。
  </p>
  <p>
    當(dāng)前使用存儲(chǔ)空間的 <b>36%</b>。
  </p>
</div>
 
<p>Sed vel diam id libero <a href="http://www.o2fo.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>

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)