jFontsize 網頁文字大小控制器

jFontsize 是一個輕量級的容易使用的一個基於 jQuery 框架的套件，用於在頁面上建立 A+ 、 A- 這樣的按鈕以便於改變文字的大小。支援自定義的按鈕樣式可透過參數設定字體最大可改變次數，以及每次變化的間隔大小等等。以方便不同的使用者瀏覽網頁。在網頁中增加這樣的一項功能，就能夠有效的提高用戶體驗。

使用方法：
第一步 載入 jFontsize 需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- jFontsize 的主程式碼  -->
<script src="jquery.jfontsize-1.0.pack.js"></script>


第二步 使用 HTML 劃出需要放大的文字和 文字放大的按鈕位置
<a id="jfontsize-minus" href="#">A-</a>
<a id="jfontsize-default" href="#">A</a>
<a id="jfontsize-plus" href="#">A+</a>
<p class="some-class-name">This text will be resized</p>

第三步 設計按鈕的 CSS 樣式表
.jfontsize-button {
    font: bold 12px arial;
    padding: 3px;
    border: solid 1px #ccc;
}
.jfontsize-button:hover {
    text-decoration: none;
    background: #333;
    color: #fff;
    border: solid 1px #333;
}
.jfontsize-disabled, .jfontsize-disabled:hover {
    color: #aaa;
    border: solid 1px #eee;
    background: #eee;
}

第四步 使用 JavaScript 讓 jFontsize 初始化
$(function(){
   $('.some-class-name').jfontsize({});
});

附上 jFontsize 可修改參數

參數	類型	預設	說明
btnMinusClasseId	元素名稱	#jfontsize-minus	文字縮減的按鈕選擇
btnDeafultClasseId	元素名稱	#jfontsize-default	文字回復預設的按鈕選擇
btnPlusClasseId	元素名稱	#jfontsize-plus	文字放大的按鈕選擇
btnMinusMaxHits	整數	10	文字可縮小幾次
btnPlusMaxHits	整數	10	文字可放大幾次
sizeChange	整數	1	每次放大縮小的像素

作者網站：http://www.jfontsize.com/
檔案大小：62 KB (包含範例)
檔案下載：http://www.jfontsize.com/files/jquery.jfontsize-1.0.demo.zip
檔案備份：下載