>

하나의 슬라이더에 2 개 또는 3 개 이상의 범위 슬라이더와 같이 jQuery UI 슬라이더 위젯에 여러 핸들을 추가하려고합니다.

Google에서 검색을 시도하여 여러 핸들을 갖도록 수정하는 방법을 보여주는 기사를 찾았지만 범위 슬라이더로 작동해야합니다.

어쨌든이 작업을 수행 할 수 있습니까?

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 1439,
    values: [540, 1020],
    animate: true,
    slide: slideTime
});

감사합니다

  • 답변 # 1

    colResizable jQuery 플러그인을 살펴보십시오. 테이블 열의 크기를 조정하고 여러 범위 슬라이더를 만들 수 있습니다.

  • 답변 # 2

    colResizable은 훌륭하지만 모두 현대적인 것을 찾고 있다면이 정확한 틈새 시장을 채우기 위해 Elessar를 썼습니다. .

  • 답변 # 3

    이것은jquery-ui 슬라이더기능 및다중 범위 슬라이더http://jsfiddle.net/ladrower/BmQq4/

    사용하기 쉽다. 다중 범위 슬라이더를 포함 할 DOM 요소의 선택기를 전달하면됩니다.

    <html>
        <div id="slider"></div>
    </html>
    <script>
        var intervals = new Intervals("#slider");
    </script>
    
    

    GitHub https://github.com/ladrower/jquery-ui-intervals에서 설명서와 소스를 확인하십시오

  • 답변 # 4

    편집했습니다

    .

    http://jsfiddle.net/q5WEe/1/을 볼 수 있습니다

    70 행에서 82 행을 편집했습니다.

               /*edit
                if ( o.values.length && o.values.length !== 2 ) {
                    o.values = [ o.values[0], o.values[0] ];
                }*/
            }
            /*edit
            this.range = $( "<div></div>" )
                .appendTo( this.element )
                .addClass( "ui-slider-range" +
                // note: this isn't the most fittingly semantic framework class for this element,
                // but worked best visually with a variety of themes
                " ui-widget-header" +
                ( ( o.range === "min" || o.range === "max" ) ? " ui-slider-range-" + o.range : "" ) );*/
    
    

  • 답변 # 5

    테이블 크기에 맞게 조정 되었기 때문에 축소 가능하고 적합하지 않았습니다. jquery UI 위젯 인 슬라이더를 사용하는 것이 좋습니다. 소스 코드가 여러 핸들을 쉽게 처리 할 수있는 것처럼 보였지만 실제로는 '추가'또는 '제거'핸들을 기능으로 구현하지 않았습니다. 그래서 방금 jquery UI Slider의 소스 코드에 추가했지만 조금 무섭습니다.

    var slider = $.widget("ui.slider", $.ui.mouse, {
        version: "1.11.4",
        widgetEventPrefix: "slide",
        //...
        value: function(newValue) {
            // ...
        },
        values: function(index, newValue) {
            // ...
        },
        //new function to allow creation of handles
        //you can add your own code to handle arguments or something for placing
        //the new handle in a specific spot
        addHandle: function() {
                //adds a new handle 
                this.options.values.push(this._trimAlignValue((this._valueMax() - this._valueMin()) / 2));
                this._refresh();
        },
        //new function to allow deleting handles
        //currently just takes the last value off, but you can make it fancier
        removeHandle: function() {
            //only remove a handle if there are more than 1 handles 
            if (this.options.values.length > 1) {
                this.options.values.pop();
                this._refresh();
            }
        },
       //...
     }
    
    

    그러면이 함수들을 호출하고 싶을 때처럼 그렇게합니다

    //when your 'add handle' button is clicked
    $("#btn-add").click(function(){ 
        //call the add handle function you made within the slider widget
        $( "#slider" ).slider("addHandle"); 
    });
    $("#btn-remove").click(function(){
        $( "#slider" ).slider("removeHandle");
    });
    
    

관련 자료

  • 이전 runtime - Java 앱이 종료/크래쉬 될 때 Java 자식 프로세스를 제거하려면 어떻게해야합니까?
  • 다음 visual studio 2010 - "MSVCP110Ddll이 컴퓨터에 없습니다"문제 해결