Contents
General Date & Time pickers Event Calendar Form components Responsive list Numeric pickers Pickers & dropdowns Layout & navigation Tools Accessibility
Version 3.2.6 for Javascript
5.35.5
final
4.10.10
final
3.2.6
final
2.17.3
final
Javascript jQuery Angular AngularJS React Knockout ASP.Net MVC
General Date & Time pickers Event Calendar Form components Responsive list Numeric pickers Pickers & dropdowns Layout & navigation
Menustrip Page
Usage Options Events Methods Localization Typography
Widget
Tools Accessibility

Widget

Starting from version 4.3 widget component was renamed to popup. widget also works, but it is considered deprecated.

Basic usage

Javascript
var instance = mobiscroll.widget('#widget', {
    display: 'modal',
    onBeforeShow: function (ev, inst) {
        var s = inst.settings;
    }
});

document
    .getElementById('show')
    .addEventListener('click', function () {
        instance.show();
    }, false);
HTML
<div id="widget" style="display: none;">
    <div class="md-dialog">
        <h3 class="md-text-center">Hi</h3>
        <p class="md-text-center">Are you feeling good today?</p>
    </div>
</div>

<button id="show">How are you feeling?</button>

Options

Name Type Default value Description
anchor String, HTMLElement undefined Specifies the anchor element for positioning, if display is set to 'bubble' . If undefined, it defaults to the element on which the component was initialized.
animate String or Boolean undefined Animation to use for show/hide (if display is not inline). Possible values:
  • 'fade'
  • 'flip'
  • 'pop'
  • 'swing'
  • 'slidevertical'
  • 'slidehorizontal'
  • 'slidedown'
  • 'slideup'
If false, turns the animation off.
buttons Array ['ok'] Buttons to display. Each item in the array will be a button. A button can be specified as a string, or as a button object.

If a string, it must be one of the predefined buttons:
  • 'ok' - Approve action (if applicable). It's the same as the 'set' button, but will display the caption specified by the okText setting. Just like the 'set' button, it will trigger the onSet event, when pressed.
  • 'cancel' - Dismisses the popup.
To modify the text of the predefined buttons, you can use the okText , cancelText options.

If an object, it may have the following properties:
  • text String - Text of the button.
  • handler String, Function - The function which will run when the button is pressed. If a string, it must be one of the predefined button handlers:
    • 'set' - Approve action (if applicable).
    • 'cancel' - Dismisses the popup.
  • icon String (Optional) - Icon of the button.
  • cssClass String (Optional) - Css class of the button.
Predefined and custom buttons example
buttons: [
    'set',
    {
        text: 'Custom',
        icon: 'checkmark',
        cssClass: 'my-btn', 
        handler: function (event) {
            alert('Custom button clicked!');
        }
    },
    'cancel'
]
Predefined button handler example
buttons: [
    'set',
    {
        text: 'Hide',
        handler: 'cancel',
        icon: 'close',
        cssClass: 'my-btn'
    }
]
closeOnOverlayTap Boolean true If true, the popup is closed on overlay tap/click.
context String, HTMLElement 'body' The DOM element in which the component is appended and positioned (if not inline). Can be a selector string or a DOM element.
cssClass String undefined Applies custom css class to the top level element.
disabled Boolean false Initial disabled state of the component. This will take no effect in inline display mode.
display String 'center' Controls the positioning of the component. Possible options:
  • 'center' - The component appears as a popup at the center of the viewport.
  • 'inline' - If called on div element, the component is placed inside the div (overwriting existing content), otherwise is placed after the original element.
  • 'bubble' - The component appears as a bubble positioned to the element defined by the anchor option. By default the anchor is the original element.
  • 'top' - The component appears docked to the top of the viewport.
  • 'bottom' - The component appears docked to the bottom of the viewport.
focusOnClose Boolean, String, HTMLElement true Element to focus after the popup is closed. If undefined, the original element will be focused. If false, no focusing will occur.
focusTrap Boolean true If not in inline mode, focus won't be allowed to leave the popup.
headerText String undefined Text to display in the header.
layout String undefined Sets the layout of the component. Possible values:
  • 'liquid' - Wheels will expand to the maximum available width, but will not exceed the width set by the maxWidth setting. If maxWidth is not specified, the total width of all wheels will not exceed 600px. In 'top' or 'bottom' display mode this is the default behavior.
  • 'fixed' or undefined - Wheels will expand to the size of the longest wheel value, but will not exceed the width set by the maxWidth setting.
scrollLock Boolean true Disables page scrolling on touchmove (if not in inline mode, and popup height is less than window height).
showOnFocus Boolean false - on desktop true - on mobile Pops up the component on element focus.
showOnTap Boolean true Pops up the component on element 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 default 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' - iOS theme
  • 'ios-dark' - iOS dark theme (deprecated)
  • 'material' - Material theme
  • 'material-dark' - Material dark theme (deprecated)
  • 'jqm' - Integrates with jQuery Mobile look & feel
  • 'mobiscroll' - Mobiscroll theme
  • 'mobiscroll-dark' - Mobiscroll dark theme (deprecated)
  • '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 widget 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.

Setting 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
mobiscrollInstance.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). 

    // Modify a setting
mobiscrollInstance.settings.readonly = true;

// Modify settings in an event
mobiscroll.widget('#mobiscroll', {
    onBeforeShow: function (event, inst) {
        inst.settings.readonly = true;
    }
});

Events

Name Description
onBeforeClose(event, inst) Triggered before the component closes. Close can be prevented by returning false from the handler function.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text.
    • button: String - The name of the button which triggered the component to close ('set', or 'cancel').
  • inst: Object - The instance object of the widget.

Example

mobiscroll.widget('#mobiscroll', {
    onBeforeClose: function (event, inst) {
    }
});
onBeforeShow(event, inst) Triggered before the component is shown. It is useful if you want to modify the settings object before generating the markup. It can be used also to prevent the showing the control by returning false.

Parameters

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

Example

mobiscroll.widget('#mobiscroll', {
    onBeforeShow: function (event, inst) {
    }
});
onCancel(event, inst) Allows you to define your own event when cancel is pressed.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text.
  • inst: Object - The instance object of the widget.

Example

mobiscroll.widget('#mobiscroll', {
    onCancel: function (event, inst) {
    }
});
onClose(event, inst) Triggered when the component is closed.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text.
  • inst: Object - The instance object of the widget.

Example

mobiscroll.widget('#mobiscroll', {
    onClose: function (event, inst) {
    }
});
onDestroy(event, inst) Triggered when the component is destroyed.

Parameters

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

Example

mobiscroll.widget('#mobiscroll', {
    onDestroy: 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 widget.

Example

mobiscroll.widget('#mobiscroll', {
    onInit: 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 widget.

Example

mobiscroll.widget('#mobiscroll', {
    onMarkupReady: function (event, inst) {
    }
});
onPosition(event, inst) Triggered when the component is positioned (on initial show and resize / orientation change).
Useful if dimensions needs to be modified before the positioning happens, e.g. set a custom width or height. Custom positioning can also be implemented here, in this case, returning false from the handler function will prevent the built in positioning.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element containing the generated html.
    • windowWidth: Number - The window width.
    • windowHeight: Number - The window height.
  • inst: Object - The instance object of the widget.

Example

mobiscroll.widget('#mobiscroll', {
    onPosition: function (event, inst) {
    }
});
onSet(event, inst) Triggered when the widget is closed using the "ok" button.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text (if any).
  • inst: Object - The instance object of the widget.

Example

mobiscroll.widget('#mobiscroll', {
    onSet: function (event, inst) {
    }
});
onShow(event, inst) Triggered when the component is shown.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element containing the generated html.
    • valueText: String - The selected value as text.
  • inst: Object - The instance object of the widget.

Example

mobiscroll.widget('#mobiscroll', {
    onShow: function (event, inst) {
    }
});

Methods

Name Description
disable() Disables the widget.

Example

Methods can be called on an instance. For more details see calling methods 
mobiscrollInstance.disable();
enable() Enables the widget.

Example

Methods can be called on an instance. For more details see calling methods 
mobiscrollInstance.enable();
getInst() Returns the object instance.

Returns: Object

  • The object instance.

Example

Methods can be called on an instance. For more details see calling methods 
mobiscrollInstance.getInst();
hide([ prevAnim ] [, btn ]) Hides the component.

Parameters

  • prevAnim (Optional): Boolean - If true, hide will not be animated.
  • btn (Optional): String - Specifies which button caused the component to hide, and it's passed to the onBeforeClose event.

Example

Methods can be called on an instance. For more details see calling methods 
    mobiscrollInstance.hide();
isVisible() Returns a boolean indicating whether the component is visible or not.

Returns: Boolean

  • True if the component is visible, false if it's not.

Example

Methods can be called on an instance. For more details see calling methods 
mobiscrollInstance.isVisible();
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 
mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});
position([check]) Recalculates the position of the component (if not inline).

Parameters

  • check (Optional): Boolean - If true, the function checks if viewport size changed after last position call, if false or ommitted, position is recalculated anyway.

Example

Methods can be called on an instance. For more details see calling methods 
mobiscrollInstance.position();
show([ prevAnim ] [, prevFocus ]) Shows the component.

Parameters

  • prevAnim (Optional): Boolean - If true, show will not be animated.
  • prevFocus (Optional): Boolean - If true, the popup will not be focused right after show.

Example

Methods can be called on an instance. For more details see calling methods 
mobiscrollInstance.show();
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 
mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

Localization

Name Type Default value Description
cancelText String 'Cancel' Text for Cancel button.
lang String 'en-US' Language of the component. Based on the language string the component loads the language based default settings from the language modules.
Supported languages:
  • 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'
  • Swedish: 'sv'
  • Turkish: 'tr'
  • Vietnamese: 'vi'
okText String 'Ok' Text for Ok button.
rtl Boolean false Right to left display.
Products
UI for Javascript
UI for jQuery
UI for Angular
UI for React
UI for Vue
Calendar API
UI Pricing
Connect Pricing
Features
Event calendar
Scheduler
Timeline
Agenda
Date & time
Calendar API
FullCalendar alternative
Resources
blog
community forum
ui patterns
support & learning
knowledge base
docs
releases
Mobiscroll 4 demos
status
faq
report a bug
Company
about us
contact
customers
reviews
twitter
facebook
Legal
terms & conditions
privacy
cookie policy
eula
© 2026 Acid Media LLC - VAT No. RO19333154     All trademarks © their respective owners. Site uses cookies, you agree to this by browsing it.