Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.06.2015, 18:23
Аватар для Ramzes94
Аспирант
Отправить личное сообщение для Ramzes94 Посмотреть профиль Найти все сообщения от Ramzes94
 
Регистрация: 09.06.2015
Сообщений: 62

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>
Ответить с цитированием
  #2 (permalink)  
Старый 09.06.2015, 18:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,034

Сообщение от Ramzes94
onclick="document.getSelection('minCost').value = '2990'">
это что?
Сообщение от Ramzes94
передвижении ползунка текст сбрасывается.
где сбрасывается?
Сообщение от Ramzes94
Или вообще можно подругому сделать? Если да то как?
а что вобще делает ваш код?
и где
Сообщение от Ramzes94
$( "#budget" )
Ответить с цитированием
  #3 (permalink)  
Старый 10.06.2015, 10:04
Аватар для Ramzes94
Аспирант
Отправить личное сообщение для Ramzes94 Посмотреть профиль Найти все сообщения от Ramzes94
 
Регистрация: 09.06.2015
Сообщений: 62

Объясню на примере
Перейди по ссылки: http://9039340639.myjino.ru/ Там пример формы обратной связи. Вопрос в том что как сделать так чтобы допустим кликаешь "Выбрать услугу" Допустим выберешь нужную тему и он автоматом вставлял в ползунок мин цену стоимость данной темы, но при этом когда ползунок переправляеш текст не сбрасывался. Как то так)))

От души буду благодарен!))
Ответить с цитированием
  #4 (permalink)  
Старый 10.06.2015, 10:28
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,431

Ramzes94, так и не сбрасывается ничего вроде
Ответить с цитированием
  #5 (permalink)  
Старый 10.06.2015, 12:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,034

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>

Последний раз редактировалось рони, 13.06.2015 в 11:37.
Ответить с цитированием
  #6 (permalink)  
Старый 10.06.2015, 13:23
Аватар для Ramzes94
Аспирант
Отправить личное сообщение для Ramzes94 Посмотреть профиль Найти все сообщения от Ramzes94
 
Регистрация: 09.06.2015
Сообщений: 62

От души дружище)))
Блин дружище огромное тебе человеческое спасибо. Вообще все красиво)))
Ответить с цитированием
  #7 (permalink)  
Старый 10.06.2015, 14:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,034

Ramzes94,
глюк какой-то есть, data-val=перезаписывается
Ответить с цитированием
  #8 (permalink)  
Старый 10.06.2015, 14:06
Аватар для Ramzes94
Аспирант
Отправить личное сообщение для Ramzes94 Посмотреть профиль Найти все сообщения от Ramzes94
 
Регистрация: 09.06.2015
Сообщений: 62

Рони по братски подскажи пожалуйста, вот я передвигаю ползунок цифры одни а вот когда отпускаю там сверху начисляется как убрать?)
Ответить с цитированием
  #9 (permalink)  
Старый 10.06.2015, 14:11
Аватар для Ramzes94
Аспирант
Отправить личное сообщение для Ramzes94 Посмотреть профиль Найти все сообщения от Ramzes94
 
Регистрация: 09.06.2015
Сообщений: 62

У меня вроде нормально все отображается
Ответить с цитированием
  #10 (permalink)  
Старый 10.06.2015, 14:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,034

Ramzes94,
строка 128 исправлена.
чтобы увидеть глюк выберите диапазон измените значение треугольником и снова нажмите на этот же диапазон, толи глюк толи фишка в data сохранялось значение слайдера data binding

Последний раз редактировалось рони, 10.06.2015 в 14:50.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery UI -> selectmenu, как установить вручную selected? Pit jQuery 3 28.05.2015 17:31
Как установить дефотлтное значение в jquery autocomplette? heksen jQuery 1 28.02.2015 16:24
Как подключить JQUery при разработке расширения для OPERA? Romingood jQuery 1 24.10.2012 10:25
Ползунок как на YouTube и условие. dailclever Элементы интерфейса 1 23.07.2012 18:51
Необходимы советы как убирать не нужное из библиотеки jquery. dr_gluk jQuery 13 18.07.2011 11:05