jQuery - 如何用Slider控制字型大小

上一篇文章是用三個按鈕控制字型大小，感覺不太靈活，就到jQuery的官方網站，參考了這個 UI Slider - Snap to increments 修改，沒想到很順利的修改完成，以下是我做的Ｄemo，真是感謝有jQuery出現!! 讓網頁世界更加美好。

1.先嵌入jQuery 涵式庫

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

2.加入jQuery 程式

<script>

$(document).ready(function(){
var $speech = $('div.speech');
var defaultSize = $speech.css('fontSize'); -->預設的字形大小12px
var num= parseFloat(defaultSize, 10); -->只取12px的數字部份，並轉換成數字

$("#slider").slider({
value:num,
min: 8,-->字型大小最小值
max: 20, -->字型大小最大值

step: 1,
slide: function(event, ui) {
$("#amount").val( ui.value + 'px');
$speech.css('fontSize' , ui.value + 'px');
}
});
$("#amount").val($("#slider").slider("value") +'px');
});
</script>

3.編寫適當的css

<style type="text/css">

/*base*/

body {

font:normal 12px Verdana, Geneva, sans-serif;

}

/*end base*/

/*slider*/

.ui-slider { position: relative; text-align: left; }

.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }

.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0;}

.ui-slider-horizontal { width:100px; height: 11px; background:url(images/slider_rg_100.gif) 0 0 no-repeat; }

.ui-slider-horizontal .ui-slider-handle { top: -1px; height:13px;margin-left: -.6em; background:black; background:url(images/slider_hd_1.gif) 0 0 no-repeat;}

.ui-slider-horizontal .ui-slider-handle:hover{background:url(images/slider_hd_1_hover.gif) 0 0 no-repeat;}

.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }

.ui-slider-horizontal .ui-slider-range-min { left: 0; }

.ui-slider-horizontal .ui-slider-range-max { right: 0; }

/*end slider*/

</style>

4.大功告成!
我的Demo

http://cindy8.myweb.hinet.net/demo_jquery/switcher_slider.html