设置 jquery 移动滑块导致错误
Setting jquery mobile sliders leads to error
我正在尝试在 jQuery 移动版 1.4.5、JQ 2.1.4 中设置滑块的值,但出现此错误:
Error: no such method 'values' for slider widget instance
HTML代码:
<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
<input type="range" name="price_from" id="price_from" min="0" max="30000" step="250" data-popup-enabled="true">
<input type="range" name="price_to" id="price_to" min="0" max="30000" step="250" data-popup-enabled="true">
</div>
jquery:
$('#filter_price').slider();
$('#filter_price').slider('values', 0, 50);
$('#filter_price').slider('values', 1, 100);
这看起来和 the answer provided on SO 几年前一模一样,但可能已经过时了,因为它是 8 岁的。
这里有几个问题。首先,您在实例化滑块的 div
中创建了一些 range
输入。这只会导致问题,因为它们会干扰滑块布局。我建议删除它们。
其次,使用两个参数调用 values
旨在用于范围滑块,而不是单值滑块。我会假设你在 DOM 中的两个范围输入你试图使它成为一个范围 selection。因此,您需要在创建滑块时在滑块上设置 range: true
。然后你可以像现在一样调用values
。试试这个:
$('#filter_price').slider({
range: true,
min: 0,
max: 150
});
$('#filter_price').slider('values', 0, 50);
$('#filter_price').slider('values', 1, 100);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
</div>
另请注意,如果您尝试使用这些值创建滑块,则可以在实例化对象中提供所有参数,而无需再次 select 元素:
$('#filter_price').slider({
range: true,
min: 0,
max: 150,
values: [50, 100]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
</div>
我来晚了一点,但这是 jQuery Mobile 1.4.5 rangeslider
的解决方案(不是 jQuery- UI)。
由于 JQM rangeslider
有效地构建在两个 JQM 滑块之上,您可以通过编程方式在这两个 create
事件中设置 min
和 max
值:
var range = {
"low": {min: 1, max: 10000},
"medium": {min: 10000, max: 20000},
"high": {min: 20000, max: 30000}
};
$(document).on("slidecreate", "#price_from", function(e) {
$(this).val(range["medium"].min);
});
$(document).on("slidecreate", "#price_to", function(e) {
$(this).val(range["medium"].max);
});
$(document).on("rangeslidercreate", "#filter_price", function(e) {
// rangeslider has been created
});
$(document).on("change", "input:radio[name='price-range']", function() {
$("#price_from").val(range[this.value].min);
$("#price_to").val(range[this.value].max);
$("#filter_price").rangeslider("refresh");
});
.ui-slider-popup {
width: auto !important;
padding: 14px 8px 0 !important;
}
.ui-grid-a .ui-block-a,
.ui-grid-a .ui-block-b {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page-one" data-role="page">
<div data-role="header">
<h3>Header</h3>
</div>
<div role="main" class="ui-content">
<br>
<div class="ui-grid-a">
<div class="ui-block-a">
<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
<input type="range" name="price_from" id="price_from" min="0" max="30000" step="250" data-popup-enabled="true">
<input type="range" name="price_to" id="price_to" min="0" max="30000" step="250" data-popup-enabled="true">
</div>
</div>
<div class="ui-block-b">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input name="price-range" id="price-range-low" value="low" type="radio">
<label for="price-range-low">Low</label>
<input name="price-range" id="price-range-medium" value="medium" type="radio" checked="checked">
<label for="price-range-medium">Medium</label>
<input name="price-range" id="price-range-high" value="high" type="radio">
<label for="price-range-high">High</label>
</fieldset>
</div>
</div>
</div>
</div>
</body>
</html>
我正在尝试在 jQuery 移动版 1.4.5、JQ 2.1.4 中设置滑块的值,但出现此错误:
Error: no such method 'values' for slider widget instance
HTML代码:
<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
<input type="range" name="price_from" id="price_from" min="0" max="30000" step="250" data-popup-enabled="true">
<input type="range" name="price_to" id="price_to" min="0" max="30000" step="250" data-popup-enabled="true">
</div>
jquery:
$('#filter_price').slider();
$('#filter_price').slider('values', 0, 50);
$('#filter_price').slider('values', 1, 100);
这看起来和 the answer provided on SO 几年前一模一样,但可能已经过时了,因为它是 8 岁的。
这里有几个问题。首先,您在实例化滑块的 div
中创建了一些 range
输入。这只会导致问题,因为它们会干扰滑块布局。我建议删除它们。
其次,使用两个参数调用 values
旨在用于范围滑块,而不是单值滑块。我会假设你在 DOM 中的两个范围输入你试图使它成为一个范围 selection。因此,您需要在创建滑块时在滑块上设置 range: true
。然后你可以像现在一样调用values
。试试这个:
$('#filter_price').slider({
range: true,
min: 0,
max: 150
});
$('#filter_price').slider('values', 0, 50);
$('#filter_price').slider('values', 1, 100);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
</div>
另请注意,如果您尝试使用这些值创建滑块,则可以在实例化对象中提供所有参数,而无需再次 select 元素:
$('#filter_price').slider({
range: true,
min: 0,
max: 150,
values: [50, 100]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
</div>
我来晚了一点,但这是 jQuery Mobile 1.4.5 rangeslider
的解决方案(不是 jQuery- UI)。
由于 JQM rangeslider
有效地构建在两个 JQM 滑块之上,您可以通过编程方式在这两个 create
事件中设置 min
和 max
值:
var range = {
"low": {min: 1, max: 10000},
"medium": {min: 10000, max: 20000},
"high": {min: 20000, max: 30000}
};
$(document).on("slidecreate", "#price_from", function(e) {
$(this).val(range["medium"].min);
});
$(document).on("slidecreate", "#price_to", function(e) {
$(this).val(range["medium"].max);
});
$(document).on("rangeslidercreate", "#filter_price", function(e) {
// rangeslider has been created
});
$(document).on("change", "input:radio[name='price-range']", function() {
$("#price_from").val(range[this.value].min);
$("#price_to").val(range[this.value].max);
$("#filter_price").rangeslider("refresh");
});
.ui-slider-popup {
width: auto !important;
padding: 14px 8px 0 !important;
}
.ui-grid-a .ui-block-a,
.ui-grid-a .ui-block-b {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page-one" data-role="page">
<div data-role="header">
<h3>Header</h3>
</div>
<div role="main" class="ui-content">
<br>
<div class="ui-grid-a">
<div class="ui-block-a">
<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
<input type="range" name="price_from" id="price_from" min="0" max="30000" step="250" data-popup-enabled="true">
<input type="range" name="price_to" id="price_to" min="0" max="30000" step="250" data-popup-enabled="true">
</div>
</div>
<div class="ui-block-b">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input name="price-range" id="price-range-low" value="low" type="radio">
<label for="price-range-low">Low</label>
<input name="price-range" id="price-range-medium" value="medium" type="radio" checked="checked">
<label for="price-range-medium">Medium</label>
<input name="price-range" id="price-range-high" value="high" type="radio">
<label for="price-range-high">High</label>
</fieldset>
</div>
</div>
</div>
</div>
</body>
</html>