ブラウザ全体をブロックしてみる - jQuery入門
目次
- jQuery入門
- jQueryのインストール・簡単な使い方
- クイズゲームの作り方
- 秘密の暗号を作ってみよう（たぬき暗号）
- アクションゲームを作ってみよう（ぬりかべ）
- 画像を使ったジグソーパズルを作ってみよう
- もぐらたたきっぽいゲーム
- ドラッグ可能なポップアップウインドウを作ろう
- jQuery UI Sortableで１ラインオセロゲーム
- ブラウザ全体をブロックしてみる
- Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
- 発生したイベントの状態を保持・保存する6つのパターン
- Ajaxを利用したシンプルなイメージギャラリーを作ってみる
- テーブルにページ送り（ページング）を実装してみる
- jQuery UI Draggableを使って付箋(sticky)を作ってみる
- カラムでソートできるテーブルを自作してみる
- テーブルを使ったシンプルなドット絵エディタを作ってみる
- iPhoneのようにマウスではじいてスクロール（フリックスクロール）を実装してみる
- テキストフィールドの数値をマウスの上下移動で増減する
- iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
- iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
- リアルタイムプレビュー付きのHTMLエディタを作ろう
- 保存できる付箋を作ってみる(Cookie、localStorage）
ブラウザ画面のブロック
モーダルウインドウを表示したときは、ウインドウの後ろの操作はできないようにしたいですね。そういう用途に適した、ブラウザ全体をブロックするレイヤをjQueryで実現してみましょう。今回も車輪の再発明です。ちゃんとしたものが欲しければ「jQuery BlockUI Plugin」をどうぞ。
実行結果
ソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>ブラウザ画面のブロック</title>
<script>
$(function() {
$('#block').click(function() {
$('#shim').css({
backgroundColor: 'black',
position: 'absolute',
display: 'block',
left: 0,
top: 0,
opacity: 0.5,
width: $(document).width(),
height: $(document).height()
});
$(window).on('resize.shim', function() {
$('#shim').css({
width: $(document).width(),
height: $(document).height()
});
});
});
$('#shim').click(function() {
$(this).css({display: 'none'});
$(window).off('resize.shim');
});
});
</script>
</head>
<body>
<a href="#" id="block">ブロック！</a>
<div id="shim"></div>
</body>
</html>
プログラムの解説
画面をブロックするレイヤを「shim」と名づけています。shimは「クサビ」という意味です。
<div id="shim"></div>
ソースの最下部あたりにあるこの行が画面をブロックするレイヤを表しています。
shimのCSS
$('#shim').css({
backgroundColor: 'black',
position: 'absolute',
display: 'block',
left: 0,
top: 0,
opacity: 0.5,
width: $(document).width(),
height: $(document).height()
});
positionをabsoludeにして、幅と高さをdocumentの幅と高さに合わせることによって画面全体を覆うようにしています。「opacity: 0.5」はshimを半透明にしている部分です。IE6ではopacityプロパティはサポートされていないのですが、jQueryが良きようにはからってくれます。
ブラウザのリサイズイベント
$(window).on('resize.shim', function() {
$('#shim').css({
width: $(document).width(),
height: $(document).height()
});
});
ブラウザがリサイズされたときに、shimのサイズをそれに追従して合わせている部分です。window要素に対してresizeイベントを追加しています。resizeの後ろに「.shim」は名前空間で、イベントを削除するときに識別するために使います。
$(window).off('resize.shim');
ブロック終了時にブラウザのリサイズイベントを削除しています。
ツイート
そっか0