我把input设置为只读,这个是没有焦点的,change的提示是需要焦点才能触发,我现在是想把它改成有变化就提示.
请高手指教..
原代码地址:http://jqueryui.com/demos/slider/rangemin.html
代码如下:<script>
$(function () {
$("#slider-range-min").slider({
range:"min",
value:1850,
min:1850,
max:1950,
step:10,
slide:function (event, ui) {
$("#amount").val(ui.value);
}
});
$("#amount").val($("#slider-range-min").slider("value"));
$("#amount").bind('change',function(){
alert($("#amount").val());
})
});
</script>
<div style="width:350px;">
<div id="slider-range-min" style="width:300px;float:left"></div>
<div style="float:right"><input type="text" id="amount" style="float:right;border:0; width:30px; height:14px; color:#f6931f; font-weight:bold;" readonly/></div>
</div>
请高手指教..
原代码地址:http://jqueryui.com/demos/slider/rangemin.html
代码如下:<script>
$(function () {
$("#slider-range-min").slider({
range:"min",
value:1850,
min:1850,
max:1950,
step:10,
slide:function (event, ui) {
$("#amount").val(ui.value);
}
});
$("#amount").val($("#slider-range-min").slider("value"));
$("#amount").bind('change',function(){
alert($("#amount").val());
})
});
</script>
<div style="width:350px;">
<div id="slider-range-min" style="width:300px;float:left"></div>
<div style="float:right"><input type="text" id="amount" style="float:right;border:0; width:30px; height:14px; color:#f6931f; font-weight:bold;" readonly/></div>
</div>
$("#slider-range-min").slider({
range:"min",
value:1850,
min:1850,
max:1950,
step:10,
slide:function (event, ui) {
if($("#amount").val() != ui.value){
console.log( $("#amount").val() )
}
$("#amount").val(ui.value);
}
});
$("#amount").val($("#slider-range-min").slider("value"));
});这样呢?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gbk">
<title>jQuery UI Slider - Range with fixed minimum</title>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<style>
#demo-frame > div.demo { padding: 10px !important; };
</style>
<script>
$(function () {
$("#slider-range-min").slider({
range:"min",
value:1850,
min:1850,
max:1950,
step:10,
slide:function (event, ui) {
if($("#amount").val() != ui.value){
$('#t').html('改变了,'+ui.value)
}
$("#amount").val(ui.value);
}
});
$("#amount").val($("#slider-range-min").slider("value"));
});
</script>
</head>
<body>
<div style="width:350px;">
<div id="slider-range-min" style="width:300px;float:left"></div>
<div style="float:right"><input type="text" id="amount" style="float:right;border:0; width:40px; height:14px; color:#f6931f; font-weight:bold;" readonly/></div>
</div>
<div id="t"></div></body>
</html>
这种效果?