我不太熟悉編程語言。min我添加了一個帶有、max和step值為 5的 UI 滑塊。現在我想在滑塊處理程式上添加一個工具提示。這是我的代碼。
我想在滑塊手柄上添加滑鼠手柄懸停
var activeMonth = (last_checked.length - 1);
$("#slider").slider({
min: 0,
max: activeMonth,
step: 1,
value: activeMonth,
}).slider("pips", {
rest: "label",
step: 5,
labels: last_checked
})
.on("slidechange", function(e, ui) {
var point_positions = get_position(kwrd_id, allchecks[ui.value]['last_checked']);
if (point_positions != '') {
printGeoGrid(point_positions);
} else {
clearMarkers();
}
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.4/jquery-ui-slider-pips.css">
</div>
<div id="slider" style="width:90%;margin:auto;margin-top: 15px"></div>
</div>
uj5u.com熱心網友回復:
在https://github.com/simeydotme/jQuery-ui-Slider-Pips?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library查看檔案
圖書館有一個float選項。這是一個例子。
$(function() {
$("#slider").slider({
min: 1,
max: 12,
step: 1,
value: 10
}).slider("pips", {
rest: "label",
step: 5,
labels: {
first: "1",
rest: "pip"
}
}).slider("float", {
handle: true,
rest: "label",
step: 5,
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
})
/*
.on("slidechange", function(e, ui) {
var point_positions = get_position(kwrd_id, allchecks[ui.value]['last_checked']);
if (point_positions != '') {
printGeoGrid(point_positions);
} else {
clearMarkers();
}
});
*/
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.5/jquery-ui-slider-pips.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.5/jquery-ui-slider-pips.js" integrity="sha512-RMAZXXExv fEDNgrTPPEKoAxWSba/QrlfvRc3VXRjD832rVUIjze6vCJrfLAPYaagpWzPy9y41MhU/lGEr7cFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div>
<div id="slider" style="width:90%;margin:auto;margin-top: 45px"></div>
</div>
當您添加所有適當的庫時,代碼片段就會運行。如果您添加float選項,它會生成工具提示。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/533393.html
