[JS]確認用の美しいグリッドをウェブページに表示する -The Heads-Up Grid

ウェブページの確認用にグリッドをオーバーレイで表示するjQueryのプラグインを紹介します。
似たものはいくつかありますが、Responsive Web Designに対応したものを紹介するのは始めてです。

The Heads-Up Grid
デモページ

[ad#ad-2]

デモページのグリッドは右上のスイッチで表示・非表示を切り替えられ、表示された確認用のグリッドはマウスホバーでハイライトされます。

The Heads-Up Gridの設置

外部ファイル

「jquery.js」と当スクリプト・スタイルシートを外部ファイルに指定します。

<link href="headsupgrid/hugrid.css" type="text/css" rel="stylesheet" />
<script src="headsupgrid/jquery-1.6.2.min.js"></script>
<script src="headsupgrid/hugrid.js"></script>

JavaScript

スクリプトではグリッドの細かい設定ができます。

<script type="text/javascript">
    $(document).ready(function() {
        pageUnits = 'px';
        colUnits = 'px';
        pagewidth = 960;
        columns = 6;
        columnwidth = 140;
        gutterwidth = 24;
        pagetopmargin = 35;
        rowheight = 20;
        makehugrid();
        setgridonload();
    });
</script>

[ad#ad-2]

JavaScript: Responsive Web Design

表示サイズによって異なるグリッドにも対応しています。

<script type="text/javascript">
    definegrid = function() {
        var browserWidth = $(window).width(); 
        if (browserWidth >= 1001) 
        {
            pageUnits = 'px';
            colUnits = 'px';
            pagewidth = 960;
            columns = 6;
            columnwidth = 140;
            gutterwidth = 24;
            pagetopmargin = 35;
            rowheight = 20;
            makehugrid();
        } 
        if (browserWidth <= 1000) 
        {
            pageUnits = '%';
            colUnits = '%';
            pagewidth = 94;
            columns = 2;
            columnwidth = 48;
            gutterwidth = 4;
            pagetopmargin = 35;
            rowheight = 20;
            makehugrid();
        }
        if (browserWidth <= 768) 
        {
            pageUnits = '%';
            colUnits = '%';
            pagewidth = 96;
            columns = 2;
            columnwidth = 49;
            gutterwidth = 2;
            pagetopmargin = 35;
            rowheight = 20;
            makehugrid();
        }
    }
    $(document).ready(function() {
        definegrid();
        setgridonload();
    });    

    $(window).resize(function() {
        definegrid();
    });
</script>

グリッドのカラー変更

グリッドのカラーは、スタイルシート（hugrid.css）で変更します。