Страница 4 из 5 « Первая < 23 4 5 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jquery ui ползунок как (https://javascript.ru/forum/jquery/56315-jquery-ui-polzunok-kak.html)

Ramzes94 13.06.2015 08:10
Цитата:
Сообщение от рони (Сообщение 374623)
Ramzes94,
глюк какой-то есть, data-val=перезаписывается
Рони помнишь ты говорил что глюк есть.
Этот глюк не как не исправить?
Просто в предыдущем вроде скрипте все корректно работает без глюков

Ramzes94 13.06.2015 08:14
То есть нашел косяк в чем.
Когда я ставлю значение больше все работает корректно.
Когда ставлю значение меньше не работает
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]]})

})
});

Ramzes94 13.06.2015 08:20
Все нашел косяк надо было просто в строке 22, 23 и 30, 32 вместо = равно поставить знак < меньше)))

Ramzes94 13.06.2015 09:07 
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]]})

	})
});


Рони так то корректно все сделал в коде?
Все вроде работает корректно)))

рони 13.06.2015 10:29
Ramzes94,
я пас ....
я дал вам рабочий код, но вам нужен код с глюками ...
на последок
Цитата:
Сообщение от Ramzes94
parseInt
нафига??? число превращать в число

Ramzes94 13.06.2015 10:44
Рони суть в том что код который вы мне дали в нем каркас и глюки есть.
То есть при вводе числа меньше в <ipnut> min число сбрасывается.
А в максимальной на оборот, при вводе числа больше в <ipnut> max число сбрасывается.

Проверьте сами.


Цитата:
Сообщение от рони (Сообщение 374610)
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,
	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 );

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" : min_max})

})

});
</script>
</body>
</html>

Ramzes94 13.06.2015 10:50
Можно как то убрать это глюк?

Просто так вроде все работает без глюков

Цитата:
Сообщение от Ramzes94 (Сообщение 374931) 
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]]})

	})
});


Рони так то корректно все сделал в коде?
Все вроде работает корректно)))

рони 13.06.2015 11:16
Ramzes94,
идите в пост номер 5 и попробуйте там -- ввести значение меньше или ещё какой глюк обнаружить

Ramzes94 13.06.2015 11:26
В общем Рони не понял тебя. Но спасибо и на этом все отлично):victory:

рони 13.06.2015 11:39
Ramzes94,
пост 5
Последний раз редактировалось рони, Сегодня в 11:37.


Часовой пояс GMT +3, время: 09:42.
Страница 4 из 5 « Первая < 23 4 5 >
Показывать 40 сообщений этой темы на одной странице