發佈日期：
分類：
如何使用jQuery及jQuery UI‧建立滑動(slider)選項
滑動(slider)選項，可令使用者在特定範圍內選擇。
01. jQuery UI在版本1.8.13，包含了31個元件，您可以一次過在jQuery UI下載所有元件，也可以根據您自己需要，下載只需用到的其中一個元件。
02. 今次測試，只下載slider元件，版本為1.8.13。jQuery會使用1.6.1版本。
03. jQuery UI，除包含js檔案外，另外也包括css檔案。只要載入相關檔案，再更改css內容，便可輕易做到您需要的效果。
04. 而slider本身，亦可設定不同選項(option)，如：
max: maxvalue時，可設定滑動最大值；
min minvalue時，可設定滑動最細值；
orientation: “vertical”時，可設定滑動為直身拉動；
range: true,及values: [ minvalue, maxvalue ]時，預設slider位置會介乎minvalue與maxvalue之間；
step: stepvalue時，slider會依stepvalue間距之間移動；
value: slidervalue時，設定slider預設值；
05. 例子一：建立一slider，並設定以下選項，orientation: “vertical”, range: “min”, min: 0, max: 100, values: 60, step: 10。(測試效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#demo-frame > div.demo { padding: 10px !important; }
</style>
<link rel="stylesheet" href="jquery-ui-1.8.13.slider.css">
<script src="jquery-1.6.1.min.js"></script>
<script src="jquery-ui-1.8.13.slider.min.js"></script>
</head>
<body>
<div class="demo">
<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider" style="height:200px;"></div>
</div>
<script>
$(function() {
$( "#slider" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
values: 60,
step: 10,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
});
</script>
</body>
</html>
06. 例子二：建立一slider，並設定以下選項，range: true, min: 0, max: 100, values: [ 60, 80 ]。(測試效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#demo-frame > div.demo { padding: 10px !important; }
</style>
<link rel="stylesheet" href="jquery-ui-1.8.13.slider.css">
<script src="jquery-1.6.1.min.js"></script>
<script src="jquery-ui-1.8.13.slider.min.js"></script>
</head>
<body>
<div class="demo">
<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider" style="height:10px;"></div>
</div>
<script>
$(function() {
$( "#slider" ).slider({
range: true,
min: 0,
max: 100,
values: [ 60, 80 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "values", 0 ) + " - $" + $( "#slider" ).slider( "values", 1 ) );
});
</script>
</body>
</html>
註：jQuery版本為1.6.1，jQuery UI slider版本為1.8.13。
發佈留言