jQueryでUIをブロックできるPlugin

jQueryでUIをブロックできるPluginを解説する。使ってみた感じは下図を参照して欲しい。

全体的に薄いグレーになっていて真ん中にメッセージが出ているのが見てとれると思うが、今回解説するPluginを使用するとそれが実現可能だ。使い方はいたって簡単。こちらからjquery.blockUI.jsをダウンロードして、下記のコードをペペッとscriptタグ内に貼り付ければ良いだけ。

?

1 2 3 4 5 6 7 8 9 10

jQuery(document).ready(function() {  $.blockUI({   title: 'Tips',   message: 'メッセージだよー',   css: {    padding:'20px'   }  });  $('.blockOverlay').attr('title', 'クリックで解除').click($.unblockUI); });

他にも多様な使い方があるのでデモページを参照して欲しい。