ParamQuery ScrollBar API Documentation

Options

Methods

Events

pqScrollBar is a standalone widget which is used for scrolling in pqGrid. It can also be used independently of the grid.

Reference to horizontal pqScrollBar in pqGrid can be obtained with
?
1
2
3
4
5
var $pqScrollbar = $grid.find(".pq-sb-horiz");
 
//or
 
var scrollbar = grid.hscrollbar(); //javascript instance. ( >= v3.2.0 )

Reference to vertical pqScrollBar can be obtained with
?
1
2
3
4
5
var $pqScrollbar = $grid.find(".pq-sb-vert");
 
//or
 
var scrollbar = grid.vscrollbar(); //javascript instance. ( >= v3.2.0 )

Note:

Type of events is pqscrollbar + eventName all in lowercase e.g., pqscrollbarscroll in versions < v3.2.0.
Type of events is pqScrollBar + ":" + eventName e.g., pqScrollBar:scroll in versions >= v3.2.0.
Options
bootstrapType: Object
Default: { on: false, slider: 'btn btn-default', up: "glyphicon glyphicon-chevron-up", down: "glyphicon glyphicon-chevron-down", left: "glyphicon glyphicon-chevron-left", right: "glyphicon glyphicon-chevron-right" }

This option injects bootstrap specific classes in the component.

Code examples:

Initialize the pqScrollbar with bootstrap option specified.

?
1
2
//turn on bootstrap support in pqScrollBar.
$( ".selector" ).pqScrollBar( { bootstrap: { on: true } } } );

Get or set the bootstrap option, after initialization:

?
1
2
3
4
5
//getter
var bootstrap = $( ".selector" ).pqScrollBar( "option", "bootstrap" );
 
//setter
$( ".selector" ).pqScrollBar( "option", "bootstrap", { on: true } );
bubbleType: Boolean
Default: false

By default the events generated by scrollbar doesn't bubble up the DOM since v3.2.0. It can be turned on by setting this option to true.

Code examples:

Initialize the pqScrollbar with bubble option specified.

?
1
2
//turn bubbling on
$( ".selector" ).pqScrollBar( { bubble: { on : true } } );

Get or set the bubble option, after initialization:

?
1
2
//getter
var bubble = $( ".selector" ).pqScrollBar( "option", "bubble" );
cur_posType: Integer
Default: 0

Current position of the slider.

Code examples:

Initialize the pqScrollbar with cur_pos option specified.

?
1
$( ".selector" ).pqScrollBar( {cur_pos:10} );

Get or set the cur_pos option, after initialization:

?
1
2
3
4
5
//getter
var cur_pos = $( ".selector" ).pqScrollBar( "option", "cur_pos" );           
 
//setter
$( ".selector" ).pqScrollBar( "option", "cur_pos", 300 );
directionType: String
Default: vertical

Direction/Alignment of the scrollbar. Possible values are 'horizontal' and 'vertical'.

Code examples:

Initialize the pqScrollbar with direction option specified.

?
1
$( ".selector" ).pqScrollBar( { direction : "horizontal" } );

Get or set the direction option, after initialization:

?
1
2
3
4
5
//getter
var direction = $( ".selector" ).pqScrollBar( "option", "direction" );           
 
//setter
$( ".selector" ).pqScrollBar( "option", "direction", "vertical" );
lengthType: Integer
Default: 200

Total length of the scrollbar in pixels.

Code examples:

Initialize the pqScrollbar with length option specified.

?
1
$( ".selector" ).pqScrollBar( {length:250} );

Get or set the length option, after initialization:

?
1
2
3
4
5
//getter
var length=$( ".selector" ).pqScrollBar( "option", "length" );           
 
//setter
$( ".selector" ).pqScrollBar( "option", "length", 300 );
num_elesType: Integer
Default: 3

Number of possible positions of the slider. It's used in virtual mode of grid.

Code examples:

Initialize the pqScrollbar with num_eles option specified.

?
1
$( ".selector" ).pqScrollBar( { num_eles : 10 } );

Get or set the num_eles option, after initialization:

?
1
2
3
4
5
//getter
var num_eles = $( ".selector" ).pqScrollBar( "option", "num_eles" );           
 
//setter
$( ".selector" ).pqScrollBar( "option", "num_eles", 50 );
paceType: String
Default: optimum

Determines deferred or live scrolling by controlling the timing of scroll event. Possible values are 'consistent', 'optimum' and 'fast'. Deferred scrolling takes place when pace is 'consistent' or 'optimum'. Live scrolling takes place when pace is 'fast'. scroll event is fired during mouseup in case of 'consistent'. scroll event is fired after mouse drag stop in case of 'optimum'. scroll event is fired as the mouse is dragged in case of 'fast'.

Code examples:

Initialize the pqScrollbar with pace option specified.

?
1
$( ".selector" ).pqScrollBar( { pace : 'fast' } );

Get or set the pace option, after initialization:

?
1
2
3
4
5
//getter
var pace = $( ".selector" ).pqScrollBar( "option", "pace" );           
 
//setter
$( ".selector" ).pqScrollBar( "option", "pace", "optimum" );
ratioType: Integer
Default: 0

Ratio (varies from 0 to 1) that signifies current position of slider with 0 as starting position and 1 as end position. It's used for smooth scrolling in non-virtual mode of grid.

Code examples:

Initialize the pqScrollbar with ratio option specified.

?
1
$( ".selector" ).pqScrollBar( { ratio : 0 } );

Get or set the ratio option, after initialization:

?
1
2
3
4
5
//getter
var ratio = $( ".selector" ).pqScrollBar( "option", "ratio" );
 
//setter
$( ".selector" ).pqScrollBar( "option", "ratio", 0.2 );
stepsType: Boolean
Default: true

Smooth scrolling when false ( fires drag event ) and non-continuous scrolling when true ( fires scroll event).

Code examples:

Initialize the pqScrollbar with steps option specified.

?
1
$( ".selector" ).pqScrollBar( { steps : true } );

Get or set the steps option, after initialization:

?
1
2
3
4
5
//getter
var steps = $( ".selector" ).pqScrollBar( "option", "steps" );
 
//setter
$( ".selector" ).pqScrollBar( "option", "steps", false );
timeoutType: Ineger
Default: 350

Timeout in millseconds starting from the time the mouse movement is paused until scroll event is fired. It's applicable to deferred scrolling when pace is 'optimum'.

Code examples:

Initialize the pqScrollbar with timeout option specified.

?
1
$( ".selector" ).pqScrollBar( { timeout : 500 } );

Get or set the timeout option, after initialization:

?
1
2
3
4
5
//getter
var timeout = $( ".selector" ).pqScrollBar( "option", "timeout" );           
 
//setter
$( ".selector" ).pqScrollBar( "option", "timeout", 200 );
triggerType: Boolean
Default: false

By default the events generated by scrollbar are not emitted to DOM nodes since v3.2.0. It can be turned on by setting this option to true.

Code examples:

Initialize the pqScrollbar with trigger option specified.

?
1
2
//turn trigger on
$( ".selector" ).pqScrollBar( { trigger: { on : true } } );

Get or set the trigger option, after initialization:

?
1
2
//getter
var trigger = $( ".selector" ).pqScrollBar( "option", "trigger" );
Methods
destroy()

Removes the pqScrollBar functionality completely. This will return the element back to its pre-init state.

    Code examples:

    Invoke the method:

    ?
    1
    $( ".selector" ).pqScrollBar( "destroy" );

    disable()

    Disables the pqScrollBar.

      Code examples:

      Invoke the method:

      ?
      1
      $( ".selector" ).pqScrollBar( "disable" );

      enable()

      Enables the pqScrollBar.

        Code examples:

        Invoke the method:

        ?
        1
        $( ".selector" ).pqScrollBar( "enable" );

        option()Returns: PlainObject

        Gets an object containing key/value pairs representing the current pqScrollBar options hash.

        • This method does not accept any arguments.

        Code examples:

        Invoke the method:

        ?
        1
        var options = $( ".selector" ).pqScrollBar( "option" );

        option( optionName )Returns: Object

        Gets the value currently associated with the specified optionName.

        • optionName
          Type: String
          The name of the option to get.

        Code examples:

        Invoke the method:

        ?
        1
        var isDisabled = $( ".selector" ).pqScrollBar( "disabled" );

        option( optionName, value )

        Sets the value of the pqScrollBar option associated with the specified optionName.

        • This method does not accept any arguments.

        Code examples:

        Invoke the method:

        ?
        1
        $( ".selector" ).pqScrollBar( "option", "disabled", true );

        option( options )

        Sets one or more options for the pqScrollBar.

        • optionName
          Type: Object
          A map of option-value pairs to set.

        Code examples:

        Invoke the method:

        ?
        1
        $( ".selector" ).pqScrollBar( "option", {disabled: true} );

        refresh()

        Refresh the view of pqScrollBar.

        • This method does not accept any arguments.

        Code examples:

        Invoke the method:

        ?
        1
        $( ".selector" ).pqScrollBar( "refresh" );

        scroll()

        Updates the position of slider in scrollbar based on the options cur_pos or ratio. Fires scroll or drag event during the process.

        • This method does not accept any arguments.

        Code examples:

        Invoke the method:

        ?
        1
        $( ".selector" ).pqScrollBar( "scroll" );

        widget()Returns: jQuery

        Returns a jQuery object containing the pqScrollBar.

        • This method does not accept any arguments.

        Code examples:

        Invoke the method:

        ?
        1
        var widget = $( ".selector" ).pqScrollBar( "widget" );

        Events
        create( event, ui )Type: pqScrollBar:create

        Triggered when pqScrollBar is created.

        Code examples:

        Initialize the pqScrollbar with the create callback specified:

        ?
        1
        2
        3
        $( ".selector" ).pqScrollBar({
            create: function( event, ui ) {}
        });

        Bind an event listener to the pqScrollBar:create event:

        ?
        1
        $( ".selector" ).on( "pqScrollBar:create", function( event, ui ) {} );
        drag( event, ui )Type: pqScrollBar:drag

        Triggered when slider is dragged or stopped depending upon the pace option. This event is triggered when steps = false.

        • event
          Type: Event
        • ui
          Type: Object
          • ratio
            Type: Integer
            Value between 0 and 1 that signifies current position of slider.

        Code examples:

        Initialize the pqScrollbar with the drag callback specified:

        ?
        1
        2
        3
        $( ".selector" ).pqScrollBar({
            drag: function( event, ui ) {}
        });

        Bind an event listener to the pqScrollBar:drag event:

        ?
        1
        $( ".selector" ).on( "pqScrollBar:drag", function( event, ui ) {} );
        refresh( event, ui )Type: pqScrollBar:refresh

        Triggered when pqScrollBar is refreshed.

        Code examples:

        Initialize the pqScrollbar with the refresh callback specified:

        ?
        1
        2
        3
        $( ".selector" ).pqScrollBar({
            refresh: function( event, ui ) {}
        });

        Bind an event listener to the pqScrollBar:refresh event:

        ?
        1
        $( ".selector" ).on( "pqScrollBar:refresh", function( event, ui ) {} );
        scroll( event, ui )Type: pqScrollBar:scroll

        Triggered when slider is dragged or stopped depending upon the pace option. This event is triggered when steps = true.

        • event
          Type: Event
        • ui
          Type: Object
          • cur_pos
            Type: Integer
            Current position of the slider.
          • num_eles
            Type: Integer
            Total number of available positions.

        Code examples:

        Initialize the pqScrollbar with the scroll callback specified:

        ?
        1
        2
        3
        $( ".selector" ).pqScrollBar({
            scroll: function( event, ui ) {}
        });

        Bind an event listener to the pqScrollBar:scroll event:

        ?
        1
        $( ".selector" ).on( "pqScrollBar:scroll", function( event, ui ) {} );