Navigation

• 'inline' - Stay in the normal document flow.
• 'top' - Fixed to top.
• 'bottom' - Fixed to bottom.

• 'liquid' - The number of displayed items will be calculated from the itemWidth option, if specified, items will be stretched to fill the container width.
• 'fixed' - Item width will be defined by the content inside, or the itemWidth option, if specified.
• integer - Number of items to display. If itemWidth is also specified, it will represent the maximum number of items to display.

• xsmall - min-width: 0px
• small - min-width: 576px
• medium - min-width: 768px
• large - min-width: 992px
• xlarge - min-width: 1200px

responsive: {
    small: {
        type: 'hamburger'
    },
    custom: { // Custom breakpoint
        breakpoint: 600,
        type: 'tab'
    }
}

Sets the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform.

If the theme for the specific platform is not present, it will default to the Mobiscroll theme.

• 'bootstrap' - Bootstrap themes
• 'ios' - iOS theme
• 'material' - Material theme
• 'mobiscroll' - Mobiscroll theme
• 'windows' - Windows theme

Controls which variant of the theme will be used (light or dark).

• 'light' - Use the light variant of the theme.
• 'dark' - Use the dark variant of the theme.
• 'auto' or undefined - Detect the preferred system theme on devices where this is supported.

If not set, only the theme setting will determine which theme to use.

To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one, suffixed with '-dark', e.g.: 'my-theme' and 'my-theme-dark'.

• 'tab' - Variant B styling. Displays as many items as possible and makes the navigation scrollable. The default display mode is 'top'.
• 'bottom' - Variant A styling. Displays as many items as possible and renders the show more menu if needed. The default display mode is 'bottom'.
• 'hamburger' - Variant A styling. Displays items in a hamburger menu. The default display mode is 'inline'.

Parameters

• event: Object - The event object has the following properties:
  • destinationX: horizontal destination position.
  • destinationY: vertical destination position.
  • direction: direction of the movement expressed in degree: 90 - up, 180 - left, 270 - down, 360 - right.
  • duration: animation duration in milliseconds.
  • originX: horizontal starting position.
  • originY: vertical starting position.
  • posX: the horizontal movement from the initial position.
  • posY: the vertical movement from the initial position.
  • transitionTiming : transition-timing function.
• inst: Object - The instance object of the navigation.

Example

export class MyExample {
    settings: any = {
        onAnimationEnd: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • destinationX: horizontal destination position.
  • destinationY: vertical destination position.
  • direction: direction of the movement expressed in degree: 90 - up, 180 - left, 270 - down, 360 - right.
  • duration: animation duration in milliseconds.
  • originX: horizontal starting position.
  • originY: vertical starting position.
  • posX: the horizontal movement from the initial position.
  • posY: the vertical movement from the initial position.
  • transitionTiming : transition-timing function.
• inst: Object - The instance object of the navigation.

Example

export class MyExample {
    settings: any = {
        onAnimationStart: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • direction: direction of the movement expressed in degree: 90 - up, 180 - left, 270 - down, 360 - right.
  • originX: horizontal starting position.
  • originY: vertical starting position.
  • posX: the horizontal movement from the initial position.
  • posY: the vertical movement from the initial position.
• inst: Object - The instance object of the navigation.

Example

export class MyExample {
    settings: any = {
        onGestureEnd: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • direction: direction of the movement expressed in degree: 90 - up, 180 - left, 270 - down, 360 - right.
  • originX: horizontal starting position.
  • originY: vertical starting position.
  • posX: the horizontal movement from the initial position.
  • posY: the vertical movement from the initial position.
• inst: Object - The instance object of the navigation.

Example

export class MyExample {
    settings: any = {
        onGestureStart: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the navigation.

Example

export class MyExample {
    settings: any = {
        onInit: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • target: HTMLElement - The DOM element of the tapped item.
• inst: Object - The instance object of the navigation.

Example

export class MyExample {
    settings: any = {
        onItemTap: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
• inst: Object - The instance object of the navigation.

Example

export class MyExample {
    settings: any = {
        onMarkupReady: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • target: the DOM element which was tapped to open the menu.
  • menu: the widget instance of the menu popup.
• inst: Object - The instance object of the navigation component.

Example

export class MyExample {
    settings: any = {
        onMenuHide: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • target: the DOM element which was tapped to open the menu.
  • menu: the widget instance of the menu popup.
• inst: Object - The instance object of the navigation component.

Example

export class MyExample {
    settings: any = {
        onMenuShow: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • destinationX: horizontal destination position.
  • destinationY: vertical destination position.
  • direction: direction of the movement expressed in degree: 90 - up, 180 - left, 270 - down, 360 - right.
  • duration: animation duration in milliseconds.
  • originX: horizontal starting position.
  • originY: vertical starting position.
  • posX: the horizontal movement from the initial position.
  • posY: the vertical movement from the initial position.
  • transitionTiming : transition-timing function.
• inst: Object - The instance object of the navigation.

Example

export class MyExample {
    settings: any = {
        onMove: (event, inst) => {
        }
    }
}

Parameters

• item: HTMLElement or String - The DOM element of the item, or the id of the item (id must be present in the item's data-id attribute).

Example

mobiscrollInstance.deselect(1);

Parameters

• item: HTMLElement or String - The DOM element of the item, or the id of the item (id must be present in the item's data-id attribute).

Example

mobiscrollInstance.disable(1);

Parameters

• item: HTMLElement or String - The DOM element of the item, or the id of the item (id must be present in the item's data-id attribute).

Example

mobiscrollInstance.enable(1);

Parameters

• item: Object or String - The jQuery object or the id of the list item (id must be present in the item's data-id attribute).

• toggle: Boolean - If true, it also toggles the selected state of the item and triggers the onItemTap event. If undefined, defaults to true in single select mode and to false in multiselect mode.

• animTime: Boolean - Specifies the animation time of the scroll animation, if the view needs to be scrolled. Defaults to 1000ms if not specified.

Example

mobiscrollInstance.navigate(1);

Parameters

• toggle (Optional): Boolean - If true, it also toggles the selected state of the item and triggers the onItemTap event. If undefined, defaults to true in single select mode and to false in multiselect mode.

Example

mobiscrollInstance.next();

Parameters

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

Example

mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});

Parameters

• toggle (Optional): Boolean - If true, it also toggles the selected state of the item and triggers the onItemTap event. If undefined, defaults to true in single select mode and to false in multiselect mode.

Example

mobiscrollInstance.prev();

Example

mobiscrollInstance.refresh();

Parameters

• item: HTMLElement or String - The DOM element of the item, or the id of the item (id must be present in the item's data-id attribute).

Example

mobiscrollInstance.select(2);

Parameters

• item: HTMLElement or String - The DOM element of the item, or the id of the item (id must be present in the item's data-id attribute).
• content: String - Content of the badge.

Example

mobiscrollInstance.setBadge('myitem', 'new');

Parameters

• el: Object - The element with tap event.
• handler: Function - If the action was initiated with touch event, handler is called on touchend, otherwise on click.

Example

mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

• Arabic: 'ar'
• Bulgarian: 'bg'
• Catalan: 'ca'
• Czech: 'cs'
• Chinese: 'zh'
• Croatian: 'hr'
• Danish: 'da'
• Dutch: 'nl'
• English: 'en' or 'en-US' or undefined
• English (UK): 'en-UK' or 'en-GB'
• Farsi: 'fa'
• German: 'de'
• Greek: 'el'
• Spanish: 'es'
• Finnish: 'fi'
• French: 'fr'
• Hebrew: 'he'
• Hindi: 'hi'
• Hungarian: 'hu'
• Italian: 'it'
• Japanese: 'ja'
• Korean: 'ko'
• Lithuanian: 'lt'
• Norwegian: 'no'
• Polish: 'pl'
• Portuguese (Brazilian): 'pt-BR'
• Portuguese (European): 'pt-PT'
• Romanian: 'ro'
• Russian: 'ru'
• Russian (UA): 'ru-UA'
• Slovak: 'sk'
• Serbian: 'sr'
• Thai: 'th'
• Swedish: 'sv'
• Turkish: 'tr'
• Ukrainian: 'ua'
• Vietnamese: 'vi'

See the full list of available icons here.

• home
• pencil
• office
• newspaper
• droplet
• image2
• camera
• play
• bullhorn
• connection
• library
• book
• file4
• copy2
• copy3
• stack
• folder
• tag
• cart
• support
• phone
• location
• credit
• map
• history
• clock
• alarm2
• stopwatch
• calendar
• mobile
• drawer
• undo2
• redo2
• forward
• reply
• bubble
• bubbles
• disk
• download
• upload
• user4
• key2
• lock2
• unlocked
• cogs
• aid
• bars
• cloud-download
• cloud-upload
• globe
• airplane
• earth
• link
• flag
• eye
• eye-blocked
• attachment
• star3
• heart
• thumbs-up
• thumbs-up2
• smiley2
• sad2
• checkmark
• close
• plus
• minus
• remove
• loop2

<div class="mbsc-ic mbsc-ic-star"></div>