jqGridで文字のサイズを変更する

画面右上にフォントサイズを変更できるサイトってありますよね。
jqGridで同じようなことをする方法。

※ヘッダやページャのheightを調節しないと
　文字が見切れちゃうので注意してください。

$(function () {
    var changeFontSize = function (size)
    {
        $('div.ui-jqgrid').css('font-size', size);
        $('table.ui-jqgrid-htable th').css('height', size)
            .children('div').css('height', size);
        $('div.ui-jqgrid-pager').css('height', size);
    };

    // エレメントを作成
    $box_fontsize = $(document.createElement('div'));
    $f_small = $(document.createElement('a'));
    $f_medium = $(document.createElement('a'));
    $f_large = $(document.createElement('a'));

    // 設定
    $f_small.attr('href', '#small').text('小')
            .bind('click', function(){changeFontSize('0.8em')});
    $f_medium.attr('href', '#medium').text('中')
            .bind('click', function(){changeFontSize('1em')});
    $f_large.attr('href', '#large').text('大')
            .bind('click', function(){changeFontSize('1.6em')});

    $box_fontsize.append($f_small).append($f_medium).append($f_large)
                 .prependTo('body');