Contents

Listview

Basic usage

HTML
<ul id="list">
    <li>Apples</li>
    <li>Cakes</li>
    <li>Bottles of Juice</li>
</ul>
Javascript
mobiscroll.listview('#list', { 
    stages: [
        { percent: -20, color: 'red', icon: 'remove', text: 'Remove', action: function (event, inst) {
            // Remove the swiped list item
            inst.remove(event.target);
            return false;
        } },
        { percent: 20, color: 'green', icon: 'plus', text: 'Add', action: function (event, inst) {
            // Add a new list item without id
            inst.add(null, 'New Item', event.index);
        } }
    ]
});

Using the listview

This way when you click the add button a new item will be added to the array, and the listview will update.

HTML
<ul id="listview">
    <li data-id ="1">order #1: 5 Apples </<li>
    <li data-id ="4">order #2: 2 Cakes </<li>
    <li data-id ="5">order #3: 3 Bottles of Juice </<li>
</<ul>

<div>
<label >Item Name:</<label>
    <input type="text" id="itemname"/>
    <br />
    <label>Item Count</<label>
    <input type="text" id="itemcount"/>
    <button id="add">add</<button>
</<div>
Javascript
var newId = 6,
    order = 4,
    listviewInstance = mobiscroll.listview('#listview');

document.getElementById('itemname').value = "Chocolates";
document.getElementById('itemcount').value = "1";

document
    .getElementById('add')
    .addEventListener('click', function () {
        var name = document.getElementById('itemname').getValue(),
            count = document.getElementById('itemcount').getValue();
        listviewInstance.add(newId, 'order #' + order + ': ' + count + ' ' + name);
        ++newId;
        ++order;
    }, false);

Hierarchical lists

If the list contains multiple levels, it will be automatically transformed into a hierarchical listview, where only one level is visible at once and animated navigation is possible between levels.

<ul id="list">
    <li>North America
        <ul>
            <li> USA
                <ul>
                    <li>Washington</li>
                    <li>Florida</li>
                    <li>Los Angeles</li>
                    <li>San Francisco</li>
                </ul>
            </li>
            <li> Canada
                <ul>
                    <li>Vancouver</li>
                    <li>Winnipeg</li>
                    <li>Calgary</li>;
                </ul>
            </li>
       </ul> 
    </li>
    <li>South America
        <ul>
            <li> Argentina
                <ul>
                    <li>Buenos Aires</li>
    ...
</ul>

Actions

Javascript
mobiscroll.listview('#list', { 
    stages: [ 
        { percent: -20, color: 'red', icon: 'remove', action: function (event, inst) {
            inst.remove(event.target);
            return false;
        }
    ]  
});

Options

Name Type Default value Description
actions Array, Object undefined An array or an object which defines an icon list whit different actions. If an array, the same icon list will be displayed on both left and right swipe. An action object has the following properties:
  • icon - Icon of the action.
  • color (Optional) - Color of the action.
  • text (Optional) - Text of the action.
  • disabled - Indicates if the action of the stage is disabled or not. If true, the action will not be executed and the item is reverted to the original position. Function is also accepted, receives the Mobiscroll Listview object and the event object as parameters.
  • action - A function which is executed if the swipe is finished and the stage was active. Receives the Mobiscroll Listview object and the event object as parameters.
  • undo - Indicates if the action can be undone. If true or a function, an undo icon will appear after the action is executed. All the UI operations on the listview will be restored (e.g. remove, add, move, sort). If other, user defined operations needs to be undone, (e.g. server side operations), they should be specified in the undo function.


A sample action array:
[   
    {    
        icon: 'thumbs-up',  
        action: function (event, inst) {}  
    },
    {
        icon: 'thumbs-up2',  
        action: function (event, inst) {} 
    }
]

If an object, a different icon list can be defined to both sides, swipe will be allowed just for the defined side.

A sample action object:
{   
    left: [
        { 
            icon: 'smiley2',  
            action: function (event, inst) {} 
        },
        { 
            icon: 'remove',  
            disabled: function (event, inst) {
                // Disable this action only for the item with 12 as id. 
                if (event.target.getAttribute('data-id') === '12') {
                    return true;
                }
            },
            action: function (event, inst) {} 
        }
    ],
    right: [
        { 
            icon: 'heart',  
            action: function (event, inst) {} 
        },
        { 
            icon: 'plus', 
            disabled: true,
            action: function (event, inst) {} 
        }
    ]
}
actionsWidth Number 90 Specifies the width in percentage of the actions container.
animateIcons Boolean true If false the icon won't be animated when a list item is swiped.
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 listview. Possible values:
  • 'inline' - Stay in the normal document flow.
enhance Boolean undefined If true markup inside list items is automatically enhanced.

It enhances the first <img> tag and text between <p> or <h> tags.

If the image is the first child of the list item, it will be aligned to the left, otherwise to the right of the list item.

If the list item has a data-icon attribute, a font icon will be displayed. The icon alignment can be defined with data-icon-align attribute, it defaults to "left", if not specified.

Sample markup:
<ul id="listview">
    <li> 
        <img src="image1.png" />
        <p>text1</p>
    </li>
    <li>
        <img src="image2.png" />
        <p>text2</p>
    </li>
    <li >
        <img src="image3.png" />
        <p>text3</p>
    </li>
    <li  data-icon="eye">
        <p>text4</p>
   </li>
</ul>         
fillAnimation Boolean true If true the sortable item will be highlighted with a fill animation.
fixedHeader Boolean false If true, the group headers will be positioned as fixed (will stay on top, if it's scrolled out of view, until the next group header is reached).
hover String, Object undefined On a list item mouse pointer hover shows the underlying action menu. The direction of the reveal can be specified by passing 'left' or 'right' parameter, or with the hover objects direction property. The hover object can have a time and a timeout property to define the reveal animation time and the hover start timeout in milliseconds.

Sample hover object:
{    
    time: 300,        // reveal animation time, by default is 200ms
    timeout: 150,     // hover start timeout, by default is 200ms
    direction: "left" // direction of the reveal, by default is "right"
}
iconSlide Boolean false If true, the icon and text of an action is slided along the edge of the slided item.
itemGroups Object undefined It can be used to define different actions and settings for a group of items. The items can be grouped using the data-type attribute of the list element. If an item has no data-type attribute, the settings defined outside itemGroups will be used.

HTML
<ul id="mylist">
    <li data-type="type1">Item 1</li>
    <li data-type="type2">Item 2</li>
    <li data-type="type3">Item 3</li>
</ul>
Javascript
$('#mylist').mobiscroll().listview({
    itemGroups: {
        type1: {
            stages: [ /* Define stages here */ ],
            tap: function () { alert('Tap on type 1'); }
        },
        type2: {
            actions: [ /* Define actions here */ ]
            tap: function () { alert('Tap on type 2'); }
        }
        type3: {
            swipe: false
        }
    }
});
navigateOnDrop Boolean false If the list is sortable and multiLevel flag is set, if an element is dropped on a parent element, or back button, the element will be appended to the sublist / parent list. The navigateOnDrop is true, after the element is dropped, the list will be navigated to the sub list or parent list.
quickSwipe Boolean true If true, a quick swipe (duration is less than 300ms and movement is more than 50px) executes the action of the first stage in the swipe direction, even if the stage's percent is not reached.
sortable Boolean
Object
undefined If true, or an object the list will be sortable. By passing an object, you can set additional sort options:
  • handle - If true or 'right' a sort handle will appear in the right side if 'left' on the left side of the list items, which only allows sort if touch started on the handle (false if not specified).
  • group - If true, sort is allowed between groups (true if not specified).
  • multiLevel - If true, sort is allowed between levels of the hierarchy (true if not specified).
sortDelay Number 200 Delay after tap in milliseconds until sort mode is activated on the item.
stages Array , Object [] An array of objects which defines the different stages when swiping a list item. Or it can be an object with 'left' and 'right' property with which different stages can be defined for both sides.

A stage object has the following properties:
  • percent (Optional) - The percentage of swipe when the stage activates. Use positive values for right swipe, negative values for left swipe. Percentage is autogenerated if is not specified.
  • color (Optional) - Background color behind the swiped list item when the stage is active.
  • icon (Optional) - Icon to show when the stage is active.
  • text (Optional) - Text to show when the stage is active. Function is also accepted, receives the jQuery object of the swiped list item, the item's index in the list as parameters, and the Mobiscroll Listview object.
  • confirm (Optional) - Indicates if the action of the stage should be confirmed or not. If yes, the item is not reverted after slide ends, and a tap on the stage (icon, text, or background) confirms the action, tapping everywhere else cancels the action. Function is also accepted, receives the jQuery object of the swiped list item, the item's index in the list as parameters, and the Mobiscroll Listview object.
  • disabled (Optional) - Indicates if the action of the stage is disabled or not. If true, the action will not be executed and the item is reverted to the original position. Function is also accepted, receives the Mobiscroll Listview object and the event object as parameters.
  • key (Optional) - specify a unique identifier. It uses the openStage function for opening stages programatically.
  • action (Optional) - A function which is executed if the swipe is finished and the stage was active. Receives the Mobiscroll Listview object and the event object as parameters.
  • undo (Optional) - Indicates if the action can be undone. If true or a function, an undo icon will appear after the action is executed. All the UI operations on the listview will be restored (e.g. remove, add, move, sort). If other, user defined operations needs to be undone, (e.g. server side operations), they should be specified in the undo function.
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>
A sample stage array:
[   
    {    
        percent: -20,
        color: "red",
        icon: "minus",
        disabled: true,
        action: function (event, inst) { }
    }
    { 
        percent: 20,
        color: "green",
        icon: "plus",
        disabled: function (event, inst) {
            // Disable this action only for the item with 12 as id. 
            if (event.target.getAttribute('data-id') === '12') {
                return true;
            }
        },
        action: function (event, inst) { }
    }
]
A sample stage object:
{
    left: [
        {   
            key: "stage1", 
            icon: "phone", 
            color: "crimson", 
            text: "call", 
            action: function (event, inst) { } 
        },
    ],
    right: [
        { 
            key: "stage3", 
            icon: "bubble", 
            color: "olive", 
            text: "Message", 
            action: function (event, inst) { } 
        }
    ]
}
striped Boolean false If true, the list items will have alternate (striped) styling.
swipe Boolean, String, or Function true If false, swipe is not allowed.
If 'left' or 'right', swipe is allowed only in the given direction.
If a function, the returned value will be used, which can be any of the above. Receives an argument object and the Listview instance as parameters. The arguments object has the following properties:
  • target:HTMLElement - The list item the swipe was initiated on.
  • index:Number - Index of the item in the list.
  • direction:String - Direction of the swipe gesture, 'left' or 'right'.
swipeleft Function undefined Action to execute when a list item is swiped left. Receives the jQuery object of the swiped list item and the Mobiscroll Listview object as parameters.
swiperight Function undefined Action to execute when a list item is swiped right. Receives the jQuery object of the swiped list item and the Mobiscroll Listview object as parameters.
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)
  • '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 listview 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.
vibrate Boolean true Turn vibration on/off on sort start and sort end.

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
    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. vibrate, calendar marked days).

    // Modify a setting
    mobiscrollInstance.settings.readonly = true;
    
    // Modify settings in an event
    mobiscroll.listview('#mobiscroll', {
        onItemTap: function (event, inst) {
            inst.settings.readonly = true;
        }
    });

Events

Name Description
onInit(event, inst) Triggered when the component is initialized.

Parameters

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

Example

mobiscroll.listview('#mobiscroll', {
    onInit: function (event, inst) {
    }
});
onItemAdd(event, inst) This event is triggered when an item is added.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element of the added list item.
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onItemAdd: function (event, inst) {
    }
});
onItemRemove(event, inst) This event is triggered when an item is removed.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element of the added list item.
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onItemRemove: function (event, inst) {
    }
});
onItemTap(event, inst) Triggered when an item is tapped. In case of parent items or back items hierarchical navigation can be prevented by returning false from this event.

Parameters

  • event: Object - The event object has the following properties:
    • target: HTMLElement - DOM element of the tapped list item.
    • domEvent: Event - The DOM event fired on tap.
    • index: Number - The index of the item in the list.
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onItemTap: function (event, inst) {
    }
});
onNavEnd(event, inst) This event is triggered when hierarchical navigation ends.

Parameters

  • event: Object - The event object has the following properties:
    • level: Number - Level of the hierarchical list.
    • direction: String - The direction of the navigation. It can be 'left' or 'right'.
    • list: Object - The DOM element of the list.
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onNavEnd: function (event, inst) {
    }
});
onNavStart(event, inst) This event is triggered when hierarchical navigation starts.

Parameters

  • event: Object - The event object has the following properties:
    • level: Number - Number of levels.
    • direction: String - The direction of the navigation. It can be 'left' or 'right'.
    • list: Object - The DOM element of the list
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onNavStart: function (event, inst) {
    }
});
onSlideEnd(event, inst) This event is triggered when a slide ended.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element of the list item.
    • index: Number - The index of the item in the list.
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onSlideEnd: function (event, inst) {
    }
});
onSlideStart(event, inst) This event is triggered when a slide started.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element of the list item.
    • index: Number - The index of the item in the list.
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onSlideStart: function (event, inst) {
    }
});
onSort(event, inst) Triggered during sorting, is being fired continuosly when the item is dragged.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element of the list item.
    • index: Number - The actual index of the item in the list during sort.
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onSort: function (event, inst) {
    }
});
onSortChange(event, inst) Triggered during sorting, but only when the DOM position has changed. It also has the visual feedback that the items in the background are moving to make place for the dragged item.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element of the list item.
    • index: Number - The actual index of the item in the list during sort.
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onSortChange: function (event, inst) {
    }
});
onSortEnd(event, inst) Triggered when sorting has stopped.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element of the list item.
    • index: Number - The final position of the item in the list when the item is dropped.
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onSortEnd: function (event, inst) {
    }
});
onSortStart(event, inst) Triggered when sorting starts.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element of the list item.
    • index: Number - The original ordinal position of the dragged element.
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onSortStart: function (event, inst) {
    }
});
onSortUpdate(event, inst) Triggered when the user stopped sorting and the DOM position has changed.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element of the list item.
    • index: Number - The position of the item in the list when the sorting stops.
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onSortUpdate: function (event, inst) {
    }
});
onStageChange(event, inst) This event is triggered during sliding when the stage changes.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element of the list item.
    • index: Number - The index of the item in the list.
    • stage: Object - The stage of the listview.
  • inst: Object - The instance object of the listview.

Example

mobiscroll.listview('#mobiscroll', {
    onStageChange: function (event, inst) {
    }
});

Methods

Name Parameters Description
add(id, markup [, index ] [, callback ] [, parent ]) Adds a new list item to the list with the given id and markup at the specified index.

Parameters

  • id: String or Number - The id can be an arbitrary string or number which uniquely identifies the list item.
  • markup: String - Markup of the list item.
  • index (Optional): Number - Index of the list item. If index is omitted, the new item is added to the end of the list.
  • callback (Optional): Function - The callback function is optional and it's called after the add animation is finished.
  • parent (Optional): Object or String - Optionally a parent element can also be specified, if the new element should be added to a sublist. The parent can be a jQuery object of the parent li element or a string pointing to the data-id attribute of the parent li element (if any). If no sublist exists for the specified parent, it will be created. If parent is omitted, the new item will be added to the root list.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.add(1, '<input type="checkbox" data-role="none" /> New Todo');
addUndoAction(func) Push an undo action into the undo stack. Accepts a function as parameter. If it's called multiple times between startActionTrack and endActionTrack calls, all actions will be added to one action group, and will be undone by one single undo call (like a transaction).

Parameters

  • func: Function - The function.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.addUndoAction(myFunction);
close(item [, time ]) Closes the given item, if it's actions or stages are opened.

Parameters

  • item: HTMLElement or String - The DOM element or the id of the list item (id must be present in the item's data-id attribute).
  • time (Optional): Number - Time of the animation in milliseconds.

Example

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

// With instance
mobiscrollInstance.close($('#item'));
destroy() Destroys the component. This will return the element back to its pre-init state.

Returns: Object

  • Returns the element back to its pre-init state.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.destroy();
endActionTrack() All actions between startActionTrack and endActionTrack calls will be handled as one action group, and will be undone by one single undo call (like a transaction).

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.endActionTrack();
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();
move(item, index [, direction ][, callback ]) Moves a list item to another position in the list.

Parameters

  • item: HTMLElement or String - The DOM element or the id of the list item to move.
  • index: Number - The index of the new position.
  • direction (Optional): String - The direction of the remove animation. It can be 'left' or 'right'.
  • callback (Optional): Function - Callback function.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.move($('#item'), 2);
navigate(item) Brings the specified item into view. If the listview is hierarchical and the item is not in the currently visible level, the listview will slide to the item's level. If the listview is not currently in the viewport, the viewport will be scrolled to the item.

Parameters

  • item: HTMLElement or String - The DOM element or the id of the list 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
mobiscrollInstance.navigate(1);
openActions(item, direction [, time ] [, demo ]) Opens the actions of a list item.

Parameters

  • item: HTMLElement or String - The DOM element or the id of the list item (id must be present in the item's data-id attribute).
  • direction: String - Animation direction, can be 'left' or 'right'.
  • time (Optional): Number - Time of the animation in milliseconds.
  • demo (Optional): Boolean - If true, after animation the list item is reverted to its original position.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.openActions($('#item'), 'left', 300, true);
openStage(item, stage [, time ] [, demo ]) Opens the specified stage of a list item.

Parameters

  • item: HTMLElement or String - The DOM element or the id of the list item (id must be present in the item's data-id attribute).
  • stage: String - Defines the stage which will be opened, with the stage object key property.
  • time (Optional): Number - Defines the time of the animation in milliseconds.
  • demo (Optional): Boolean - If true, after animation the list item is reverted to its original position, otherwise an additional tap is required to revert the item.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.openStage($('#item'), 'stage3', 300, true);
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'
});
remove(item [, direction ] [, callback ]) Removes a list item from the list.

Parameters

  • item: HTMLElement or String - The DOM element or the id of the list item.
  • direction (Optional): String - The direction of the remove animation. It can be 'left' or 'right'.
  • callback (Optional): Function - Callback function.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.remove(3);
startActionTrack() All actions between startActionTrack and endActionTrack calls will be handled as one action group, and will be undone by one single undo call (like a transaction).

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.startActionTrack();
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!"); });
undo() Last action will be undone.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.undo();

Data attributes

Name Description
data-icon Display an icon inside the list item. It needs a font-icon name. Only works if the enhance option is true.
data-icon-align Specify icon alignment. It can be "left" or "right", it defaults to "left" if not specified. Only works if the enhance option is true.
data-role If the list item contains a data-role="list-divider" attribute, than that item will be displayed as a list divider.
data-type The items can be grouped using the data-type attribute of the list element. More about groups: itemGroups.

Localization

Name Type Default value Description
backText String 'Back' Text for the back button, in case of hierarchical lists.
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:
  • 'en' or 'en-US' or undefined - English
  • 'en-UK' or 'en-GB' - English (UK)
  • 'cs' - Czech
  • 'zh' - Chinese
  • 'da' - Danish
  • 'de' - German
  • 'es' - Spanish
  • 'fa' - Farsi
  • 'fr' - French
  • 'it' - Italian
  • 'ja' - Japanese
  • 'hu' - Hungarian
  • 'nl' - Dutch
  • 'no' - Norwegian
  • 'pl' - Polish
  • 'pt-BR' - Brazilian Portuguese
  • 'pt-PT' - European Portuguese
  • 'ro' - Romanian
  • 'ru' - Russian
  • 'ru-UA' - Russian (UA)
  • 'sk' - Slovak
  • 'sv' - Swedish
  • 'tr' - Turkish
rtl Boolean false Right to left display.
undoText String 'Undo' Text for the undo action.
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