jQueryでフォントサイズのスタイルシートを動的に切り替えて、現在表示しているスタイルシートをクッキーに保存する方法です。
スタイルシートは、あらかじめフォントのサイズごとに3種類用意しておきます。
1
2
3
| font-small.css
font-default.css
font-large.css |
次のコードでは、ページ内にレイアウト用など複数のスタイルシートを読み込むことを想定して、フォントサイズ用のスタイルシートのみを切り替えています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| $(document).ready(function() {
//フォントサイズ用のCSSファイル名
var css_default = "font-default.css";
//クッキーから読み込んで、現在のCSSファイルを設定
var css_current = ($.cookie("css")) ? $.cookie("css") : css_default;
//フォントサイズ用CSSのリンク
var link = $("link[href="+css_default+"]");
//リンクのhref属性に現在のCSSファイルを読み込み
link.attr("href", css_current);
//クリックされたサイズに変更して、クッキーに書き込み
$("ul#font-size li").click(function() {
css_current = "font-"+$(this).attr("class")+".css";
link.attr("href", css_current);
$.cookie("css", css_current, {expires:1});
});
}); |
<head>タグ内にjQueryの本体と、「jquery.cookie.js」を読み込みます。
1
2
3
4
| <link href="base.css" rel="stylesheet" type="text/css" media="all" />
<link href="font-default.css" rel="stylesheet" type="text/css" media="all" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script> |
フォント切り替えのためのボタンを、ページ内に<li>で記述します。
クラス名が、スタイルシートのファイル名に関連しています。
1
2
3
4
5
| <ul id="font-size">
<li class="small">small</li>
<li class="default">default</li>
<li class="large">large</li>
</ul> |
コメントはまだありません。
この投稿へのコメントの RSS フィード。
TrackBack URL
|