jquery 進度條 滑塊
阿新 • • 發佈：2019-02-02
有時我們在頁面上需要選擇數值範圍，如購物時選取價格區間，購買主機時自主選取CPU，記憶體大小配置等，使用直觀的滑塊條直接選取想要的數值大小即可，無需手動輸入數值，操作簡單又方便。
本文向大家介紹一款範圍選擇器外掛jRange，它是基於jQuery的一款簡單外掛。本站之前有類似文章：jQuery+CSS使用滑塊選取價格範圍，其中不太好的地方是使用了jqueryui龐大的外掛庫，有興趣的朋友可以看看。下面我們來看下外掛jRange的使用。
首先載入jQuery庫檔案以及jRange相關的css檔案：jquery.range.css和外掛：jquery.range.js
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.11.2.js"></script> <link href="js/jquery.range.css" rel="stylesheet" /> <script src="js/jquery.range.js"></script> </head> <body> <input type="hidden" class="single-slider" value="23" /> </body> </html>
<script type="text/javascript">
$(".single-slider").jRange({
from: 0,
to: 100,
step: 1,
scale: [0, 25, 50, 75, 100],
format: '%s',
width: 300,
showLabels: true,
showScale: true
});
</script>
