General Calendar Cards Color Date & Time Event Calendar Forms Grid Layout Image Listview Measurement Navigation Number Numpad Option List Page Popup Range Scroller Scrollview Select Timer Timespan Treelist Tools Accessibility

Listview

Basic usage

The Mobiscroll Listview control can be used as the <mobiscroll.Listview /> react component.
Additionally to the Listview options the following props can be used:

Prop Type Description
data Array of objects Array of data objects, that will be passed to the list items
itemType React Component This component will be rendered as each children. The data item will be passed to each as item

The listview items can be customized, so in order to render them a React Component is needed. It can be a simple li element or any custom made component, that renders an li element.

A few simple listview item examples
// a function as listview item
function MyListItem(props) {
    return <li>{this.props.item.text}</li>
}

// a class as listview item
class MyListItem extends React.Component {
    render() {
        return <li>{this.props.item.text}</li>;
    }
}

This MyListItem component will get the data item as it's item prop.

class MyWrapper extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [{
                id: 1, 
                text: 'First Item'
            }, {
                id: 2, 
                text: 'Second Item'
            }]
        };
    }

    render() {
        return <div>
            <mobiscroll.Listview theme="ios" itemType={MyListItem} data={this.state.items} />
        </div>;
    }
}

Animations

The Listview will automatically animate the items added to the list.

To animate listitem removals the React.adddons.TransitionGroup component is required.

As of React v15.5 the React.addons entry point is deprecated and the add-ons moved to different modules. Here's an example how to load the TransitionGroup from it's module:

First step is to install the module:

$ npm install react-transition-group@1.x --save

Second step is to import it in your app. Then pass it to the react namespace under addons:

import React from 'react';

// import the TransitionGroup from it's module
import TransitionGroup from 'react-transition-group/TransitionGroup';

// pass it to the React.addons namespace
React.addons = {
  TransitionGroup: TransitionGroup
};

Working with the data

To manipulate the data array, it is highly recommended to use the immutability helpers. The example below demonstrates it's use. Learn more
Here is a full example of the listview:
import { Listview, Form, Button } from '@mobiscroll/react';
import update from 'immutability-helper';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          items: [{
            id: 1,
            text: 'First Item'
          }, {
            id: 2,
            text: 'Second Item'
          }]
        };

        this.addToEnd = this.addToEnd.bind(this);
        this.removeLast = this.removeLast.bind(this);
    }

    // used when swiping an item
    stages = {
        left: [{
            key: "stage1",
            icon: "remove",
            color: "crimson",
            text: "Remove",
            action: (event, inst) => {
                this.setState(update(this.state, { items: { $splice: [[event.index, 1]] } }));
            }
        }]
    };

    addToEnd() {
        // Generating a random item
        var id = Math.floor(Math.random() * 1000);
        var newItem = { id: id, text: 'Generated ' + id };
        // calculating the new state
        var newState = update(this.state, { items: { $push: [newItem] } });
        this.setState(newState);
    }

    removeLast() {
        var newState = update(this.state, { items: { $splice: [[-1, 1]] } });
        this.setState(newState);
    }

    render() {
        return (<>
          <Listview itemType={MyListviewItem} data={this.state.items} stages={this.stages} />
          <Form>
            <Button onClick={this.addToEnd}>Add to the End</Button>
            <Button onClick={this.removeLast}>Remove the Last</Button>
          </Form>
        );
    }
}

Options

Name Type Default value Description
actionable boolean true If set to false, hover effects on the listview items will be turned off. This option can be defined inside the itemGroups setting as well for specific items.
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.
animateAddRemove Boolean true If set to false, item add and remove will not be animated.
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.
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
        }
    }
});
loadingIcon String 'loop2' Specifies the icon inside the loading content.
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.
select String 'off' 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.
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 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.
swiperight Function undefined Action to execute when a list item is swiped right. 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.
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:
  • 'ios' - iOS theme
  • 'ios-dark' - iOS dark theme (deprecated)
  • 'material' - Material theme
  • 'material-dark' - Material dark theme (deprecated)
  • 'mobiscroll' - Mobiscroll theme
  • 'mobiscroll-dark' - Mobiscroll dark theme (deprecated)
  • 'windows' - Windows theme
  • 'windows-dark' - Windows dark theme (deprecated)
It's possible to modify theme colors or create custom themes.
Starting from v4.9.0 setting directly the dark version of the theme is deprecated. Use the themeVariant setting instead to control the light / dark appearance of the theme.
Make sure that the theme you set is included in the downloaded package.
themeVariant String undefined Controls which variant of the theme will be used (light or dark).

Possible values:
  • 'light' - Use the light variant of the theme.
  • 'dark' - Use the dark variant of the theme.
  • 'auto' - 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 setting 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'.
The setting will not have any effect if the theme setting explicitly sets the dark version of a theme, e.g. theme: 'ios-dark'.
vibrate Boolean true Turn vibration on/off on sort start and sort end.

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
    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
    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
    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
    onItemTap={function (event, inst) {
    }}
/>
onListEnd(event, inst) Triggered when scrolling reaches to the end of the listview.

Parameters

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

Example

<mobiscroll.Listview
    onListEnd={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
    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
    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
    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
    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
    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
    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
    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
    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
    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
    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'));
deselect(item) Deselects the specified item.

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

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.deselect(1);
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();
hideLoading() Hides the loading content. By default the loading content is hidden.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.hideLoading();
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);
select(item) Selects the specified item.

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

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.select(2);
showLoading() Shows the loading content. By default the loading content is hidden.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.showLoading();
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-selected Sets the initially selected listview items.
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:
  • 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'
  • Croatian: 'hr'
  • 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'
rtl Boolean false Right to left display.
undoText String 'Undo' Text for the undo action.