Здравствуйте!
Проблема такая:
Есть 3 слайдера диапазонов, по сумме выбранных значений которых получается конечная цена. Все это работает нормально.
Добавил тултипы вверху каждого слайдера для постоянного показа тукущего значения диапазона. Тоже, как бы, работают...
Но загвоздка в том, что при перемещении одного из 3-х тултипов, текущее значение перемещаемого тултипа отражается и в 2-х остальных. Такая "зависимость" тултипов мне совершенно не нужна. Но, почему так происходит - пока непонятно.
Буду благодарен за любой совет.
Спасибо.
Извиняюсь за возможно неряшливый код.
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<meta charset="utf-8">
<style type="text/css">
div.demo { padding: 10px !important; width: 300px;}
.ui-widget{font-size: 0.6em !important;}
.tooltip {
position: absolute;
z-index: 1020;
display: block;
padding: 5px;
font-size: 11px;
visibility: visible;
margin-top: -2px;
bottom:120%;
margin-left: -1em;
}
.tooltip .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top: 5px solid #000000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
width: 0;
height: 0;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.ui-slider {
background: black repeat-x bottom left;
border-bottom: 1px solid #EBEAE5;
height: 15px;
margin: 0;
padding: 0px;
}
.ui-slider-handle {
background: #ED6B51;
border-bottom: 1px solid #a8a79f;
border-right: 1px solid #a8a79f;
height: 20px;
width: 10px;
margin: 0;
padding: 0px;
display: inline-block;
}
.ui-slider-range {
height: 10px;
border-bottom: 3px solid red;
position: relative;
}
.ui-slider-handle {
background: #ED6B51 !important;
border-bottom: 1px solid #a8a79f !important;
border-right: 1px solid #a8a79f !important;
height: 20px !important;
width: 10px !important;
margin: 0 !important;
padding: 0px !important;
display: inline-block !important;
top: -4px !important;
}
</style>
<script>
$(function() {
var initialValue1 = 1;
var sliderTooltip1 = function(event, ui) {
var curValue1 = ui.value || initialValue1;
var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue1 + '</div><div class="tooltip-arrow"></div></div>';
$("#amount").val(ui.value);
$('.ui-slider-handle').html(tooltip);
calc();
}
$( "#slider-range-max" ).slider({
range: "max",
value: initialValue1,
min: 1,
max: 1000,
//step: 1,
create: sliderTooltip1,
slide: sliderTooltip1
});
$("#amount").val( $("#slider-range-max").slider("value"));
});
/*-------------------- 2 ---------------------------*/
$(function() {
var initialValue2 = 1;
var sliderTooltip2 = function(event, ui) {
var curValue2 = ui.value || initialValue2;
var tooltip2 = '<div class="tooltip"><div class="tooltip-inner">' + curValue2 + '</div><div class="tooltip-arrow"></div></div>';
$( "#amount2" ).val( ui.value );
$('.ui-slider-handle').html(tooltip2);
calc();
}
$( "#slider-range-max2" ).slider({
range: "max",
value: initialValue2,
min: 1,
max: 32,
//step: 1,
create: sliderTooltip2,
slide: sliderTooltip2
});
$("#amount2").val($("#slider-range-max2").slider("value"));
});
/*----------------- 3 --------------*/
$(function() {
var initialValue3 = 1;
var sliderTooltip3 = function(event, ui) {
var curValue3 = ui.value || initialValue3;
var tooltip3 = '<div class="tooltip"><div class="tooltip-inner">' + curValue3 + '</div><div class="tooltip-arrow"></div></div>';
$( "#amount3" ).val( ui.value );
$('.ui-slider-handle').html(tooltip3);
calc();
}
$( "#slider-range-max3" ).slider({
range: "max",
value: initialValue3,
min: 1,
max: 32,
//step: 1,
create: sliderTooltip3,
slide: sliderTooltip3
});
$("#amount3").val($("#slider-range-max3").slider("value"));
});
/*----------------------------------*/
function calc(par){
type = 1;
amount = document.cl_form.amount.value;
amount2 = document.cl_form.amount2.value;
amount3 = document.cl_form.amount3.value;
if (amount == 0){// HDD GB
vL1 = 0;
}
else if (amount >= 0 && amount <= 99){
vL1 = 0.0002;
}
else if (amount >= 100 && amount <= 499){
vL1 = 0.0003;
}
else {
vL1 = 0.0004;
};
if (amount2 == 0){// RAM GB
vL2 = 0;
}
else if (amount2 >= 1 && amount2 <= 3){
vL2 = 0.0601;
}
else if (amount2 >= 4 && amount2 <= 7){
vL2 = 0.0522;
}
else if (amount2 >= 8 && amount2 <= 15){
vL2 = 0.0390;
}
else {
vL2 = 0.0350;
};
if (amount3 == 0){// CPU
vL3 = 0;
}
else if (amount3 >= 1 && amount3 <= 3){
vL3 = 0.015;
}
else if (amount3 >= 4 && amount3 <= 7){
vL3 = 0.008;
}
else if (amount3 >= 8 && amount3 <= 15){
vL3 = 0.006;
}
else {
vL3 = 0.005;
};
summ = 1*(Number(vL1) + Number(vL2) + Number(vL3));
summ = Math.round((summ)*10000)/10000;
summday = 24*(Number(vL1) + Number(vL2) + Number(vL3));
summday = Math.round((summday)*10000)/10000;
document.getElementById("amounttd").innerHTML=vL1;
document.getElementById("amount2td").innerHTML=vL2;
document.getElementById("amount3td").innerHTML=vL3;
document.getElementById("summ").innerHTML=summ;
document.getElementById("summday").innerHTML=summday;
return false;
}
</script>
</head>
<body>
<form name="cl_form">
<div class="demo">
<p>
<label for="amount">Объем диска (HDD GB):</label>
<input type="text" id="amount" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; width:35px;" />
</p>
<div id="slider-range-max"></div>
<p>
<label for="amount2">Объем оперативки (RAM GB):</label>
<input type="text" id="amount2" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; width:35px;" />
</p>
<div id="slider-range-max2"></div>
<p>
<label for="amount3">CPU:</label>
<input type="text" id="amount3" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; width:35px;" />
</p>
<div id="slider-range-max3"></div>
<p>
<table border="1" cellpadding="3" style="border-collapse: collapse;">
<tr>
<td>
HDD GB <p id="amounttd">0</p>
</td>
<td>
RAM GB <p id="amount2td">0</p>
</td>
<td>
CPU <p id="amount3td">0</p>
</td>
<td>
SUMM/час: <p id="summ">0</p>
</td>
<td>
SUMM/день: <p id="summday">0</p>
</td>
<tr>
</table>
</p>
</div>
</form>
</body>
Простой