ノンプログラマーによる冗長だけどわかりやすいjQueryリキッドレイアウトも最終回を迎えました。
前回までの材料を使って最終回の今回は関数を作って実行させます。

↓↓↓ 復習したい方はこちらから ↓↓↓
ノンプログラマーによる冗長だけどわかりやすいjQueryリキッドレイアウト①
ノンプログラマーによる冗長だけどわかりやすいjQueryリキッドレイアウト①おまけ
ノンプログラマーによる冗長だけどわかりやすいjQueryリキッドレイアウト②

さて関数を作ります。
まずは変数の時と同じように関数を宣言します。
決まった形はこれ。


function 関数名() {
    処理内容
}


さてアルファベット始まりで好きな英数字で関数名を付けて、
ひとつずつ処理を見ていきます。


まずは前回にお伝えしコンテンツの幅と高さを取得します。


function setContentsSize() {
    // コンテンツの幅を取得
    var contentsWidth = Math.floor($(window).width() - $("#header").outerWidth(true) - $("#footer").outerWidth(true));
    // コンテンツの高さを取得
    var contentsHeight = Math.floor($(window).height() - $("#header").outerHeight(true) - $("#footer").outerHeight(true));
}


次にコンテンツを囲む要素のid値をcontentsとして、
上で取得した要素の幅と高さを指定します。


function setContentsSize() {
    // コンテンツの幅を取得
    var contentsWidth = Math.floor($(window).width() - $("#header").outerWidth(true) - $("#footer").outerWidth(true));
    // コンテンツの高さを取得
    var contentsHeight = Math.floor($(window).height() - $("#header").outerHeight(true) - $("#footer").outerHeight(true));
    // コンテンツの幅を指定
    $("#contents").width(contentsWidth);
    // コンテンツの高さを指定
    $("#contents").height(contentsHeight);
}


この関数を、画面読み込み時とリサイズ時に実行させます。


$(window).load(function () {
    setContentsSize();
});
$(window).resize(function () {
    setContentsSize();
});


この実行処理は、まとめてこんな風にも書けます。


$(window).bind('resize load', function(){
    setContentsSize();
});


これで出来上がりです。
フルで書くとこんな感じ。


<script type="text/javascript">    
    $(function(){
        function setContentsSize() {
            // コンテンツの幅を取得
            var contentsWidth = Math.floor($(window).width() - $("#header").outerWidth(true) - $("#footer").outerWidth(true));
            // コンテンツの高さを取得
            var contentsHeight = Math.floor($(window).height() - $("#header").outerHeight(true) - $("#footer").outerHeight(true));
            // コンテンツの幅を指定
            $("#contents").width(contentsWidth);
            // コンテンツの高さを指定
            $("#contents").height(contentsHeight);
        };
        
        // 関数を実行
        $(window).bind('resize load', function(){
            setContentsSize();
        });
    });
</script>


ポイントは変数の取得を関数の中に入れておくことです。
そうすると、ページ読み込み後のウィンドウのリサイズにも対応するリキッドレイアウトができます。
またリキッド対応にしている箇所に何かjQueryのプラグインなどを入れる時は、処理の順番的に「サイズの取得→プラグインの実行」としないと動かない場合があるのでご注意です！！


最後にちょっとひとこと英会話。
"Finally!"　「やっとできた！」
主語も動詞もなく副詞だけですが、上記のような意味が伝わります。
略されている部分をあえて書くと、"Now that it's finally done."というところでしょうか。
私は大阪出身なのですが、駅のホームで電車を待っているおじさんが、やっと電車が来たときに「ようようやな～。」って言っているのをたまに耳にしていたので、まぁ略すのは英語に限った事ではないですね。

いやしかし東京ではあまり独り言いう人はいませんね。
関西でも豊中市や西宮市などの裕福な地域の人々は標準語を話すらしいという噂です。
あと一説では、東京の中でも田園都市線沿線の人は特別やさしいと聞いたのですが、本当でしょうか。

さて、このあたりで本筋と関係ない上に全く根拠のないステレオタイプ話をもって、ノンプログラマーによる冗長だけどわかりやすいjQueryリキッドレイアウトシリーズの締めに代えさせていただきたいと思います。
読んで下さった方、ありがとうございました！