Question

我问过的问题有很多answers但是我需要的东西可以在jquery.ui.slider.js级别完成，而不是写complete new wrapper;

但目前来自davidpadbury的这段原型代码无法使用最新版本的jquery.ui.slider！

从davidpadbury版本到最新滑块版本

有很多变化

Answer 1

获得胜利的滑块！没有一路运作，但是一个良好的开端。

    <script type='text/javascript' src='../js/jquery.js'></script>

    <script type='text/javascript'>
    $(document).ready( function() {
            $(".slider").each( function() {
                    var $knob = $("<div></div>").addClass("slideKnob");
                    $knob.mousedown( function() {
                            this.dragging = true;
                    } );
                    $("<div></div>")
                            .addClass("slideBar")
                            .append($knob)
                            .insertBefore( this );

                    $(this).toggle( false );
                    $knob[0].inp = this;
                    $knob[0].dragging = false;

            } );

            $(document).mouseup( function() {
                    $(".slideKnob").each( function() { this.dragging = false; } );
            } );

            $(document).mousemove( function( e ) {
                    $(".slideKnob").each( function() {
                            if( !this.dragging ) return;
                            var lef = e.pageX - $(this).parent().offset().left - 7;
                            var min = $(this.inp).attr("min");
                            var max = $(this.inp).attr("max");
                            var step = $(this.inp).attr("step");

                            if( step != 0 ) {
                                    var rstep = 184 * step / (max - min);
                                    lef = rstep * Math.round( lef / rstep );
                            }
                            lef = Math.min( 184, lef );
                            lef = Math.max( 0, lef );
                            $(this).css( "left", lef );

                            var val = step * Math.round( (max - min) * lef / (184 * step) );
                            val = Math.round( val * 1000 ) / 1000;

                            $(this.inp).attr( "value",  val );
                            console.log( val );
                    } );
            } );
    } );
    </script>

    <style type='text/css'>
    .slideBar {
            width: 200px;
            height: 20px;
            border-style: none solid;
            border-width: 1px;
            border-color: #BBB;
            position: relative;
    }
    .slideKnob {
            position: absolute;
            width: 14px;
            height: 14px;
            border: 1px solid #444;
            top: 2px;
            cursor: pointer;
    }
    </style>

    <input class='slider' min=0 max=1 step=.1></input>
    <input class='slider' min=100 max=1 step=0></input>

Answer 2

jQuery UI Slider的扩展已经完成;可以从here

中提取代码

jQuery Slider中的可拖动范围

2 个答案: