Rumah > Artikel > hujung hadapan web > penggunaan jquery rangeslider
penggunaan jquery rangeslider
- 王林asal
- 2023-05-28 15:49:08439semak imbas
jQuery Rangeslider ialah pemalam berasaskan jQuery yang membolehkan anda membuat kawalan gelangsar boleh seret dengan mudah. Dalam artikel ini, kami akan menunjukkan kepada anda cara menggunakan jQuery Rangeslider.
Pasang jQuery Rangeslider
jQuery Rangeslider boleh dipasang dalam pelbagai cara, seperti:
Diperkenalkan melalui pautan CDN
Anda boleh menambah pautan CDN untuk Mendapatkan jQuery Rangeslider. Ini adalah cara termudah untuk memasangnya:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Rangeslider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
</head>
<body>
<input type="range" min="0" max="100" value="50" id="myRange">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
<script>
$(document).ready(function(){
$('#myRange').rangeslider();
});
</script>
</body>
</html>Pasang melalui NPM
Anda juga boleh memasang jQuery Rangeslider melalui NPM. Jalankan arahan berikut dalam terminal:
npm install rangeslider.js
Kemudian, tambahkan kod berikut dalam fail HTML anda:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Rangeslider</title>
<link rel="stylesheet" href="./node_modules/rangeslider.js/dist/rangeslider.min.css" />
</head>
<body>
<input type="range" min="0" max="100" value="50" id="myRange">
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/rangeslider.js/dist/rangeslider.min.js"></script>
<script>
$(document).ready(function(){
$('#myRange').rangeslider();
});
</script>
</body>
</html>Gunakan jQuery Rangeslider
Selepas pemasangan selesai, kami Anda sudah bersedia untuk mula menggunakan jQuery Rangeslider. Berikut ialah contoh penggunaan:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Rangeslider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
</head>
<body>
<input type="range" min="0" max="100" value="50" id="myRange">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
<script>
$(document).ready(function(){
$('#myRange').rangeslider({
polyfill: false,
onSlide: function(position, value) {
console.log('position: ' + position, ' value: ' + value);
}
});
});
</script>
</body>
</html>Contoh ini menunjukkan cara menggunakan jQuery Rangeslider untuk menambah kawalan peluncur input boleh seret ke halaman web.
Dalam kod, kami mula-mula memperkenalkan fail CSS dan JavaScript yang diperlukan.
Kemudian, dalam elemen kotak input HTML, kami menambah atribut type="range", yang akan mencipta kawalan gelangsar dalam halaman web.
Kemudian, kami memilih kotak input menggunakan pemilih jQuery dan memanggil kaedah rangeslider(), yang menukarnya menjadi kawalan slider boleh seret.
Apabila memanggil kaedah rangeslider(), kami turut lulus beberapa parameter:
- polifill: false. Parameter ini memberitahu jQuery Rangeslider untuk tidak menggunakan fungsi polyfill. Polyfill mendayakan fungsi ini menggunakan JavaScript pada penyemak imbas lama yang tidak menyokong kawalan peluncur HTML5. Tetapi dalam pelayar moden, ciri polyfill ini tidak banyak digunakan. Oleh itu, kami menetapkan parameter ini kepada palsu.
- onSlide: fungsi(kedudukan, nilai) {...}. Parameter ini memberitahu jQuery Rangeslider apa yang berlaku apabila anda meluncur ke atas kawalan peluncur. Dalam contoh ini, kami menentukan fungsi yang akan dipanggil pada setiap leret. Fungsi ini menerima dua parameter: kedudukan peluncur dan nilai semasanya. Kami mengeluarkan fungsi ini ke konsol supaya kami boleh melihat output fungsi ini dalam konsol.
Ringkasan
jQuery Rangeslider ialah pemalam jQuery yang sangat praktikal yang membolehkan anda menambah kawalan peluncur input boleh seret ke halaman web dengan mudah. Dalam artikel ini, kami menunjukkan kepada anda cara memasang jQuery Rangeslider dan cara menggunakannya untuk mencipta kawalan peluncur dan lulus beberapa parameter untuk menyesuaikannya. Kami berharap artikel ini membantu anda bermula dengan cepat dengan jQuery Rangeslider.
Atas ialah kandungan terperinci penggunaan jquery rangeslider. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!