ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.jsを使用して設定はCookieに保持され、次回訪問時にも設定が引き継がれて表示してくれます。デモ
スクリプト
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.cookie.js" type="text/javascript"></script> <script src="jquery.textresizer.js" type="text/javascript"></script>
実装
// リサイズ用リンクボタン <div id="textsizer"> <p>文字サイズ:<p> <ul class="textresizer"> <li><a href="#">S</a></li> <li><a href="#">M</a></li> <li><a href="#">L</a></li> <li><a href="#">XL</a></li> </ul> </div> // 対象要素 <div id="div815"> テキスト </div> <script type="text/javascript"> jQuery(document).ready( function() { jQuery( "#textsizer a" ).textresizer({ target: "#div815", // 対象要素 type: "fontSize", // サイズ指定方法 sizes: [ "11px", "13px", "15px", "17px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script>
リサイズ用のボタンのスタイルは本家サイトのものそのままです。
<style> ul.textresizer { list-style: none; display: inline; margin: 0px; padding: 0px; } ul.textresizer li { display: inline; margin: 0px; margin-right: 5px; padding: 0px; } ul.textresizer a { border: solid 1px #999; padding: 2px 3px; font-weight: bold; text-decoration: none; } ul.textresizer a:hover { background: #e5e5e5; border: solid 1px #cccccc; } ul.textresizer .small-text { font-size: 11px; } ul.textresizer .medium-text { font-size: 13px; } ul.textresizer .large-text { font-size: 15px; } ul.textresizer .larger-text { font-size: 17px; } /* Style of active button */ ul.textresizer a.textresizer-active { border: solid 1px #2B562B; background: #FFCA6F; color: #000000; } /* End of Text Resizer Buttons */ </style>
関連記事
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
-
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト
-
-
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
画像ズーム プラグイン
画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。
Comment
[…] jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」 […]
jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」
[…] jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」 […]
“て”
jQuery | ページ内のフォントサイズを変更してくれる... http://owl.li/2DFm9r
参考URL:http://kwski.net/jquery/815/