Contents

Menustrip

Basic usage

Javascript
$(function () {
    $("#menustrip").mobiscroll().menustrip({ theme: 'ios' });
});
HTML
<ul id="menustrip">
    <li data-icon="connection">Wifi</li>
    <li data-icon="location">Location</li>
    <li data-selected="true" data-icon="volume-medium">Sound</li>
    <li data-selected="true" data-icon="fa-rotate-left">Rotation</li>
    <li data-disabled="true" data-icon="ion-bluetooth">Bluetooth</li>
    <li data-icon="cogs">Settings</li>
    <li data-icon="user4">Reading</li>
    <li data-icon="download">Data</li>
    <li data-icon="foundation-minus-circle">Blocking</li>
    <li data-icon="fa-leaf">Power</li>
    <li data-icon="ion-android-system-windows">Windows</li>
</ul>

Options

Name Type Default value Description
context String or HTMLElement 'body' Context in which mobiscroll is appended and positioned (if not inline). Can be a selector string or a DOM element.
display String 'inline' Controls the position of the menustrip. Possible values:
  • 'inline' - Stay in the normal document flow.
  • 'top' - Fixed to top.
  • 'bottom' - Fixed to bottom.
itemWidth Number undefined If layout is 'fixed', it represents the exact witdh of the items in pixels, otherwise the minimum width of the items, and the items will be stretched to fill the container width.
layout String
Number
'liquid' Possible values:
  • '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.
paging Boolean false Scroll one page at a time. The page size will be the width of the container.
rtl Boolean false Right to left display.
select String 'multiple' Defines the selection of the items. Possible values:
  • 'single' - Only one item can be selected at once.
  • 'multiple' - Multiple items can be selected.
  • 'off' - Selection is off.
snap Boolean false When the menustrip is scrolled it snaps to the edge of the last visible item which is at the opposite direction of the scroll.
tapHighlight Boolean true Highlight items on tap.
theme String undefined 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 revert to the Mobiscroll theme.

Supplied themes:
  • 'android-holo' - Android 4.x theme
  • 'android-holo-light' - Android 4.x theme (light version)
  • 'bootstrap' - Bootstrap themes
  • 'ios' - new iOS 7, 8, 9 theme
  • 'material' - Material theme (Android 5.x)
  • 'material-dark' - Material dark theme (Android 5.x)
  • 'jqm' - Integrates with jQuery Mobile look & feel
  • 'mobiscroll' - Mobiscroll theme
  • 'mobiscroll-dark' - Mobiscroll Dark theme
  • 'wp' - Windows Phone Metro UI theme
  • 'wp-light' - Windows Phone Metro UI theme (light version)
It's possible to create custom themes in css by prefixing any css class used in the menustrip markup with the theme name and the 'mbsc' prefix, e.g.: .mbsc-my-theme .dwwr { /* My CSS */ }, and set the theme option to 'my-theme'
Make sure that the theme you set is included in the downloaded package.
threshold Number 10 Minimum horizontal movement in pixels before the scrolling starts.
type String 'options' Define the appearance and functionality of the menustrip. Possible values:
  • 'options' - Variant A styling, multiple items are selectable.
  • 'tabs' - Variant B styling, only one item can be selected at once.
  • 'menu' - Variant B styling, items are not selectable
variant String 'a' Define the appearance of the menustrip. Possible values:
  • 'a' - Variant A styling (option appearance).
  • 'b' - Variant B styling (tab appearance).

Setting options runtime (changing options dynamically)

There are two ways to modify options after initalization

  1. Using the option method.

    The option method always triggers reinitialization. Most of the settings can be updated only this way, updating without initialization has no effect, because the markup is already generated. If the scroller was visible, the reinitialization hides it and it's not shown again automatically (except in inline display mode).

    Javascript
    // Modify options
    $('#mobiscroll').mobiscroll('option', {
        theme: 'ios',
        lang: 'de'
    });
    HTML
    <input id="mobiscroll"/>
  2. Modify directly the settings object.

    Useful when changing dynamic settings, which do not need redraw (e.g. readonly, calendar marked days).

    // Get instance and modify a setting
    var inst = $('#mobiscroll').mobiscroll('getInst');
    inst.settings.readonly = true;
    
    // Modify settings in an event
    $('#mobiscroll').mobiscroll({
        onBeforeShow: function (event, inst) {
            inst.settings.readonly = true;
        }
    });

Events

Name Description
onAnimationEnd(event, inst) Gets fired when an autonomous scrolling/sliding ends.

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 menustrip.

Example

$('#mobiscroll').mobiscroll().menustrip({
    onAnimationEnd: function (event, inst) {
    }
});
onAnimationStart(event, inst) Gets fired when an autonomous scrolling/sliding is starts.

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 menustrip.

Example

$('#mobiscroll').mobiscroll().menustrip({
    onAnimationStart: function (event, inst) {
    }
});
onGestureEnd(event, inst) Gets fired when the user ends the scrolling gesture.

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 menustrip.

Example

$('#mobiscroll').mobiscroll().menustrip({
    onGestureEnd: function (event, inst) {
    }
});
onGestureStart(event, inst) Gets fired when the user ends the scrolling(swiping) gesture.

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 menustrip.

Example

$('#mobiscroll').mobiscroll().menustrip({
    onGestureStart: function (event, inst) {
    }
});
onInit(event, inst) Triggered when the component is initialized.

Parameters

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

Example

$('#mobiscroll').mobiscroll().menustrip({
    onInit: function (event, inst) {
    }
});
onItemTap(event, inst) Triggered when an item is tapped.

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 menustrip.

Example

$('#mobiscroll').mobiscroll().menustrip({
    onItemTap: function (event, inst) {
    }
});
onMarkupReady(event, inst) Triggered when the html markup of the component is generated, but it is not yet shown. It is useful, if you want to make modifications to the markup (e.g. add custom elements), before the positioning runs.

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 menustrip.

Example

$('#mobiscroll').mobiscroll().menustrip({
    onMarkupReady: function (event, inst) {
    }
});
onMove(event, inst) Gets fired when an autonomous scrolling/sliding ends.

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 menustrip.

Example

$('#mobiscroll').mobiscroll().menustrip({
    onMove: function (event, inst) {
    }
});

Methods

Name Description
deselect(item) Deselects the specified item.

Parameters

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

Example

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('deselect', 1);

// With instance
mobiscrollInstance.deselect(1);
disable(item) Disables the specified item.

Parameters

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

Example

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('disable', 1);

// With instance
mobiscrollInstance.disable(1);
enable(item) Enables the specified item

Parameters

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

Example

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('enable', 1);

// With instance
mobiscrollInstance.enable(1);
getInst() Returns the object instance.

Returns: Object

  • The object instance.

Example

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('getInst');

// With instance
mobiscrollInstance.getInst();
navigate(item [, toggle ]) Scrolls the menustrip to the specified item.

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. If undefined, defaults to true in single select mode and to false in multiselect mode.

Example

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('navigate', 1);

// With instance
mobiscrollInstance.navigate(1);
next([toggle]) Scrolls the menustrip to the next item.

Parameters

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

Example

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('next');

// With instance
mobiscrollInstance.next();
option(options) Sets one or more options for the component.

Parameters

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

Example

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('option', {
    display: 'bottom',
    lang: 'de'
});

// With instancee
mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});
prev([toggle]) Scrolls the menustrip to the previous item.

Parameters

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

Example

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('prev');

// With instance
mobiscrollInstance.prev();
refresh() Recalculate dimensions needed for scrolling.

Example

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('refresh');

// With instance
mobiscrollInstance.refresh();
select(item) Selects the specified item.

Parameters

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

Example

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('select', 2);

// With instance
mobiscrollInstance.select(2);
tap(el, handler) Attaches the handler function to the tap event of element el.

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

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('tap', $('#element'), function () { alert("It's a tap!"); });

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

Data attributes

Name Description
data-disabled If true the menustrip item will be disabled.
data-icon With this attribute item icons can be defined. It needs a font-icon name.

You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • 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
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
data-selected If true the menustrip item will be selected.
Preorder available for Ember JS
What you'll get:
- Exclusive Early Beta Access
- Show your interest in the product. Based on the preorders we'll set the development and shipping priorities
- Get access to the full Framework until we ship
- Support and Maintenance is on us until we release the Mobiscroll for Ember
- We believe in delivering great products so if for any reason you are not satisfied, you'll get a full refund