我把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>

解决方案 »

  1.   

    http://www.cnblogs.com/yond/archive/2011/05/31/2063027.html
      

  2.   

            $(function () {
                $("#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"));
            });这样呢?
      

  3.   


    <!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>
    这种效果?