ページ内のフォントサイズを変更してくれる「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>
関連記事
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
Lightboxなどが実装できるプラグイン「Magnific Popup」
「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」
「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を
-
-
色々なタイプの画像ギャラリーが実装できる「Rondell」
「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ
-
-
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト
-
-
マウスオーバーでキャプション表示してくれる プラグイン
画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち




Comment
[…] jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」 […]
jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」
[…] jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」 […]
“て”
jQuery | ページ内のフォントサイズを変更してくれる... http://owl.li/2DFm9r
参考URL:http://kwski.net/jquery/815/