ページ内のフォントサイズを変更してくれる「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>
関連記事
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」
「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」
「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト
-
「jqPlot」を使って棒グラフを作成
jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」
サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし
Comment
[…] jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」 […]
jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」
[…] jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」 […]
“て”
jQuery | ページ内のフォントサイズを変更してくれる... http://owl.li/2DFm9r
参考URL:http://kwski.net/jquery/815/