摘要:JQueryMobile Range 控制項改變文字大小
以往我們在使用行動裝置或瀏覽行動網頁，最麻煩的就是一些輸入欄位，因此這篇將介紹 JQueryMobile 的 Range 控制項的功能，只需要利用手指的滑動就能夠輸入數字，也不需要提示使用者最大值或最小值，完全藉由 Range 來替我們完成。
以下我們將利用 JQueryMobile 的 Range 控制項來改變文章的字體大小，為什麼要用這個當範例呢？由於在手機閱讀文章的時候，往往會因為文字過小或是過大，搞得使用者相當困擾，雖然可以利用兩隻手指去進行縮放，但往往也會在滑動和換頁的過程中，不小心又改變了閱讀尺寸，所以應該是相當實用的功能囉！可以看這個範例參考：利用 Range 改變文字大小 ( 利用 EZoApp 工具，點選 preview 看預覽 )
首先我們直接使用 JQuryMobile 的的 Range 語法，可以參考 JQueryMobile 的說明 ( 如果有使用 EZoApp 這套工具的朋友，也可以直接從左邊工具欄把 Range 拉進去畫面當中 )，之後你的 HTML 程式碼應該會多出這一些內容：
<div class="ui-field-contain">
<label for=" input 的 id ">Title</label>
<input id=" 輸入 id " value="50" min="0" max="100" type="range">
</div>
裡頭 value 是預設值，min 是最小值，max 是最大值，type 則是 range，完成之後，我們就可以在下方再新增一個 div 放文字
<div id="textSize" style="樣式">
<b>文章標題</b>
<br/>
文章內容
</div>
接下來就要使用 javascript 來讓 range 與文字大小連動
接下來就要使用 javascript 來讓 range 與文字大小連動
$(function () {
var aa;
$('#t1').on('change', function () {
aa = parseInt($('#t1').val());
$('#textSize').css({
'font-size': aa + 'px'
});
});
});
這裡使用了 on( 'change' ) 的方式來監聽 range 控制項是否有改變，有改變的話，就將改變的數值傳給文字大小，雖然這是個很簡單的用法，但其實可以千變萬化，除了改變文字大小，也可以改變圖片大小，或是將數值傳給後端資料庫，都是相當的方便實用，不過我現在只拿來做電子書，就已經相當的好用了！推薦這個方法給大家！
這裡使用了 on( 'change' ) 的方式來監聽 range 控制項是否有改變，有改變的話，就將改變的數值傳給文字大小，雖然這是個很簡單的用法，但其實可以千變萬化，除了改變文字大小，也可以改變圖片大小，或是將數值傳給後端資料庫，都是相當的方便實用，不過我現在只拿來做電子書，就已經相當的好用了！推薦這個方法給大家！
範例參考：利用 Range 改變文字大小 ( 點選 preview 看預覽 )