jQuery と jQuery Cookie を使いフォントサイズを変更し次回訪問時もその設定を適用

jQueryjQuery Cookieを使いフォントサイズを変更し、次回訪問時もその設定を適用させる方法。

実装例(サンプル)

10px15px20px

下の文の現在のフォントサイズ:

この文のフォントサイズが変更になる。

実装例(サンプル)の動作について

  1. 「10px」「15px」「20px」のサイズをクリックすると、「この文のフォントサイズが変更になる。」の文のフォントサイズを変更する。
  2. 変更後のサイズをクッキーに保存するので、次回訪問時も、そのサイズを適用する。

実装例(サンプル)のソースコード

読み込み

<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.cookie.js"></script>

jQueryjQuery Cookieを読み込む。

JavaScript

<script>
<!--
jQuery( function() {
    fontSize();
    jQuery( '#FontSizeS' ).click( function () {
        fontSize( '10px' );
    } );
    jQuery( '#FontSizeM' ).click( function () {
        fontSize( '15px' );
    } );
    jQuery( '#FontSizeL' ).click( function () {
        fontSize( '20px' );
    } );
    function fontSize( $fontSize ){
        if( $fontSize == undefined ){
            var $fontSize = jQuery.cookie( 'fontSize' );
            if( $fontSize == undefined ){
                var $fontSize = '10px';
            }
        }
        jQuery( '#fontSize' ).html( $fontSize );
        jQuery.cookie( 'fontSize', $fontSize, { expires: 1 } );
        jQuery( '#sample' ).css( { 'font-size': $fontSize } );
    }
} );
// -->
</script>

CSS

<style type="text/css">
#FontSizeS,
#FontSizeM,
#FontSizeL {
    margin-right: 1em;
    padding: 0.5em 1em;
    border: 1px solid #666666;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
}
</style>

HTML

<div style="margin: 1em;">
    <p style="margin-bottom: 1em;"><span id="FontSizeS">10px</span><span id="FontSizeM">15px</span><span id="FontSizeL">20px</span></p>
    <p>下の文の現在のフォントサイズ:<span id="fontSize"></span></p>
    <p id="sample">この文のフォントサイズが変更になる。</p>
</div>

スポンサード リンク

カテゴリー: JavaScript, jQuery, jQuery Cookie, クッキー, フォント, プラグイン, 逆引き パーマリンク