jquery ui ползунок как
Здравствуйте. Друзья.
Подскажите не как не могу понять как сделать так чтобы допустим я выбираю раздел кликаю через onclick="document.getSelection('minCost').value = '2990' сумма вставляется в <ipnut> Но при передвижении ползунка текст сбрасывается. Или вообще можно подругому сделать? Если да то как? В общем вот собственно код: $(function() {
$( "#budget" ).slider({
range: true,
min: 990,
max: 70000,
values: [ 2990, 68000 ],
slide: function( event, ui ) {
$( "#minCost" ).val( ui.values[ 0 ] );
$( "#maxCost" ).val( ui.values[ 1 ] );
}
});
$( "#minCost" ).val( $( "#budget" ).slider( "values", 0 ) );
$( "#maxCost" ).val( $( "#budget" ).slider( "values", 1 ) );
// Изменение местоположения ползунка при вводиде данных в первый элемент input
$("input#minCost").change(function(){
var value1=$("input#minCost").val();
var value2=$("input#maxCost").val();
if(parseInt(value1) > parseInt(value2)){
value1 = value2;
$("input#minCost").val(value1);
}
$("#budget").slider("values",0,value1);
});
// Изменение местоположения ползунка при вводиде данных в второй элемент input
$("input#maxCost").change(function(){
var value1=$("input#minCost").val();
var value2=$("input#maxCost").val();
if(parseInt(value1) > parseInt(value2)){
value2 = value1;
$("input#maxCost").val(value2);
}
$("#budget").slider("values",1,value2);
}); // фильтрация ввода в поля
jQuery('#amount, #amount_1').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;
});});
<div class="hide options">
<div class="option"><span class="val" onclick="document.getSelection('minCost').value = '2990'">Текст</span></div>
<div class="option"><span class="val" onclick="document.getElementById('minCost').value = '990'">Текст2</span></div>
<div class="option"><span class="val" onclick="document.getElementById('minCost').value = '1200'">Текст3</span></div>
</div>
<input type="hidden" value="0" name="order" id="position">
</div>
<div id="formCost">
<label for="minCost">Бютжет: от</label><input type="text" id="minCost" name="minbut" value="990" />
<label for="maxCost">до</label> <input type="text" id="maxCost" name="maxbut" value="70000"/> <label>руб</label>
</div>
|
Цитата:
Цитата:
Цитата:
и где Цитата:
|
Объясню на примере
Перейди по ссылки: http://9039340639.myjino.ru/ Там пример формы обратной связи. Вопрос в том что как сделать так чтобы допустим кликаешь "Выбрать услугу" Допустим выберешь нужную тему и он автоматом вставлял в ползунок мин цену стоимость данной темы, но при этом когда ползунок переправляеш текст не сбрасывался. Как то так)))
От души буду благодарен!)) |
Ramzes94, так и не сбрасывается ничего вроде :blink:
|
slider инициализация из инпутов и смена диапазона
Ramzes94,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/le-frog/jquery-ui.css">
<style>
#slider{
margin:20px;
width:500px;
height:5px;
}
.ui-slider-handle{
border-radius:50%;
position:relative;
font-size:14px;
display:block;
}
.ui-slider-horizontal .ui-slider-handle{
top:0.5em;
background:transparent;
border-radius:0%;
width:0;
height:0;
border-top:none;
text-decoration:none;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:14px solid red;
}
#slider:focus{
outline:0;
border:0;
}
.ui-slider-horizontal .ui-slider-handle:last-of-type{
background:transparent;
border-bottom:none;
border-top:14px solid red;
top:-1.2em;
}
.option{
cursor: pointer;
border-radius: 3px;
border: 2px solid rgb(0, 0, 255);
margin: 5px;
width: 120px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<input type="hidden" name="minCostCat" value="990">
<input type="hidden" name="maxCostCat" value="70000">
<div class="box">
<div class="box-heading">Диапазон цен</div>
<form class="fromtofilter" action="#" method="GET">
<div class="formCost">
<label for="minCost">от</label><input type="text" id="minCost" />
<label for="maxCost">до</label><input type="text" id="maxCost" />
</div>
<div class="sliderCont">
<div id="slider"></div>
</div>
<div class="option" data-val='[1200,5000]'><span class="val" >Текст1 1200,5000</span></div>
<div class="option" data-val='[3000,80000]'><span class="val" >Текст2 3000,80000</span></div>
<div class="option" data-val='[4000,95000]'><span class="val" >Текст3 4000,95000</span></div>
</form>
</div>
<script>
jQuery(document).ready(function(){
var min_max = [+jQuery("[name='minCostCat']").val(),+jQuery("[name='maxCostCat']").val()]
/* слайдер цен */
jQuery("#slider").slider({
min: min_max[0],
max: min_max[1],
values: [min_max[0],min_max[1]],
range: true,
change: function(event, ui) {
jQuery("input#minCost").val(ui.values[0]);
jQuery("input#maxCost").val(ui.values[1]);
},
slide: function(event, ui){
jQuery("input#minCost").val(ui.values[0]);
jQuery("input#maxCost").val(ui.values[1]);
}
});
$("#slider").slider( "option", "values", [min_max[0],min_max[1]] );
jQuery("input#minCost").change(function(){
var value1=+jQuery("input#minCost").val()||min_max[0];
var value2=+jQuery("input#maxCost").val()||min_max[1];
if(value1 > value2){value1 = value2};
if(value1 < min_max[0]){value1 = min_max[0]};
jQuery("input#minCost").val(value1);
jQuery("#slider").slider("values",0,value1);
});
jQuery("input#maxCost").change(function(){
var value1=+jQuery("input#minCost").val()||min_max[0];
var value2=+jQuery("input#maxCost").val()||min_max[1];
if (value2 > min_max[1]) { value2 = min_max[1]};
if(value1 > value2){value2 = value1;}
jQuery("input#maxCost").val(value2);
jQuery("#slider").slider("values",1,value2);
});
jQuery(".option").click(function() {
var val = jQuery(this).data("val");
min_max = [val[0],val[1]];
jQuery("#slider").slider("option", {"min":val[0],"max":val[1],"values" : [val[0],val[1]]})
})
});
</script>
</body>
</html>
|
От души дружище)))
Блин дружище огромное тебе человеческое спасибо. Вообще все красиво))):victory:
|
Ramzes94,
глюк какой-то есть, data-val=перезаписывается |
Рони по братски подскажи пожалуйста, вот я передвигаю ползунок цифры одни а вот когда отпускаю там сверху начисляется как убрать?)
|
У меня вроде нормально все отображается:-?
|
Ramzes94,
строка 128 исправлена. |
Цитата:
|
Спасибо помог)
Все отлично то что хотел даже лучше)))
|
Подскажи пожалуйста еще один вопрос.
Как мне сделать общий <ipnut name=""> что бы с одного инпута поступало сообщение? а не с разных)
<input type="hidden" name="minCostCat" value="990">
<input type="hidden" name="maxCostCat" value="70000">
<div class="box">
<div class="box-heading">Диапазон цен</div>
<form class="fromtofilter" action="#" method="GET">
<div class="formCost">
<label for="minCost">от</label><input type="text" id="minCost" />
<label for="maxCost">до</label><input type="text" id="maxCost" />
</div>
<div class="sliderCont">
<div id="slider"></div>
</div>
<div class="option" data-val='[1200,5000]'><span class="val" >Текст1 1200,5000</span></div>
<div class="option" data-val='[3000,80000]'><span class="val" >Текст2 3000,80000</span></div>
<div class="option" data-val='[4000,95000]'><span class="val" >Текст3 4000,95000</span></div>
</form>
</div>
|
Ramzes94,
непонял вопрос |
Ну вот на примере)
<!-- Это первый input правильно?) -->
<input type="hidden" name="minCostCat" value="990">
<input type="hidden" name="maxCostCat" value="70000">
<div class="box">
<div class="box-heading">Диапазон цен</div>
<form class="fromtofilter" action="#" method="GET">
<div class="formCost">
<!-- Это второй input правильно?) -->
<label for="minCost">от</label> <input type="text" id="minCost" />
<label for="maxCost">до</label> <input type="text" id="maxCost" />
</div>
<div class="sliderCont">
<div id="slider"></div>
</div>
<div class="option" data-val='[1200,5000]'><span class="val" >Текст1 1200,5000</span></div>
<div class="option" data-val='[3000,80000]'><span class="val" >Текст2 3000,80000</span></div>
<div class="option" data-val='[4000,95000]'><span class="val" >Текст3 4000,95000</span></div>
</form>
</div>
Как мне указать в php чтобы допустим на почту поступало сообщение с одного из этих ipnut а не с двух по отдельности))) Пробовал указать в одном ipnut поступало только то что в: <input type="hidden" name="minCostCat" value="990"> <input type="hidden" name="maxCostCat" value="70000"> А второй не поступал. Только когда отдельно и на него name="" Ставлю поступает уведомление. Но опять же по раздельности) |
Ramzes94,
непонимаю и с php помочь не могу. |
Короче объясню в двух словах)
Как убрать верхний ipnut? Чтобы работало все только с ipnut который указан ниже?
<!-- верхний input убрать-->
<input type="hidden" name="minCostCat" value="990">
<input type="hidden" name="maxCostCat" value="70000">
<div class="box">
<div class="box-heading">Диапазон цен</div>
<form class="fromtofilter" action="#" method="GET">
<div class="formCost">
<!-- А этот остаить чтобы все работало на нем -->
<label for="minCost">от</label> <input type="text" id="minCost" />
<label for="maxCost">до</label> <input type="text" id="maxCost" />
</div>
<div class="sliderCont">
<div id="slider"></div>
</div>
<div class="option" data-val='[1200,5000]'><span class="val" >Текст1 1200,5000</span></div>
<div class="option" data-val='[3000,80000]'><span class="val" >Текст2 3000,80000</span></div>
<div class="option" data-val='[4000,95000]'><span class="val" >Текст3 4000,95000</span></div>
</form>
</div>
|
Ramzes94,
если инпуты ненужны в строках 3и 4 -- уберите они нужны только как источник первоначальной инициализации. строку var min_max = [+jQuery("[name='minCostCat']").val(),+jQuery("[name='maxCostCat']").val()] замените на массив с нужными цифрами var min_max =[990,7000] |
Ramzes94,
делалось год назад http://javascript.ru/forum/dom-windo...tml#post312785 можно ещё многое сократить :) |
Все Отлично, это мне и нужно было спасибо дружище)))
|
Джони привет дружище))) подскажи а если мне нужно несколько разных цыфр по умолчанию что нужно добавить к var min_max =[990,7000] ?
Просто стоимость будут размешены на разных страницах по разной стоимости. |
Ramzes94,
вопрос некорректный -- непонимаю, что нужно то и пишите. |
Допустим на сайте будет расположено несколько страниц. как мне сделать так что бы на одной странице по умолчанию, была допустим от 990 до 30000 на другой от 1200 до 50000 на следующей от 2990 до 70000 и т.д
|
Ramzes94,
спросите специалиста по php, или прочтите документацию по вашему шаблонизатору который формирует ваши страницы, это не проблема js. |
Цитата:
Сейчас на одной странице установлена от 990 - 7000. А как мне сделать на другой странице от 1200 - 9900 :write: Тут все ништяк просто функцию добавить как :victory: |
Ramzes94,
:-? |
Ну а так если вы меня и на этом не поняли? То спасибо и на этом)
|
А все разобрался. Спасибо Рони большое)))
|
Цитата:
|
Цитата:
Цитата:
|
Цитата:
Этот глюк не как не исправить? Просто в предыдущем вроде скрипте все корректно работает без глюков |
То есть нашел косяк в чем.
Когда я ставлю значение больше все работает корректно. Когда ставлю значение меньше не работает jQuery(document).ready(function(){
var min_max = [990,70000]
/* слайдер цен */
jQuery("#budget").slider({
min: min_max[0],
max: min_max[1],
values: min_max,
range: true,
change: function(event, ui) {
jQuery("input#minCost").val(ui.values[0]);
jQuery("input#maxCost").val(ui.values[1]);
},
slide: function(event, ui){
jQuery("input#minCost").val(ui.values[0]);
jQuery("input#maxCost").val(ui.values[1]);
}
});
$("#budget").slider( "option", "values", min_max );
jQuery("input#minCost").change(function(){
var value1=+jQuery("input#minCost").val()||min_max[0];
var value2=+jQuery("input#maxCost").val()||min_max[1];
if(value1 > value2){value1 = value2};
if(value1 < min_max[0]){value1 = min_max[0]};
jQuery("input#minCost").val(value1);
jQuery("#budget").slider("values",0,value1);
});
jQuery("input#maxCost").change(function(){
var value1=+jQuery("input#minCost").val()||min_max[0];
var value2=+jQuery("input#maxCost").val()||min_max[1];
if (value2 > min_max[1]) { value2 = min_max[1]};
if(value1 > value2){value2 = value1;}
jQuery("input#maxCost").val(value2);
jQuery("#budget").slider("values",1,value2);
});
jQuery(".option").click(function() {
var val = jQuery(this).data("val");
min_max = val;
jQuery("#budget").slider("option", {"min":val[0],"max":val[1],"values" : [val[0],val[1]]})
})
});
|
Все нашел косяк надо было просто в строке 22, 23 и 30, 32 вместо = равно поставить знак < меньше)))
|
jQuery(document).ready(function(){
var min_max = [+jQuery("[name='minbudget']").val(),+jQuery("[name='maxbudget']").val()]
/* слайдер цен */
jQuery("#budget").slider({
min: min_max[0],
max: min_max[1],
values: min_max,
range: true,
change: function(event, ui) {
jQuery("input#minCost").val(ui.values[0]);
jQuery("input#maxCost").val(ui.values[1]);
},
slide: function(event, ui){
jQuery("input#minCost").val(ui.values[0]);
jQuery("input#maxCost").val(ui.values[1]);
}
});
$("#budget").slider( "option", "values", min_max );
jQuery("input#minCost").change(function(){
var value1=+jQuery("input#minCost").val()||min_max[0];
var value2=+jQuery("input#maxCost").val()||min_max[1];
if(parseInt(value1) > parseInt(value2)){
value1 = value2;
$("input#minCost").val(value1);
}
$("#budget").slider("values",0,value1);
});
jQuery("input#maxCost").change(function(){
var value1=+jQuery("input#minCost").val()||min_max[0];
var value2=+jQuery("input#maxCost").val()||min_max[1];
if(parseInt(value1) > parseInt(value2)){
value2 = value1;
$("input#maxCost").val(value2);
}
$("#budget").slider("values",1,value2);
});
jQuery(".option").click(function() {
var val = jQuery(this).data("val");
min_max = val;
jQuery("#budget").slider("option", {"min":val[0],"max":val[1],"values" : [val[0],val[1]]})
})
});
Рони так то корректно все сделал в коде? Все вроде работает корректно))) |
Ramzes94,
я пас .... я дал вам рабочий код, но вам нужен код с глюками ... на последок Цитата:
|
Рони суть в том что код который вы мне дали в нем каркас и глюки есть.
То есть при вводе числа меньше в <ipnut> min число сбрасывается. А в максимальной на оборот, при вводе числа больше в <ipnut> max число сбрасывается. Проверьте сами. Цитата:
|
Можно как то убрать это глюк?
Просто так вроде все работает без глюков Цитата:
|
Ramzes94,
идите в пост номер 5 и попробуйте там -- ввести значение меньше или ещё какой глюк обнаружить |
В общем Рони не понял тебя. Но спасибо и на этом все отлично):victory:
|
Ramzes94,
пост 5 Последний раз редактировалось рони, Сегодня в 11:37. |
| Часовой пояс GMT +3, время: 13:02. |