Цитата:
|
Цитата:
|
Цитата:
выручай! :help: |
tp-20,
var plan = $('[name=plan]');
|
рони,
этот вариант я тоже пробовал, но select не меняется. https://jsfiddle.net/tps20/qdym1uvb/2/ - тут накидал, чтобы проще ориентироваться. |
Цитата:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css">
<form method="post" name="calc" onsubmit="recalc(); return false;">
<div>
<select name="plan" id="plan">
<option value="1000">Start</option>
<option value="3000">Medium</option>
<option value="5000">Pro</option>
</select>
</div>
<div>
<input name="sum" id="calc_sum" type="text" class="minCost" value="" />
<div class="slider"></div>
</div>
<div>
<input name="calc_btn" value="Рассчитать" type="submit">
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
jQuery(function($) {
var plan = $('[name=plan]');
var input = $('input.minCost');
var slider = $('.slider').slider({
range: 'max',
min: 1000,
max: 5000,
value: 1000,
step: 10,
animate: 300,
slide: function(event, ui) {
input.val(ui.value);
checkPlan();
}
});
input.val(slider.slider('value'));
checkPlan();
plan.on('change', function() {
slider.slider('value', this.value);
input.val(this.value);
});
input.on('change', function() {
var value = this.value;
if (value > 5000) value = 5000;
if (value < 1000) value = 1000;
this.value = value;
checkPlan();
slider.slider('value', value);
});
$('input').keypress(function(event) {
var key, keyChar;
if (!event) var event = window.event;
if (event.keyCode) key = event.keyCode;
else if (event.which) key = event.which;
if (key == null || key == 0 || key == 8 || key == 13 || key == 9 || key == 46 || key == 37 || key == 39) return true;
keyChar = String.fromCharCode(key);
if (!/\d/.test(keyChar)) return false;
});
function checkPlan() {
var value = input.val();
if (value == 1000 || value == 3000 || value == 5000) plan.val(value)
}
});
</script>
</body>
</html>
|
рони,
да, спасибо! то что надо. подскажи пожалуйста ещё один момент. нужно указать диапазон value: например от 1000 до 2999, от 3000 до 4990, и от 4991 до 5000 - для примера. я так понял, это на строке 68 нужно изменить условие для value - должны быть диапазоны, чтобы при движении ползунка значения в селекте чётко переключались. что-то типа такого:
if ((value >= 1000 && value <= 2999) ||
(value >= 3000 && value <= 4990) ||
(value >= 4991 && value <= 5000)) plan.val(value)
|
tp-20,
function checkPlan() {
var value = +input.val();
if (value < 2300) value = 1000;
else if (value < 3600) value = 3000;
else value = 5000;
plan.val(value)
}
|
добрый вечер.
вопрос по слайдеру. как убрать второй ползунок? т.е. range не нужен. просто нужен одиночный ползунок. Спасибо!
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css">
<div id="slider"></div>
<input type="text" name="from" id="from" value="" placeholder="from" />
<input type="text" name="to" id="to" value="" placeholder="to" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
myData = [ 1,2,4,6,8,10,20,30,40,50,100,200,300,400,500 ];
slider_config = {
range: true,
min: 0,
max: myData.length - 1,
step: 1,
slide: function( event, ui ) {
// Set the real value into the inputs
$('#from').val( myData[ ui.values[0] ] );
$('#to').val( myData[ ui.values[1] ] );
},
create: function() {
$(this).slider('values',0,0);
$(this).slider('values',1,myData.length - 1);
}
};
// Render Slider
$('#slider').slider(slider_config);
</script>
<style>
* {
font-family:Arial;
font-size:20px;
}
body {
padding:20px;
}
#slider { margin:20px }
</style>
</body>
</html>
|
tp-20,
:-?
slider_config = {
min: 0,
max: myData.length - 1,
step: 1,
slide: function( event, ui ) {
$('#from').val( myData[ ui.value ] );
},
create: function(event, ui) {
$('#from').val( myData[0] );
}
};
|
| Часовой пояс GMT +3, время: 23:34. |