Evo!
Ne bas puno testirano ali deluje da radi, pa cisto ako nekom zatreba:
Code:
<script>
<%--//This function highlight one number in scaled slider.--%>
<%--//Moving slider is not allowed--%>
<%--//<param name="number" > numer that will be highlighted in scale--%>
<%--//<param name="maxLevel"> max value in scale.--%>
function SetLevelToSlider(number, maxLevel) {
<%--//Round number on 2 decimals:--%>
number = number.toFixed(2);
$("#lastNumber").text(maxLevel);
<%--//Define JQuery slider--%>
$(".minbeds").slider({
<%--//Moving is not allowed:--%>
disabled: true,
min: 0,
max: maxLevel,
<%--//Position of slider:--%>
value: number,
step: 0.01
});
var scale = '';
var scaleValue = '';
<%--//Write scale under slider--%>
for (var i = 1; i <= maxLevel - 1; i++) {
scale += '<div style="float:left;width:';
scale += 100 / maxLevel;
var scaleValue = '';
scaleValue = (maxLevel < 24) ? i : '|';
scale += '%;"><span style="float:right;">' + scaleValue + '</span></div>';
}
$('.setScale').html(scale);
}
</script>
<div>
<br />
<div id="slider" class="minbeds" style="width: 94%; float: left;">
</div>
<div id="Div1" style="width: 94%; float: left;">
<div style="float: left;">
0</div>
<div id="divScaleID" class="setScale">
</div>
<div style="float: right;">
<span id="lastNumber"></span>
</div>
</div>
<br />
</div>
Pored ovoga sam morao da menjam i css JQuery slidera:
Code:
.ui-slider-horizontal
{
height: .2em;
}
.ui-slider-horizontal .ui-slider-handle
{
top: -.8em;
margin-left: -.6em;
}
.ui-widget-content
{
border: 1px solid #aaaaaa;
background: yellow url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
color: #222222;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
{
background: url(images/arrowSlider.png) repeat-x;
font-weight: normal;
color: #555555;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus
{
border: 1px solid #999999;
background: #dadada url(images/arrowSlider.png) repeat-x;
font-weight: normal;
color: #212121;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active
{
border: 1px solid #aaaaaa;
background: #ffffff url(images/arrowSlider.png) repeat-x;
font-weight: normal;
color: #212121;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
{
border: 0px solid #d3d3d3;
font-weight: normal;
color: #555555;
}
Kada se funkcija pozove:
Code:
var level = 6.66;
var scale = 10;
SetLevelToSlider(level,scale);
Izgleda ovako nekako:
Tako da to je to.
Ako neko ima zamerke, ideje, preporuke...
Uvek sam raspolozen da cujem
[Ovu poruku je menjao Belgarion dana 05.07.2013. u 11:42 GMT+1]
prikaz vrednostu u jquery grafiku
Registrovani: 0 ( 0 )