JavaScript + Ajax 実践サンプル集 - ページをブロックする

ページをブロックする

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのblockUI()プラグインを利用してウェブページをブロックします。[Run]ボタンをクリックするとwait.aspxページを非同期で呼び出します。wait.aspxの処理中は、メッセージを表示してウェブページをブロックします。wait.aspxの処理が完了したらブロックを解除します。wait.aspxは２秒間スリープします。

このサンプルを編集して試してみる

$(function() {   
  $().ajaxStop($.unblockUI);          
  $('#run').click(function() {   
    $.blockUI(); 
    $.ajax({ 
     url: 'wait.aspx', // or url: 'wait.php', 
     cache: false);                            
  });    
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - BlockUI Page Block </title>
  <link href="jQuery/blockUI/jq.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/blockUI/block.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/blockUI/jquery.blockUI.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {

// global hook - unblock UI when ajax request completes
      $().ajaxStop($.unblockUI);    
    
      $('#run').click(function() {
        $.blockUI();
        //$.blockUI({ message: '<h5>お待ちください...</h5>' });
        
        //setTimeout($.unblockUI, 2000);
        $.ajax({ 
           url: 'wait.aspx', // or url: 'wait.php', 
           cache: false });                         
      }); 
    });
  </script>

</head>
<body>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
img.logo
{
  float: right;
  border: none;
  margin: 10px 10px 0 0;
}
#main
{
  padding: 0;
}
#main h1
{
  padding: 15px 10px 15px 0;
}
dl
{
  margin-top: 0;
}
dt
{
  color: #a00;
  font-weight: bold;
}
#api dt, #debugging dt
{
  font-size: 120%;
  margin: 5px 0;
}
dd
{
  margin: 0 0 20px 0;
  color: #555;
}
dl.options
{
  margin: 10px 25px;
}
code.inline
{
  background-color: #ffc;
}
.footer
{
  padding-top: 20px;
  margin-top: 30px;
  border-top: 1px solid #ddd;
  color: #666;
}
#header
{
  background-color: #eee;
  font-weight: normal;
  margin: 0;
  padding: 10px;
  font-size: small;
}

h1, h2 .anchors a, .sampleAnchors a
{
  font-family: 'trebuchet ms' , verdana, arial;
}

.anchors
{
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  zoom: 1;
}
.anchors, .sampleAnchors
{
  list-style: none;
  margin: 0;
  padding: 0 0 1px;
}
.anchors:after, .sampleAnchors:after
{
  display: block;
  clear: both;
  content: " ";
}
.anchors li
{
  float: left;
  margin: 0 1px 0 0;
}
.anchors a, .sampleAnchors a
{
  display: block;
  position: relative;
  top: 1px;
  border: 1px solid #ccc;
  border-bottom: 0;
  z-index: 2;
  padding: 2px 9px 1px;
  color: #444;
  text-decoration: none;
}
.anchors .on a
{
  padding-bottom: 2px;
  font-weight: bold;
}
.anchors a:focus, .anchors a:active, .sampleAnchors a:focus, .sampleAnchors a:active
{
  outline: none;
}
.anchors .on a, .anchors a:hover, .anchors a:focus, .anchors a:active
{
  background: #fff;
}
.anchors .on a:link, .anchors .on a:visited
{
  cursor: text;
}
.anchors a:hover, .anchors a:focus, .anchors a:active
{
  cursor: pointer;
}
.on
{
  display: block;
}
.anchors a h2
{
  padding: 0;
  margin: 2px;
}
.tabs-selected a
{
  background-color: #fff;
  color: #000;
  font-weight: bold;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
  overflow: visible;
}

.tabContent
{
  padding: 10px 25px;
  clear: left;
  background-color: #fff;
  margin: 0 0 30px 0;
  zoom: 1;
}
.sampleTabContent
{
  padding: 10px 25px;
  clear: left;
  background-color: #fff;
  margin: 0 0 50px 0;
  border: 1px solid #ddd;
  zoom: 1;
}
.tabs-hide
{
  display: none;
  background-color: #fff;
}

.sampleAnchors a
{
  display: block;
}
.sampleAnchors li
{
  float: left;
  margin: 0 1px 0 0;
}
.sample-tab-selected a
{
  background-color: #fff;
  color: #000;
  font-weight: bold;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
  overflow: visible;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/blockUI/jq.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/blockUI/block.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/blockUI/jquery.blockUI.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {

      // global hook - unblock UI when ajax request completes
      $().ajaxStop($.unblockUI);    
    
      $('#run').click(function() {
        $.blockUI();
        //$.blockUI({ message: '<h5>お待ちください...</h5>' });
        
        //setTimeout($.unblockUI, 2000);
        $.ajax({ url: 'wait.aspx', cache: false });                         
      }); 
    });
  </script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <div style=" margin-left:10px; margin-top:10px;">
    <button id="run">Run</button>
  </div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

ページをブロックする

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

ページをブロックする

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!