Listview - Create, remove, update

Choose demo
$(function () {

    var ids = 6;

    $('#demo').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        sortable: true,
        iconSlide: true,
        striped: true,
        stages: [{
            percent: 25,
            color: 'crimson',
            icon: 'checkmark',
            text: 'Complete',
            action: function (event, inst) {
                $('.md-wo-status', event.target).text('Completed');
            }
        }, {
            percent: -50,
            color: 'red',
            icon: 'remove',
            text: 'Delete',
            confirm: true,
            action: function (event, inst) {
                inst.remove(event.target);
                return false;
            }
        }, {
            percent: 50,
            color: 'green',
            icon: 'plus',
            text: 'Spawn',
            undo: true,
            action: function (event, inst) {
                inst.add(++ids, 'Work order #000' + ids + ' created from WO #000' + $(event.target).attr('data-id') + '<div class="md-wo-status">Assigned</div>', event.index + 1);
            }
        }, {
            percent: -25,
            color: 'olive',
            icon: 'clock',
            text: 'Pending',
            action: function (event, inst) {
                $('.md-wo-status', event.target).text('Pending');
            }
        }]
    });
});
<div class="mbsc-note mbsc-note-primary">
    Swipe left/right, tap (click) and hold to start sorting.
</div>

<ul id="demo" class="md-wo-list" style="display:none">
    <li data-id="1">Work order #0001
        <div class="md-wo-status">Assigned</div>
    </li>
    <li data-id="2">Work order #0002
        <div class="md-wo-status">Assigned</div>
    </li>
    <li data-id="3">Work order #0003
        <div class="md-wo-status">Assigned</div>
    </li>
    <li data-id="4">Work order #0004
        <div class="md-wo-status">Assigned</div>
    </li>
    <li data-id="5">Work order #0005
        <div class="md-wo-status">Assigned</div>
    </li>
    <li data-id="6">Work order #0006
        <div class="md-wo-status">Assigned</div>
    </li>
</ul>

Listview - Sort handle

Choose demo
$(function () {

    $('#demo').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        swipe: false,
        sortable: {
            handle: 'right'
        },
        enhance: true
    });

});
<div class="mbsc-note mbsc-note-primary mbsc-align-center">
    Reorder items from the drag handle.
</div>

    <ul id="demo" style="display:none">
        <li><img src="/Content/img/demos/m1.png" />
            <h3>Barry Lyon</h3>
            <p>(202) 555-0193</p>
        </li>
        <li><img src="/Content/img/demos/f1.png" />
            <h3>Hortense Tinker</h3>
            <p>(202) 555-0127</p>
        </li>
        <li><img src="/Content/img/demos/m2.png" />
            <h3>Carl Hambledon</h3>
            <p>(202) 555-0147</p>
        </li>
        <li><img src="/Content/img/demos/f2.png" />
            <h3>Arlene Sharman</h3>
            <p>(202) 555-0190</p>
        </li>
        <li><img src="/Content/img/demos/m3.png" />
            <h3>Noble Blythe</h3>
            <p>(202) 555-0176</p>
        </li>
        <li><img src="/Content/img/demos/f3.png" />
            <h3>Angelica Geary</h3>
            <p>(202) 555-0107</p>
        </li>
        <li><img src="/Content/img/demos/m4.png" />
            <h3>Lowell Christophers</h3>
            <p>(202) 555-0120</p>
        </li>
        <li><img src="/Content/img/demos/f4.png" />
            <h3>Leilah Gregory</h3>
            <p>(202) 555-0189</p>
        </li>
    </ul>

Listview - Delete with undo

Choose demo
$(function () {

    $('#demo').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        stages: [{
            percent: -30,
            action: remove,
            undo: true
        }, {
            percent: 30,
            action: remove,
            undo: true
        }, ]
    });

    function remove(ev, inst) {
        inst.remove(ev.target);

        return false;
    }
});
<div class="mbsc-note mbsc-note-info mbsc-align-center">
    Swipe left/right to remove items.
</div>

<ul id="demo" class="md-mailbox" style="display:none">
    <li>
        <div class="md-mail-icon" style="background:#4c66a4;">F</div>
        <div class="md-mail-date">Nov 4</div>
        <div class="md-mail-from">Facebook</div>
        <div class="md-mail-subject">Your weekly page update</div>
    </li>
    <li>
        <div class="md-mail-icon" style="background:#287BBC;">L</div>
        <div class="md-mail-date">Nov 1</div>
        <div class="md-mail-from">LinkedIn</div>
        <div class="md-mail-subject">Michael has endorsed you!</div>
    </li>
    <li>
        <div class="md-mail-icon" style="background:#5185a8;">M</div>
        <div class="md-mail-date">Oct 31</div>
        <div class="md-mail-from">Mobiscroll</div>
        <div class="md-mail-subject">October update</div>
    </li>
    <li>
        <div class="md-mail-icon" style="background:#1a3665;">P</div>
        <div class="md-mail-date">Oct 31</div>
        <div class="md-mail-from">PayPal</div>
        <div class="md-mail-subject"> Stay fashionable in the cold with PayPal</div>
    </li>
    <li>
        <div class="md-mail-icon" style="background:#dd4b39;">G</div>
        <div class="md-mail-date">Oct 28</div>
        <div class="md-mail-from">Google+</div>
        <div class="md-mail-subject">John Doe added you back on Google+</div>
    </li>
    <li>
        <div class="md-mail-icon" style="background:#5185a8;">M</div>
        <div class="md-mail-date">Oct 27</div>
        <div class="md-mail-from">Mobiscroll</div>
        <div class="md-mail-subject">Password reset information</div>
    </li>
</ul>
.md-mailbox .mbsc-lv-item {
    line-height: 20px;
    padding: 10px 10px 10px 60px;
}

.md-demo-note {
    cursor: pointer;
}

.md-mail-icon {
    width: 40px;
    line-height: 40px;
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    text-align: center;
    text-shadow: none;
}

.md-mail-date {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
}

.md-mail-from {
    font-size: 14px;
}

.md-mail-subject {
    font-size: 12px;
}

.md-mail-empty {
    padding: 10px;

Listview - Swipe actions

Choose demo
$(function () {
    var movies = {};

    $('#demo').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        enhance: true,
        stages: [{
            percent: -10,
            color: '#DE3D18',
            icon: 'thumbs-up2',
            action: function (event, inst) {
                var item = $(event.target);
                movies[item.attr('data-id')] = movies[item.attr('data-id')] || {
                    up: 0,
                    down: 0
                };
                $('.md-thumbs-down', item).text(++movies[item.attr('data-id')].down);
            }
        }, {
            percent: 10,
            color: '#36DE18',
            icon: 'thumbs-up',
            action: function (event, inst) {
                var item = $(event.target);
                movies[item.attr('data-id')] = movies[item.attr('data-id')] || {
                    up: 0,
                    down: 0
                };
                $('.md-thumbs-up', item).text(++movies[item.attr('data-id')].up);
            }
        }]

    });

});
<div class="mbsc-note mbsc-note-primary mbsc-align-center">
    Swipe left/right to vote for movie.
</div>

<ul id="demo" class="md-movies" style="display:none">
    <li data-id="1">
        <img src="/Content/img/demos/Forrest_gump.png" />
        <p>Forrest Gump</p>
        <div class="md-thumbs">
            <div class="md-thumbs-up">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up"></span> /
            <div class="md-thumbs-down">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up2"></span></div>
    </li>
    <li data-id="2">
        <img src="/Content/img/demos/Star_Wars.png" />
        <p>Star Wars: Episode III</p>
        <div class="md-thumbs">
            <div class="md-thumbs-up">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up"></span> /
            <div class="md-thumbs-down">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up2"></span></div>
    </li>
    <li data-id="3">
        <img src="/Content/img/demos/The_Godfather.png" />
        <p>The Godfather</p>
        <div class="md-thumbs">
            <div class="md-thumbs-up">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up"></span> /
            <div class="md-thumbs-down">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up2"></span></div>
    </li>
    <li data-id="4">
        <img src="/Content/img/demos/The_Lord_of_the_rings.png" />
        <p>The Lord of the Rings</p>
        <div class="md-thumbs">
            <div class="md-thumbs-up">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up"></span> /
            <div class="md-thumbs-down">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up2"></span></div>
    </li>
    <li data-id="5">
        <img src="/Content/img/demos/Friends_with_benefits.png" />
        <p>Friends with Benefits</p>
        <div class="md-thumbs">
            <div class="md-thumbs-up">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up"></span> /
            <div class="md-thumbs-down">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up2"></span></div>
    </li>
    <li data-id="6">
        <img src="/Content/img/demos/Yes_Man.png" />
        <p>Yes Man </p>
        <div class="md-thumbs">
            <div class="md-thumbs-up">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up"></span> /
            <div class="md-thumbs-down">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up2"></span></div>
    </li>
    <li data-id="7">
        <img src="/Content/img/demos/Requiem_for_a_Dream.png" />
        <p>Requiem for a Dream</p>
        <div class="md-thumbs">
            <div class="md-thumbs-up">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up"></span> /
            <div class="md-thumbs-down">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up2"></span></div>
    </li>
    <li data-id="8">
        <img src="/Content/img/demos/The_Dark_Knight.png" />
        <p>The Dark Knight</p>
        <div class="md-thumbs">
            <div class="md-thumbs-up">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up"></span> /
            <div class="md-thumbs-down">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up2"></span></div>
    </li>
    <li data-id="9">
        <img src="/Content/img/demos/Despicable_Me.png" />
        <p>Despicable Me</p>
        <div class="md-thumbs">
            <div class="md-thumbs-up">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up"></span> /
            <div class="md-thumbs-down">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up2"></span></div>
    </li>
    <li data-id="10">
        <img src="/Content/img/demos/Mr_Nobody.png" />
        <p>Mr. Nobody</p>
        <div class="md-thumbs">
            <div class="md-thumbs-up">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up"></span> /
            <div class="md-thumbs-down">0</div> <span class="md-thumbs-icon mbsc-ic mbsc-ic-thumbs-up2"></span></div>
    </li>
</ul>
.md-thumbs {
    display: inline;
    float: right;
}

.md-thumbs-up,
.md-thumbs-down {
    display: inline;
}

.md-movies p.mbsc-lv-txt {
    font-size: 1em;
    display: inline-block;
}

Listview - Group sort

Choose demo
$(function () {

    $('#demo').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        swipe: false,
        sortable: {
            group: false
        },
        enhance: true
    });

});
<div class="md-groupsort">
    <ul id="demo" style="display:none">
        <li data-role="list-divider">Non alcoholic</li>
        <li><img src="/Content/img/demos/dCappuccino.jpg" class="md-img" /> Cappuccino <span class="md-price">$3.00</span></li>
        <li><img src="/Content/img/demos/dCoffee.jpg" class="md-img" /> Coffee <span class="md-price">$2.60</span></li>
        <li><img src="/Content/img/demos/dCola.jpg" class="md-img" />Coca Cola <span class="md-price">$3.50</span></li>
        <li><img src="/Content/img/demos/dMilk.jpg" class="md-img" />Milk <span class="md-price">$2.50</span></li>
        <li><img src="/Content/img/demos/dPepsi.jpg" class="md-img" />Pepsi <span class="md-price">$3.50</span></li>
        <li><img src="/Content/img/demos/dTea.jpg" class="md-img" />Tea <span class="md-price">$3.00</span></li>
        <li><img src="/Content/img/demos/dWater.jpg" class="md-img" />Water <span class="md-price">$2.00</span></li>
        <li data-role="list-divider">Alcoholic</li>
        <li><img src="/Content/img/demos/dBeer.jpg" class="md-img" />Beer <span class="md-price">$3.00</span></li>
        <li><img src="/Content/img/demos/dGin.jpg" class="md-img" />Gin <span class="md-price">$4.00</span></li>
        <li><img src="/Content/img/demos/dMartini.jpg" class="md-img" />Martini <span class="md-price">$4.50</span></li>
        <li><img src="/Content/img/demos/dRum.jpg" class="md-img" />Rum <span class="md-price">$5.00</span></li>
        <li><img src="/Content/img/demos/dWine.jpg" class="md-img" />Wine <span class="md-price">$4.50</span></li>
        <li><img src="/Content/img/demos/dWhiskey.jpg" class="md-img" />Whiskey <span class="md-price">$6.00</span></li>
    </ul>
</div>
.md-groupsort .mbsc-lv .mbsc-lv-item .md-img {
    border-radius: 40px;
}

.md-price {
    float: right;
}

Listview - Action menu

Choose demo
$(function () {

    $('#demo').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        enhance: true,
        actions: [{
            icon: 'link',
            action: function (event, inst) {
                mobiscroll.toast({
                    message: 'Linked'
                });
            }
        }, {
            icon: 'star3',
            action: function (event, inst) {
                mobiscroll.toast({
                    message: 'Starred'
                });
            }
        }, {
            icon: 'remove',
            undo: true,
            action: function (event, inst) {
                inst.remove(event.target);
                return false;
            }
        }, {
            icon: 'download',
            action: function (event, inst) {
                mobiscroll.toast({
                    message: 'Downloaded'
                });
            }
        }, ],
        itemGroups: {
            folder: {
                actions: [{
                    icon: 'link',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Linked'
                        });
                    }
                }, {
                    icon: 'star3',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Starred'
                        });
                    }
                }, {
                    icon: 'download',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Downloaded'
                        });
                    }
                }, ]
            },
            music: {
                actions: [{
                    icon: 'link',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Linked'
                        });
                    }
                }, {
                    icon: 'star3',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Starred'
                        });
                    }
                }, {
                    icon: 'download',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Downloaded'
                        });
                    }
                }, {
                    icon: 'play',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Playing...'
                        });
                    }
                }, {
                    icon: 'remove',
                    undo: true,
                    action: function (event, inst) {
                        inst.remove(event.target);
                        return false;
                    }
                }]
            },
            movie: {
                actions: [{
                    icon: 'link',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Linked'
                        });
                    }
                }, {
                    icon: 'star3',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Starred'
                        });
                    }
                }, {
                    icon: 'download',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Downloaded'
                        });
                    }
                }, {
                    icon: 'play',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Playing...'
                        });
                    }
                }, {
                    icon: 'remove',
                    undo: true,
                    action: function (event, inst) {
                        inst.remove(event.target);
                        return false;
                    }
                }]
            },
            picture: {
                actions: [{
                    icon: 'link',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Linked'
                        });
                    }
                }, {
                    icon: 'star3',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Starred'
                        });
                    }
                }, {
                    icon: 'download',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Downloaded'
                        });
                    }
                }, {
                    icon: 'print',
                    action: function (event, inst) {
                        mobiscroll.toast({
                            message: 'Printing...'
                        });
                    }
                }, {
                    icon: 'remove',
                    undo: true,
                    action: function (event, inst) {
                        inst.remove(event.target);
                        return false;
                    }
                }]
            }
        }
    });
});
<ul id="demo" style="display:none">
    <li data-type="folder" data-icon="folder">Music
        <ul>
            <li data-type="music" data-icon="music">Track 1</li>
            <li data-type="music" data-icon="music">Track 2</li>
            <li data-type="music" data-icon="music">Track 3</li>
        </ul>
    </li>
    <li data-type="folder" data-icon="folder">Photos
        <ul>
            <li data-type="picture" data-icon="image2">Image 1</li>
            <li data-type="picture" data-icon="image2">Image 2</li>
            <li data-type="picture" data-icon="image2">Image 3</li>
        </ul>
    </li>
    <li data-type="folder" data-icon="folder">Videos
        <ul>
            <li data-type="movie" data-icon="play">Movie 1</li>
            <li data-type="movie" data-icon="play">Movie 2</li>
            <li data-type="movie" data-icon="play">Movie 3</li>
        </ul>
    </li>
    <li data-type="picture" data-icon="image2">Image 1</li>
    <li data-type="picture" data-icon="image2">Image 2</li>
    <li data-type="picture" data-icon="image2">Image 3</li>
    <li data-type="picture" data-icon="image2">Image 4</li>
    <li data-type="picture" data-icon="image2">Image 5</li>
    <li data-type="picture" data-icon="file4">File 1</li>
    <li data-type="picture" data-icon="file4">File 2</li>
</ul>

Listview - Hierarchy

Choose demo
$(function () {

    $('#demo').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        swipe: false,
        enhance: true
    });

});
<ul id="demo" style="display:none">
    <li>
        <span class="md-continent micons icon-north-america"> </span> North America
        <ul>
            <li>
                <img src="/Content/img/flags/us.png" /> USA
                <ul>
                    <li>Washington</li>
                    <li>Florida</li>
                    <li>Los Angeles</li>
                    <li>New York</li>
                    <li>Detroit</li>
                    <li>Chicago</li>
                </ul>
            </li>
            <li>
                <img src="/Content/img/flags/ca.png" /> Canada
                <ul>
                    <li>Vancouver</li>
                    <li>Winnipeg</li>
                    <li>Calgary</li>
                    <li>Montreal</li>
                    <li>Quebec</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <span class="md-continent micons icon-south-america"></span> South America
        <ul>
            <li>
                <img src="/Content/img/flags/ar.png" /> Argentina
                <ul>
                    <li>Buenos Aires</li>
                    <li>Córdoba</li>
                    <li>Rosario</li>
                    <li>Mendoza</li>
                </ul>
            </li>
            <li>
                <img src="/Content/img/flags/br.png" /> Brazil
                <ul>
                    <li>Rio de Janeiro</li>
                    <li>Sao Paolo</li>
                    <li>Brasília</li>
                    <li>Salvador</li>
                    <li>Fortaleza</li>
                </ul>
            </li>
            <li>
                <img src="/Content/img/flags/cl.png" /> Chile
                <ul>
                    <li>Santiago</li>
                    <li>Concepción</li>
                    <li>Valparaíso</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <span class="md-continent micons icon-europe"></span> Europe
        <ul>
            <li>
                <img src="/Content/img/flags/fr.png" /> France
                <ul>
                    <li>Paris</li>
                    <li>Toulouse</li>
                    <li>Marseille</li>
                    <li>Strasbourg</li>
                    <li>Bordeaux</li>
                    <li>Lyon</li>
                </ul>
            </li>
            <li>
                <img src="/Content/img/flags/de.png" /> Germany
                <ul>
                    <li>Berlin</li>
                    <li>Frankfurt</li>
                    <li>Hamburg</li>
                    <li>Stuttgart</li>
                    <li>Munich</li>
                </ul>
            </li>
            <li>
                <img src="/Content/img/flags/es.png" /> Spain
                <ul>
                    <li>Madrid</li>
                    <li>Barcelona</li>
                    <li>Bilbao</li>
                    <li>Valencia</li>
                    <li>Zaragoza</li>
                </ul>
            </li>
            <li>
                <img src="/Content/img/flags/it.png" /> Italy
                <ul>
                    <li>Rome</li>
                    <li>Palermo</li>
                    <li>Genoa</li>
                    <li>Torino</li>
                    <li>Milan</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <span class="md-continent micons icon-asia"></span> Asia
        <ul>
            <li>
                <img src="/Content/img/flags/cn.png" /> China
                <ul>
                    <li>Shanghai</li>
                    <li>Hong Kong</li>
                    <li>Beijing</li>
                    <li>Tianjin</li>
                    <li>Wuhan</li>
                    <li>Chongqing</li>
                </ul>
            </li>
            <li>
                <img src="/Content/img/flags/jp.png" /> Japan
                <ul>
                    <li>Tokyo</li>
                    <li>Kagoshima</li>
                    <li>Osaka</li>
                    <li>Yokohama</li>
                    <li>Kawasaki</li>
                    <li>Kyoto</li>
                    <li>Sapporo</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <span class="md-continent micons icon-australia"></span> Australia
        <ul>
            <li>
                <img src="/Content/img/flags/au.png" /> Australia
                <ul>
                    <li>Sydney</li>
                    <li>Canberra</li>
                    <li>Melbourne</li>
                    <li>Perth</li>
                    <li>Brisbane</li>
                    <li>Sunshine Coast</li>
                </ul>
            </li>
            <li>
                <img src="/Content/img/flags/nz.png" /> New Zeland
                <ul>
                    <li>Wellington</li>
                    <li>Auckland</li>
                    <li>Christchurch</li>
                    <li>Napier-Hastings</li>
                    <li>Tauranga</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <span class="md-continent micons icon-africa"></span> Africa
        <ul>
            <li>
                <img src="/Content/img/flags/eg.png" /> Egypt
                <ul>
                    <li>Cairo</li>
                    <li>Alexandria</li>
                    <li>Giza</li>
                    <li>Shubra El-Kheima</li>
                    <li>Suez</li>
                    <li>Luxor</li>
                </ul>
            </li>
            <li>
                <img src="/Content/img/flags/za.png" /> South Africa
                <ul>
                    <li>Port Elizabeth</li>
                    <li>Kimberley</li>
                    <li>Cape Town</li>
                    <li>Johannesburg</li>
                    <li>Durban</li>
                </ul>
            </li>
            <li>
                <img src="/Content/img/flags/tz.png" /> Tanzania
                <ul>
                    <li>Dar es Salaam</li>
                    <li>Mwanza</li>
                    <li>Arusha</li>
                    <li>Dodoma</li>
                    <li>Zanzibar City</li>
                </ul>
            </li>
            <li>
                <img src="/Content/img/flags/gh.png" /> Ghana
                <ul>
                    <li>Kumasi</li>
                    <li>Accra</li>
                    <li>Sekondi-Takoradi</li>
                    <li>Tamale</li>
                    <li>Sunyani</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
.md-country .mbsc-lv-img {
    margin-top: -.6em;
    width: 2em;
}

.md-continent {
    font-size: 36px;
    position: absolute;
    height: 1em;
    width: 1em;
    top: 50%;
    margin-top: -.5em;
    left: .42em;
    text-align: center;
}

Listview - Group headers

Choose demo
$(function () {

    $('#demo').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        fixedHeader: true,
        swipe: false
    });

});
<ul id="demo" style="display:none">
    <li data-role="list-divider">A</li>
    <li>Audie Pennington</li>
    <li>Audrea Delaughter</li>
    <li>Augustine Brink</li>
    <li>Aurelio Deveau</li>
    <li>Aurora Marston</li>
    <li data-role="list-divider">B</li>
    <li>Bobby Weisman</li>
    <li>Bobbye Clapp</li>
    <li>Bobette Boyland</li>
    <li>Boris Latta</li>
    <li>Boyce Haller</li>
    <!-- Showing partial data. Download full source. -->
</ul>

Listview - Icons

Choose demo
$(function () {

    $('#demo').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        enhance: true,
        swipe: false
    });

});
<div class="md-icons">
    <ul id="demo" style="display:none">
        <li data-id="1" data-icon="line-user">Edit profile
            <ul>
                <li data-icon="line-key">Change password</li>
                <li data-icon="line-user">Change personal information</li>
            </ul>
        </li>
        <li data-id="2" data-icon="line-settings">Settings
            <ul>
                <li data-icon="line-megaphone">Sound settings</li>
                <li data-icon="line-params">Notification settings</li>
                <li data-icon="line-t-shirt">Change theme</li>
            </ul>
        </li>
        <li data-id="3" data-icon="line-heart">Rate
            <ul>
                <li data-icon="line-star">Rate this application on Google Play</li>
            </ul>
        </li>
        <li data-id="4" data-icon="line-bubble">Tell a friend
            <ul>
                <li data-icon="line-mail">Share it in Email</li>
                <li data-icon="line-world">Share it on Social media</li>
            </ul>
        </li>
        <li data-id="6" data-icon="line-note">Term of service
            <ul>
                <li>This application content is under WTFPL license.</li>
            </ul>
        </li>
        <li data-id="5" data-icon="line-mail">Contact us
            <ul>
                <li data-icon="line-mail">Let us know if we can help.</li>
            </ul>
        </li>
        <li data-id="7" data-icon="line-world">About us
            <ul>
                <li>We are the Mobiscroll team.</li>
            </ul>
        </li>
    </ul>
</div>
.md-icons ul {
    font-size: 16px;
}

Listview - Hover Reveal

Choose demo
$(function () {

    $('#demo').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        enhance: true,
        actions: {
            right: [{
                icon: 'thumbs-up',
                action: function (event, inst) {
                    mobiscroll.toast({
                        message: 'Liked'
                    });
                }
            }, {
                icon: 'share',
                action: function (event, inst) {
                    mobiscroll.toast({
                        message: 'Shared'
                    });
                }
            }, {
                icon: 'bubble',
                action: function (event, inst) {
                    mobiscroll.toast({
                        message: 'Commented'
                    });
                }
            }]
        },
        hover: 'left'
    });

});
<ul id="demo" style="display:none">
    <li>
        <h3>Electric Smartscooter</h3>
        <p>Gogoro Smartscooter is world’s first connected two-wheeled electric vehicle. </p>
    </li>
    <li>
        <h3>The Solar Bike</h3>
        <p>An electric bike that incorporates solar panels and producing enough energy to use it 30 km a day.</p>
    </li>
    <li>
        <h3>Smallest Quadricopter</h3>
        <p>The Dutch gadget-manufacturer TRNDlabs reveals the smallest quadricopter of the world.</p>
    </li>
    <li>
        <h3>Glow Headphones</h3>
        <p>Discover the world’s first laser headphones that pulse to the music.</p>
    </li>
    <li>
        <h3>Project Ara</h3>
        <p>Google’s new modular smartphone, Project Ara, is expected soon to appear on the market.</p>
    </li>
    <li>
        <h3>Wireless Gesture Controller</h3>
        <p>The controller allow you to remote control applications contained in your computing devices.</p>
    </li>
</ul>

Listview - Checklist

Choose demo
$(function () {

    $('#demo').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        sortable: {
            handle: 'left'
        },
        stages: {
            left: [{
                key: 'stage1',
                icon: 'plus',
                color: '#31c6e7',
                text: 'Add',
                action: function (event, inst) {
                    inst.add(null, '<input type="checkbox" data-role="none" /> New Todo', event.index + 1);
                }
            }],
            right: [{
                key: 'stage2',
                color: '#009688',
                text: 'Remove',
                icon: 'remove',
                action: function (event, inst) {
                    inst.remove(event.target);
                    return false;
                }
            }]
        }

    });

});
<ul id="demo" class="md-lv-checklist" style="display:none" mbsc-enhance>
    <li><input type="checkbox" data-role="none" checked />Do the laundry</li>
    <li><input type="checkbox" data-role="none" />Check out new Mobiscroll features</li>
    <li><input type="checkbox" data-role="none" checked />Don't forget mom's birthday!</li>
    <li><input type="checkbox" data-role="none" />Update my app with the latest Mobiscroll</li>
    <li><input type="checkbox" data-role="none" />Buy new shoes</li>
    <li><input type="checkbox" data-role="none" />Need ketchup for pizza</li>
</ul>

Listview - Load more

Choose demo
// Use the settings object to change the theme
mobiscroll.settings = {
    theme: ''
};

$(function () {
    var time,
        li,
        inst,
        $demo = $('#demo'),
        $btnMore = $('#more'),
        length = 0;

    function getTweets() {
        $btnMore.addClass('md-btn-loading');

        $.getJSON("//demo.mobiscroll.com/getListviewItems/" + length + '?callback=?', function (data) {

            $.each(data, function (i, v) {
                time = (length + i) * 600000 / 3600000;

                li = '<img class="md-img" src="/content/img/' + v.user.profile_image_url + '" />';
                li += '<div class="md-name md-text">' + v.user.name + ' <span class="md-tname">@' + v.user.screen_name + ' - ' + (time < 1 ? time.toFixed(1) * 10 + "m" : time.toFixed(0) + "h") + '</span></div>';
                li += '<div class="md-cont md-text">' + v.text.replace(/@([^\s]+)/ig, '<a>$&</a>').replace(/http:\/\/([^\s]+)/ig, '<a href="$&" target="_blank">$&</a>') + '</div>';
                li += '<div class="md-icons">' +
                    '<button class="mbsc-btn mbsc-btn-flat" data-icon="fa-mail-reply" ></button>' +
                    '<button class="mbsc-btn mbsc-btn-flat" data-icon="star3">' + (v.favorite_count || 0) + '</button>' +
                    '<button class="mbsc-btn mbsc-btn-flat" data-icon="fa-retweet">' + v.retweet_count + '</button>' +
                    '<button class="mbsc-btn mbsc-btn-flat" data-icon="fa-ellipsis-h" >' +
                    '</div>';

                inst.add(null, li);

            });

            $btnMore.removeClass('md-btn-loading');

            if (length >= 80) {
                $btnMore.hide();
            }
        });

    }

    inst = $demo.mobiscroll().listview({
        animation: false,
        striped: true,
        striped: false,
    }).mobiscroll('getInst');

    $btnMore.click(function (ev) {
        length += 10;
        getTweets();
    });

    getTweets();

});
<div class="md-tweets">

    <ul id="demo" style="display:none" mbsc-enhance>
        <li data-role="list-divider">Tweets</li>
    </ul>

    <div id="demo-loading" class="mbsc-padding md-loading" mbsc-form>
        <button id="more" class="mbsc-btn-block" data-icon="loop2">
            <span class="md-btn-text">Load more</span>
        </button>
    </div>

</div>
@keyframes md-rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes md-rotating {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.md-tweets .md-name {
    font-weight: bold;
}

.md-tweets .md-cont {
    padding-top: 4px;
}

.md-tweets .md-tname {
    color: #8899a6;
    font-size: 13px;
    font-weight: 100;
}

.md-tweets .mbsc-lv-item .md-text {
    padding-left: 4.25em;
    font-size: 14px;
}

.md-tweets .mbsc-lv-item .md-img {
    position: absolute;
    max-height: 3em;
    max-width: 3em;
    top: 20px;
    left: 1.25em;
    border-radius: 4px;
}

.md-tweets .mbsc-lv-item .md-icons {
    padding: .7142857em 0 0 0;
}

.md-tweets .mbsc-lv-item .md-icons {
    padding-left: 4.25em;
    font-size: 14px;
}

.md-tweets .mbsc-lv-item .mbsc-btn-flat {
    margin: 0;
    margin-right: .14285em;
    vertical-align: top;
}

.md-tweets .mbsc-padding .mbsc-ic-loop2 {
    display: none;
    padding: 0;
}

.md-tweets .mbsc-ic-loop2:before {
    display: inline-block;
    -webkit-animation: md-rotating .6s linear infinite;
    animation: md-rotating .6s linear infinite;
}

.md-tweets .md-btn-loading .mbsc-ic-loop2 {
    display: inline-block;
}

.md-tweets .md-btn-loading .md-btn-text {
    display: none;
}

.md-tweets .mbsc-lv .mbsc-lv-item {
    padding-bottom: .625em;
}

.md-tweets .mbsc-material .mbsc-btn-group {
    text-align: left;
}

.md-tweets .mbsc-lv-ios .mbsc-lv-item .mbsc-btn-flat {
    padding: 0.3571em .714285em;
}

.md-tweets .mbsc-lv-wp .mbsc-lv-item .mbsc-btn-flat {
    font-size: 12px;
}

.md-tweets .mbsc-lv-wp .mbsc-btn-flat .mbsc-btn-ic {
    display: inline-block;
    margin: 0 0.64em 0 0;
}

.md-tweets .mbsc-lv-android-holo .mbsc-lv-item .mbsc-btn-flat {
    margin: .25em 1em .25em 0;
}

.md-tweets .ui-btn-icon-left:after {
    display: none;
}

.md-tweets .mbsc-lv-jqm .ui-listview > .ui-li-static.ui-li-has-thumb {
    padding-left: 1.5em;
}

.md-tweets .mbsc-lv-jqm .ui-listview .ui-li-has-thumb>img:first-child {
    max-height: 3em;
    max-width: 3em;
    top: 12px;
    left: 1.25em;
    border-radius: 4px;
}

.md-tweets .mbsc-lv-jqm .ui-listview > .ui-li-static {
    white-space: normal;
}

Listview - Load on demand

Choose demo
// Use the settings object to change the theme
mobiscroll.settings = {
    theme: ''
};


$(function () {

    var i,
        li,
        inst,
        entry,
        timer,
        feed,
        $wnd = $(window),
        $demo = $('#demo'),
        $loadingCont = $('#demo-loading'),
        isLoading = false,
        feedNum = 5;

    function jsonp(url, callback) {
        var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
        window[callbackName] = function (data) {
            delete window[callbackName];
            document.body.removeChild(script);
            callback(data);
        };

        var script = document.createElement('script');
        script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
        document.body.appendChild(script);
    }

    function getFeed() {
        var img, text;
        $loadingCont.addClass('md-btn-loading');

        jsonp("https://api.rss2json.com/v1/api.json?rss_url=http%3A%2F%2Ffeeds.feedburner.com%2FTechCrunch%2F&api_key=ytdlqir4cx7dpdb9asyawz4lteioxq5uwl5ctd9n&count=" + feedNum, function (result) {
            if (result.status == 'ok') {
                for (i = feedNum - 5; i < result.items.length; i++) {
                    entry = result.items[i];
                    img = entry.thumbnail ? entry.content.match(/src="[^ ]*/)[0] : '';
                    text = entry.content.match(entry.thumbnail ? />[^\.]*/ : /.+?(?=<)/)[0].replace(/>\s/, '');
                    li = '<div>';
                    li += '<h4>' + entry.title + '</h4>';
                    li += '<a href="' + entry.link + '" target="_blank"><img ' + img + ' /></a>';
                    li += '<p class="md-text">' + text + ' ... <a href="' + entry.link + '" target="_blank"> Read more →</a></p>';
                    li += '<div class="md-text md-author"> by <a href="">' + entry.author + '</a></div>';
                    li += '</div>';
                    inst.add(null, li);
                }

                isLoading = false;
                $loadingCont.removeClass('md-btn-loading');
            }
        });
    }

    function shouldLoad() {
        return $loadingCont.offset().top + $loadingCont.outerHeight() - 1 < $wnd.scrollTop() + $wnd.outerHeight();
    }

    inst = $demo.mobiscroll().listview({
        striped: true,
        animation: false,
        swipe: false,
    }).mobiscroll('getInst');

    $wnd.on('scroll touchmove', function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            if (!isLoading && shouldLoad()) {
                isLoading = true;
                feedNum += 5;
                getFeed();
            }
        }, 250);
    });

    getFeed();

});
<ul id="demo" class="md-news" style="display:none" mbsc-enhance>
    <li data-role="list-divider">TechCrunch News</li>
</ul>

<div id="demo-loading" class="mbsc-padding md-load-btn" mbsc-form>
    <button class="mbsc-btn mbsc-btn-flat" data-icon="loop2"></button>
</div>
@keyframes md-rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes md-rotating {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.md-news .mbsc-lv-item img {
    width: 100%;
}

.md-news .mbsc-lv-item h4 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 100;
}

.md-news .mbsc-lv-item p {
    font-size: 14px;
}

.md-news .mbsc-lv-item .md-author {
    margin-top: 0;
    text-align: right;
    font-size: 14px;
    font-style: italic;
}

.md-load-btn {
    display: none;
    min-height: 0!important;
}

.md-load-btn .mbsc-btn-flat {
    width: 100%;
}

.md-load-btn .mbsc-ic-loop2 {
    font-size: 22px;
    display: none;
}

.md-load-btn .mbsc-ic-loop2:before {
    display: inline-block;
    -webkit-animation: md-rotating .6s linear infinite;
    animation: md-rotating .6s linear infinite;
}

.md-load-btn.md-btn-loading .mbsc-ic-loop2 {
    display: inline-block;
}

.md-load-btn .ui-btn-icon-left:after {
    display: none;
}

Listview - Quick Navigation

Choose demo
$(function () {

    var timer,
        firstletter,
        currSelected = "A",
        start = new Date(),
        isScrolled = false,
        $wndw = $(window),
        $popup = $('.md-popup'),
        isFavorite = false,
        preventScroll = false,
        $list = $('#demo'),
        $listDeviders = $('#demo li[data-role=list-divider]'),
        $menustrip = $('.md-alfabet');

    $list.mobiscroll().listview({

        theme: '',

        lang: '',

        display: '',
        swipe: false,
        enhance: true,
        onItemTap: function (event, inst) {
            var target = $(event.domEvent.target);

            if (target.hasClass('mbsc-ic')) {
                $(event.target).toggleClass('star3');
                target
                    .toggleClass('mbsc-ic-star3')
                    .toggleClass('mbsc-ic-star');
            }

        }
    });

    $menustrip.mobiscroll().optionlist({
        theme: '',
        type: 'tabs',
        display: 'top',
        select: 'single',
        onItemTap: function (event, inst) {
            var item = $(event.target),
                text = item.text();

            preventScroll = true;
            isFavorite = item.hasClass('md-item-star');

            if (!isFavorite) {
                $('.mbsc-lv-item:not(.star3)', $list).show();
                $listDeviders.show();
                $('.md-no-bookmark').hide();
            } else {
                $('.mbsc-lv-item:not(.star3)', $list).hide();
                $listDeviders.hide();
                if (!$('.star3').length) {
                    $('.md-no-bookmark').show();
                }
            }

            if (!isScrolled && !isFavorite) {
                $wndw.scrollTop($('.header' + text).next().position().top - $(this).height());
                $popup.addClass('md-show-popup');
                $popup.text(text);
                clearTimeout(timer);
                timer = setTimeout(function () {
                    $popup.removeClass('md-show-popup');
                }, 1500);
            }
        }
    });

    $wndw.on('scroll trouchmove', function (ev) {
        if (new Date() - start > 150 && !isFavorite) {
            firstletter = $(document.elementFromPoint(0, 100)).text()[0];

            isScrolled = true;

            if (currSelected != firstletter) {

                $menustrip.mobiscroll('navigate', $('.md-item-' + firstletter), true);
            }

            currSelected = firstletter;
            start = new Date();
            isScrolled = false;
        }
    });

});
<div class="md-navigate">
    <div class="md-popup">
        c</div>
    <ul class="md-alfabet" style="display: none">
        <li class="md-item-star"><span class="mbsc-ic mbsc-ic-star3"></span</li>
        <li class="md-item-A" data-selected="true">A</li>
        <li class="md-item-B">B</li>
        <li class="md-item-C">C</li>
        <!-- Showing partial data. Download full source. -->
    </ul>
    <ul id="demo" class="md-list" style="display: none">
        <li class="md-no-bookmark">
            <div class="md-nob-title">Traveling to the same place frequently?</div>
            <div class="md-nob-txt">You can bookmark airports by tapping on the star to the left and they will show up here.</div>
            <div class="md-nob-separator"></div>
            <img class="md-nob-img" src="/Content/img/demos/lv-bookmark.png" >
        </li>
        <li data-role="list-divider" class="headerA">A</li>
        <li data-icon="star">Abilene, TEXAS<span class="md-iata">(ABI)</span></li>
        <li data-icon="star">Agana / Tamuning, GUAM<span class="md-iata">(GUM)</span></li>
        <li data-icon="star">Aguadilla, PUERTO RICO<span class="md-iata">(BQN)</span></li>
        <li data-icon="star">Akron / Canton, OHIO<span class="md-iata">(CAK)</span></li>
        <li data-role="list-divider" class="headerB">B</li>
        <li data-icon="star">Baltimore / Glen Burnie, MARYLAND<span class="md-iata">(BWI)</span></li>
        <li data-icon="star">Bangor, MAINE<span class="md-iata">(BGR)</span></li>
        <li data-icon="star">Bar Harbor, MAINE<span class="md-iata">(BHB)</span></li>
        <li data-icon="star">Baton Rouge, LOUISIANA<span class="md-iata">(BTR)</span></li>
        <!-- Showing partial data. Download full source. -->
    </ul>
</div>
.demo-phone-screen #demombscr {
    position: static;
}

.md-navigate .md-list .mbsc-lv-item {
    padding-right: 4em;
    backface-visibility: hidden;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}

.md-popup {
    position: fixed;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 100px;
    background: rgba(78, 204, 196, .6);
    color: #fff;
    font-size: 56px;
    font-family: sans-serif;
    line-height: 100px;
    text-align: center;
    top: 50%;
    left: 50%;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 300ms;
    -moz-transition: opacity 300ms;
    transition: opacity 300ms;
}

.demo-phone .md-popup {
    position: absolute;
}

.md-show-popup {
    opacity: 1;
}

.md-alfabet .mbsc-ms-item {
    min-width: 2.5em;
}

.md-iata {
    position: absolute;
    top: 50%;
    right: 1em;
    margin-top: -9px;
}

.demo-theme-material .md-popup {
    background: rgba(0, 150, 136, .6);
}

.demo-theme-material-dark .md-popup {
    background: rgba(129, 204, 196, .6);
}

.demo-theme-ios .md-popup,
.demo-theme-ios-classic .md-popup {
    background: rgba(0, 122, 255, .6);
}

.demo-theme-android-holo .md-popup,
.demo-theme-android-holo-light .md-popup {
    background: rgba(49, 182, 231, .6);
}

.demo-theme-ios .md-popup {
    background: rgba(0, 122, 255, .6);
}

.demo-theme-wp .md-popup,
.demo-theme-wp-light .md-popup {
    background: rgba(26, 159, 224, .6);
}

.demo-theme-jqm .md-popup {
    background: rgba(51, 136, 204, .7);
}

.example-full .md-popup,
.demo-fullscreen .md-popup {
    position: fixed;
}

.md-item-star .mbsc-ic-star3 {
    font-size: 14px;
}

/* no bookmark section */

.md-navigate .md-list .mbsc-lv-item.md-no-bookmark {
    display: none;
    padding: 1.5em 2.5em;
    height: 571px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.demo-theme-wp-light .md-list .mbsc-lv-item.md-no-bookmark,
.demo-theme-wp .md-list .mbsc-lv-item.md-no-bookmark {
    height: 547px;
}

.demo-theme-ios .md-list .mbsc-lv-item.md-no-bookmark {
    height: 574px;
}

.demo-theme-android .md-list .mbsc-lv-item.md-no-bookmark {
    height: 577px;
}

.demo-theme-android-holo-light .md-list .mbsc-lv-item.md-no-bookmark,
.demo-theme-android-holo .md-list .mbsc-lv-item.md-no-bookmark {
    height: 575px;
}

.md-nob-separator {
    height: 1px;
    margin-bottom: 38px;
    width: 100%;
    background: #CACACA;
}

.md-nob-title {
    text-align: center;
    padding: 1em;
    font-size: 16px;
}

.md-nob-txt {
    text-align: center;
    padding: 1em 0 2em 0;
    color: #a0a0a0;
    font-size: 14px;
}

.md-navigate .mbsc-lv .md-no-bookmark.mbsc-lv-item .md-nob-img {
    position: static;
    display: block;
    max-width: 274px;
    width: 274px;
    max-height: initial;
    margin: 0 auto;
    border: 1px solid #ccc;
    margin-bottom: 14px;
    transform: none;
}

.md-no-bookmark {
    display: none;
    padding: 2em;
    background: #f7f7f7;
    font-size: 16px;
}

.md-navigate .md-no-bookmark.mbsc-lv-item-active:after {
    background: none!important;
}

.demo-theme-jqm .md-navigate .md-list .mbsc-lv-item.md-no-bookmark {
    padding-top: 70px;
    white-space: normal;
}

Listview - Card Actions

Choose demo
// Use the settings object to change the theme
mobiscroll.settings = {
    theme: ''
};


$(function () {
    $('.md-card-like').off().click(function () {
        if (!$(this).hasClass('md-like-active')) {
            mobiscroll.toast({
                message: 'Added to favorites'
            });
        }
        $(this).toggleClass('md-like-active');
    });
});
<div id="demo" class="md-cardaction" style="display:none" mbsc-form>

    <div class="md-card">
        <div class="md-card-bg"></div>
        <div class="md-card-text mbsc-padding">
            <h4>Best places to seek silence</h4>
            <p class="mbsc-desc">The Dhamma Giri, a vipassana meditation retreat.</p>
            <div class="md-card-like"><span class="mbsc-ic mbsc-ic-heart"></span></div>
        </div>

        <button class="mbsc-btn-flat md-share-btn">Share</button>
        <button class="mbsc-btn-flat">Explore</button>
    </div>

    <div class="md-card">
        <div class="md-card-bg md-card-bg-II"></div>
        <div class="md-card-text mbsc-padding">
            <h4>Best animal adventures for families</h4>
            <p class="mbsc-desc">A young panda tests his climbing skills at the Chengdu Research Base.</p>
            <div class="md-card-like"><span class="mbsc-ic mbsc-ic-heart"></span></div>
        </div>
        <button class="mbsc-btn-flat md-share-btn">Share</button>
        <button class="mbsc-btn-flat">Explore</button>
    </div>

    <div class="md-card">
        <div class="md-card-bg md-card-bg-III"></div>
        <div class="md-card-text mbsc-padding">
            <h4>Best places to test your survival skills</h4>
            <p class="mbsc-desc">A view across the Turnagain Arm on Alaska's Kenai Peninsula.</p>
            <div class="md-card-like"><span class="mbsc-ic mbsc-ic-heart"></span></div>
        </div>
        <button class="mbsc-btn-flat md-share-btn">Share</button>
        <button class="mbsc-btn-flat">Explore</button>
    </div>

    <div class="md-card">
        <div class="md-card-bg md-card-bg-IV"></div>
        <div class="md-card-text mbsc-padding">
            <h4>Most accessible destinations</h4>
            <p class="mbsc-desc">The impressive Mayan site of Chichén Itzá..</p>
            <div class="md-card-like"><span class="mbsc-ic mbsc-ic-heart"></span></div>
        </div>
        <button class="mbsc-btn-flat md-share-btn">Share</button>
        <button class="mbsc-btn-flat">Explore</button>
    </div>

    <div class="md-card">
        <div class="md-card-bg md-card-bg-V"></div>
        <div class="md-card-text mbsc-padding">
            <h4>The world’s most extraordinary sleepovers</h4>
            <p class="mbsc-desc">Explore the azure depths with a stay at the Manta Resort's underwater room.</p>
            <div class="md-card-like"><span class="mbsc-ic mbsc-ic-heart"></span></div>
        </div>
        <button class="mbsc-btn-flat md-share-btn">Share</button>
        <button class="mbsc-btn-flat">Explore</button>
    </div>

    <div class="md-card">
        <div class="md-card-bg md-card-bg-VI"></div>
        <div class="md-card-text mbsc-padding">
            <h4>Best luxe experiences for budget travellers</h4>
            <p class="mbsc-desc">Las Vegas lights up the night.</p>
            <div class="md-card-like"><span class="mbsc-ic mbsc-ic-heart"></span></div>
        </div>
        <button class="mbsc-btn-flat md-share-btn">Share</button>
        <button class="mbsc-btn-flat">Explore</button>
    </div>

</div>
.demo-main-cont.demo-comp-listview {
    padding: 0;
}

.demo-comp-listview .demo-note {
    margin: 10px;
}

.demo-main-cont.demo-comp-listview {
    padding: 0;
}

.demo-comp-listview .demo-note {
    margin: 10px;
}

.md-cardaction .md-card {
    position: relative;
    display: block;
    border-radius: 2px;
    background: #fafafa;
    text-align: left;
    color: #000;
    margin: 20px 15px;
    -webkit-box-shadow: 0px 0px 1px 1px rgba(170, 170, 170, 1);
    -moz-box-shadow: 0px 0px 1px 1px rgba(170, 170, 170, 1);
    box-shadow: 0px 0px 1px 1px rgba(170, 170, 170, 1);
}

.md-cardaction {
    display: inline-block;
    width: 100%;
}

#demo-cardactions .demo-phone-screen {
    position: static;
}

.md-cardaction .md-card .mbsc-padding {
    padding-bottom: 0;
}

.md-cardaction .md-card .mbsc-btn {
    margin-top: 0;
}

.md-cardaction .md-card h4 {
    font-size: 1.35em;
    margin-bottom: 6px;
}

.md-cardaction .md-card .mbsc-desc {
    font-size: 15px;
    margin-top: 0;
}

.demo-theme-wp:not(.demo-theme-wp-light) .md-card,
.demo-theme-android .md-card,
.demo-theme-ios-dark .md-card,
.demo-theme-android-holo:not(.demo-theme-android-holo-light) .md-card,
.demo-theme-mobiscroll-dark .md-card,
.demo-theme-material-dark .md-card {
    background: #212121;
    color: #fff;
    -webkit-box-shadow: 0px 0px 1px 1px rgba(60, 60, 60, .9);
    box-shadow: 0px 0px 1px 1px rgba(60, 60, 60, .9);
}

.md-card-bg {
    background-image: url("/content/img/demos/card_1.png");
    height: 280px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.md-card-bg-II {
    background-image: url("/content/img/demos/card_2.png");
}

.md-card-bg-III {
    background-image: url("/content/img/demos/card_3.png");
}

.md-card-bg-IV {
    background-image: url("/content/img/demos/card_4.png");
}

.md-card-bg-V {
    background-image: url("/content/img/demos/card_5.png");
}

.md-card-bg-VI {
    background-image: url("/content/img/demos/card_6.png");
}

.demo-theme-android-holo-light .md-share-btn.mbsc-btn,
.demo-theme-android-holo .md-share-btn.mbsc-btn {
    margin-left: 1em;
}

.demo-theme-wp .md-share-btn.mbsc-btn,
.demo-theme-wp-light .md-share-btn.mbsc-btn {
    margin-left: 1.25em;
}

.md-cardaction .md-card-text {
    position: relative;
    background: inherit;
}

.md-cardaction .md-card-text .md-card-like {
    position: absolute;
    top: 0;
    right: 1em;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-top: -25px;
    background: inherit;
    border-radius: 25px;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}

.md-cardaction .md-card-text .md-like-active {
    background: #4ECCC4;
    color: #f7f7f7;
}

.mbsc-material.md-cardaction .md-card-text .md-like-active {
    background: #009688;
}

.mbsc-android-holo.md-cardaction .md-card-text .md-like-active {
    background: #31c6e7;
}

.mbsc-ios-classic.md-cardaction .md-card-text .md-like-active,
.mbsc-ios.md-cardaction .md-card-text .md-like-active {
    background: #1272dc;
}

.mbsc-wp-light.md-cardaction .md-card-text .md-like-active,
.mbsc-wp.md-cardaction .md-card-text .md-like-active {
    background: #1a9fe0;
}

Listview - Variable Cards

Choose demo
// Use the settings object to change the theme
mobiscroll.settings = {
    theme: ''
};

$(function () {
    $('.card-li').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        stages: [{
            percent: -20,
            action: remove,
        }, {
            percent: 20,
            action: remove
        }, ]
    });

    function remove(event, inst) {
        inst.remove(event.target);

        return false;
    }
})
<div id="demo" class="md-card-variable" style="display:none" mbsc-form>
    <ul class="card-li" style="display: none;">
        <li>
            <div class="md-card md-weather-card">
                <div class="mbsc-padding">
                    <h3 class="md-weather-loc">San Francisco</h3>
                    <div class="md-weather">
                        <span class="md-weather-ic mbsc-ic mbsc-ic-meteo-sun"><span class="md-weather-txt">Sunny</span></span>
                        <span class="md-weather-temp">68°</span>
                    </div>
                    <div class="md-weather-forecast">
                        <div class="md-day">MON <br> <span class="mbsc-ic mbsc-ic-meteo-cloud2"></span> <br> 65° <br> 41°</div>
                        <div class="md-day">TUE <br> <span class="mbsc-ic mbsc-ic-meteo-cloud3"></span> <br> 60° <br> 31°</div>
                        <div class="md-day">WED <br> <span class="mbsc-ic mbsc-ic-meteo-sun"></span> <br> 80° <br> 65°</div>
                        <div class="md-day">THU <br> <span class="mbsc-ic mbsc-ic-meteo-cloudy"></span> <br> 76° <br> 61°</div>
                        <div class="md-day">FRI <br> <span class="mbsc-ic mbsc-ic-meteo-cloudy"></span> <br> 79° <br> 60°</div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="md-card md-travel-card">
                <div class="mbsc-padding">
                    <h4 class="md-header"><span>15 minutes</span> to Work</h4>
                </div>
                <img class="md-pic" src="/Content/img/demos/route.png" />
                <div class="mbsc-padding">
                    <button class="mbsc-btn-flat md-route" data-icon="ion-navigate">Navigate / 15 min. via Shotwell St</button>
                    <button class="mbsc-btn-flat md-route" data-icon="fa-rotate-left">Alternative route / 18 mins</button>
                </div>
            </div>
        </li>
        <li>
            <div class="md-card md-reminder-card">
                <div class=" mbsc-padding">
                    <div class="md-reminder-txt">New Flash episode</div>
                    <div class="md-reminder-txt">9:00 PM today</div>
                </div>
                <div class="md-rc-btn-cont">
                    <button class="md-rc-btn mbsc-btn-flat" data-icon="calendar">Show details</button>
                </div>
            </div>
        </li>
        <li>
            <div class="md-card md-bd-card">
                <img class="md-pic" src="/Content/img/demos/women_profile.png" />
                <div class="md-bd-desk mbsc-padding">
                    <h4>Mira Frank's <span class="mbsc-desc ">Birthday today</span></h4>
                </div>
            </div>
        </li>
        <li>
            <div class="md-card md-reminder-card">
                <div class=" mbsc-padding">
                    <div class="md-reminder-txt">Morning workout</div>
                    <div class="md-reminder-txt">Tomorrow Morning</div>
                </div>
                <div class="md-rc-btn-cont">
                    <button class="md-rc-btn mbsc-btn-flat" data-icon="calendar">Show details</button>
                </div>
            </div>
        </li>
        <li>
            <div class="md-card md-article-card">
                <img class="md-pic" src="/Content/img/demos/card_2.png" />
                <div class=" mbsc-padding md-ac-txt">
                    <div class="md-title">Best animal adventures for families</div>
                    <p class="mbsc-desc">A young panda tests his climbing skills at the Chengdu Research Base.</p>
                    <a>Read more...</a>
                </div>
            </div>
        </li>
        <li>
            <div class="md-card md-bd-card">
                <img class="md-pic" src="/Content/img/demos/man_profile.png" />
                <div class="md-bd-desk mbsc-padding">
                    <h4>George Lopez's <span class="mbsc-desc ">Birthday today</span></h4>
                </div>
            </div>
        </li>
        <li>
            <div class="md-card md-article-card">
                <img class="md-pic" src="/Content/img/demos/card_3.png" />
                <div class="mbsc-padding md-ac-txt">
                    <div class="md-title">Best places to test your survival skills</div>
                    <p class="mbsc-desc">A view across the Turnagain Arm on Alaska's Kenai Peninsula.</p>
                    <a>Read more...</a>
                </div>
            </div>
        </li>
        <li>
            <div class="md-card md-reminder-card">
                <div class=" mbsc-padding">
                    <div class="md-reminder-txt">Football </div>
                    <div class="md-reminder-txt">8:00 PM tomorrow</div>
                </div>
                <div class="md-rc-btn-cont">
                    <button class="md-rc-btn mbsc-btn-flat" data-icon="calendar">Show details</button>
                </div>
            </div>
        </li>
        <li>
            <div class="md-card md-article-card">
                <img class="md-pic" src="/Content/img/demos/card_1.png" />
                <div class="mbsc-padding md-ac-txt">
                    <div class="md-title">The world’s most extraordinary sleepovers</div>
                    <p class="mbsc-desc">Explore the azure depths with a stay at the Manta Resort's underwater room.</p>
                    <a>Read more...</a>
                </div>
            </div>
        </li>
    </ul>

</div>
.md-card-variable .md-card {
    position: relative;
    display: block;
    margin: 0;
    border-radius: 2px;
    background: #fafafa;
    text-align: left;
    color: #000;
    -webkit-box-shadow: 0px 0px 1px 1px rgba(170, 170, 170, 1);
    -moz-box-shadow: 0px 0px 1px 1px rgba(170, 170, 170, 1);
    box-shadow: 0px 0px 1px 1px rgba(170, 170, 170, 1);
}

.md-card-variable {
    display: inline-block;
    width: 100%;
}

.md-card-variable.mbsc-wp .mbsc-btn-flat .mbsc-btn-ic {
    display: inline-block;
    margin-right: 10px;
}


/* theme overides */

.md-card-variable .mbsc-lv-cont .mbsc-lv-item {
    border: 0;
}

.demo-theme-ios-dark .md-card-variable .md-rc-btn-cont,
.demo-theme-material-dark .md-card-variable .md-rc-btn-cont,
.demo-theme-mobiscroll-dark .md-card-variable .md-rc-btn-cont,
.demo-theme-android-holo .md-card-variable .md-rc-btn-cont,
.demo-theme-mobiscroll-dark .md-card-variable .md-rc-btn-cont,
.demo-theme-wp .md-rating-slider .md-rating {
    border-color: #333;
}

.demo-theme-ios-dark .md-card-variable .md-card,
.demo-theme-wp:not(.demo-theme-wp-light) .md-card-variable .md-card,
.demo-theme-android-holo:not(.demo-theme-android-holo-light) .md-card-variable .md-card,
.demo-theme-android .md-card-variable .md-card,
.demo-theme-sense-ui .md-card-variable .md-card,
.demo-theme-sense-dark .md-card-variable .md-card,
.demo-theme-mobiscroll-dark .md-card-variable .md-card,
.demo-theme-material-dark .md-card-variable .md-card {
    background: #212121;
    color: #fff;
    -webkit-box-shadow: 0px 0px 1px 1px rgba(60, 60, 60, .9);
    box-shadow: 0px 0px 1px 1px rgba(60, 60, 60, .9);
}


/* bd card*/

.md-card-variable .md-bd-card {
    height: 167px;
}

.md-card-variable .md-bd-card .md-bd-desk {
    padding-right: 150px;
}

.md-card-variable .md-bd-card .md-pic {
    position: absolute;
    right: 0;
    top: 0;
    width: 130px;
}

.md-card-variable .md-bd-desk span {
    display: inline-block;
    font-size: 14px;
}


/* reminder card */

.md-card-variable .md-reminder-txt {
    font-size: 20px;
}

.md-card-variable .md-reminder-txt:first-child {
    margin-bottom: .5em;
}

.md-card-variable .md-rc-btn-cont {
    border-top: 1px solid #bbb;
    padding: 1em;
}

.md-card-variable .md-rc-btn-cont .md-rc-btn {
    padding: 0;
    margin: 0;
}


/* article card */

.md-card-variable .md-article-card .md-ac-txt {
    padding-right: 110px;
}

.md-card-variable .md-article-card .md-pic {
    width: 90px;
    position: absolute;
    right: 1em;
    top: 1em;
}

.md-card-variable .md-article-card .md-title {
    font-size: 16px;
}

.md-card-variable .md-ac-txt .mbsc-desc {
    font-size: 14px;
}


/* weather card*/

.md-card-variable .md-weather-loc {
    margin-top: 0;
}

.md-card-variable .md-weather {
    overflow: hidden;
}

.md-card-variable .md-weather-ic {
    float: left;
    font-size: 58px;
}

.md-card-variable .md-weather-temp {
    float: right;
    font-size: 75px;
}

.md-card-variable .md-weather-txt {
    display: block;
    font-size: 18px;
}

.md-card-variable .md-weather-forecast {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding-top: 1em;
}

.md-card-variable .md-day {
    font-size: 14px;
    display: table-cell;
    text-align: center;
    height: 72px;
    line-height: 18px;
}


/* travel card */

.md-card-variable .md-travel-card .md-pic {
    width: 100%;
    min-height: 165px;
}

.md-card-variable .md-travel-card .md-header {
    margin: 0;
}

.md-card-variable .md-travel-card .md-route {
    display: block;
    text-transform: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
}

.md-card-variable .md-travel-card .md-route:first-child {
    margin-bottom: 1em;
}

Listview - Date Filtering

Choose demo
// Use the settings object to change the theme
mobiscroll.settings = {
    lang: '',
    theme: ''
};

$(function () {
    var now = new Date(),
        listview,
        range,
        lastDayOfWeek = lastday = new Date(now.getFullYear(), now.getMonth(), now.getDate() + (7 - now.getDay()));

    function filterItems(startDate, endDate, today) {
        var tempDate;
        $('.schedule-ul .mbsc-lv-item').removeClass('md-show-filter');

        $('.schedule-ul .mbsc-lv-item').each(function (i, v) {
            tempDate = new Date(+$(v).data('time'));
            if (today) {
                if (tempDate.getMonth() == now.getMonth() && tempDate.getDate() == now.getDate()) {
                    $(v).addClass('md-show-filter');
                }
            } else if (startDate <= tempDate && tempDate < endDate) {
                $(v).addClass('md-show-filter');
            }
        });

        if (!$('.md-show-filter').length) {
            listview.add(30, 'No schedule found in this range!');
        } else if (listview) {
            listview.remove(30);
        }
    }

    // init listview
    listview = $('.schedule-ul').mobiscroll().listview({
        enhance: true,
        swipe: false,
        striped: true,
        onInit: function (ev, inst) {
            // set default values
            $('.schedule-ul li').each(function (i, v) {
                var tempTime = new Date(now.getFullYear(), now.getMonth(), now.getDate() + (i > 6 ? (i - 6) : 0), now.getHours() + (i > 5 ? i * 2 : i), Math.round((now.getMinutes() + i * 5) / 5) * 5);

                $(v).attr('data-time', tempTime.getTime());
                $(v).find('.md-time').text(mobiscroll.util.datetime.formatDate('D d, hh:ii', tempTime));
            });

            filterItems(now, '', true);
        }
    }).mobiscroll('getInst');

    // init range
    range = $('.md-custom-range').mobiscroll().range({
        defaultValue: [new Date(now.getFullYear(), now.getMonth(), now.getDate() + 5), new Date(now.getFullYear(), now.getMonth(), now.getDate() + 10)],
        onSet: function (event, inst) {
            var selectedDates = inst.getVal();
            filterItems(new Date(selectedDates[0]), new Date(selectedDates[1]));
            $('.schedule-text').text(mobiscroll.util.datetime.formatDate('m/d', selectedDates[0]) + ' - ' + mobiscroll.util.datetime.formatDate('m/d', selectedDates[1]));
        }
    }).mobiscroll('getInst');

    $('.md-range-show').off().click(function () {
        range.show();
    });

    // checkbox change
    $('.md-schedule-call').change(function (ev) {
        if (ev.target.checked) {
            $('.schedule-ul').find('.md-call').removeClass('md-hide-call');
        } else {
            $('.schedule-ul').find('.md-call').addClass('md-hide-call');
        }
    });

    $('.md-schedule-meeting').change(function (ev) {
        if (ev.target.checked) {
            $('.schedule-ul').find('.md-meeting').removeClass('md-hide-meeting');
        } else {
            $('.schedule-ul').find('.md-meeting').addClass('md-hide-meeting');
        }
    });

    // segmented change
    $('.md-schedule-range').change(function (ev) {
        if (ev.target.value == 'today') {
            $('.schedule-text').text(ev.target.value);
            filterItems(now.getTime(), '', true);
        } else if (ev.target.value == 'week') {
            $('.schedule-text').text('this week');
            filterItems(now, lastDayOfWeek);
        } else {
            range.show();
        }
    });

})
<div class="md-schedule" style="display:none" mbsc-form>
    <label>
        Show Calls
        <input class="md-schedule-call"  type="checkbox" checked>
    </label>
    <label>
        Show Meetings
        <input class="md-schedule-meeting" type="checkbox" checked>
    </label>

    <label>
        Today
        <input type="radio" data-role="segmented" class="md-schedule-range" value="today" name="range" checked>
    </label>
    <label>
        this Week
        <input type="radio" data-role="segmented" class="md-schedule-range" value="week" name="range">
    </label>
    <label>
        Custom
        <input type="radio" data-role="segmented" class="md-schedule-range md-range-show" value="custom" name="range">
    </label>

    <div class="md-custom-range"></div>

    <ul class="schedule-ul" style="display: none;">
        <li>Schedule for <span class="schedule-text">today</span></li>
        <li data-icon="phone" class="md-item md-call md-today md-week">
            <h4>Owen Adams</h4>
            <h4>Sunholdings Corp.</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="location" class="md-item  md-meeting md-today md-week">
            <h4>Kian Phillips</h4>
            <h4>sol-flex Corp.</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="location" class="md-item md-meeting md-today md-week">
            <h4>Robert Bradley</h4>
            <h4>Silvermedia</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="phone" class="md-item md-call md-today md-week">
            <h4>Lydia Young</h4>
            <h4>Zimplex</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="location" class="md-item md-meeting md-week">
            <h4>Hollie Hudson</h4>
            <h4>Stanelectrics</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="location" class="md-item md-meeting md-week">
            <h4>Lynn Elliott</h4>
            <h4>Techhex</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="phone" class="md-item md-call md-week">
            <h4>Konner Murray</h4>
            <h4>HACME Corp.</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="location" class="md-item md-meeting md-week">
            <h4>Morgan Downs</h4>
            <h4>Itex Corp.</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="location" class="md-item md-meeting md-custom">
            <h4>Warren Boone</h4>
            <h4>Sumline</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="phone" class="md-item md-call md-custom">
            <h4>Charlie Jenkins</h4>
            <h4>Quaddoex</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="location" class="md-item md-meeting md-custom">
            <h4>Jillian Hobbs</h4>
            <h4>Indizap</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="phone" class="md-item md-call md-week">
            <h4>Donald Mccormick</h4>
            <h4>Zootrax</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="phone" class="md-item md-call md-week">
            <h4>Luke Harper</h4>
            <h4>Unihouse</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="phone" class="md-item md-call md-week">
            <h4>Leah West</h4>
            <h4>Ap-care</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="location" class="md-item md-meeting md-week">
            <h4>Billie Rivas</h4>
            <h4>Technoit Corp.</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="location" class="md-item md-meeting md-custom">
            <h4>Janae Diaz</h4>
            <h4>Plex-ron Corp.</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="phone" class="md-item md-call md-custom">
            <h4>Raquel Bentley</h4>
            <h4>Silicon-lax</h4>
            <span class="md-time"></span>
        </li>
        <li data-icon="location" class="md-item md-meeting md-custom">
            <h4>Harley Burke</h4>
            <h4>Lamzone</h4>
            <span class="md-time"></span>
        </li>
    </ul>

</div>
.md-schedule .md-time {
    position: absolute;
    right: 1.25em;
    top: 50%;
    margin-top: -9px;
}

.md-schedule .md-schedule-header {
    padding: .5em 1em;
}

.md-schedule .md-item {
    display: none;
}

.md-schedule .md-show-filter {
    display: block;
}

.md-custom-range {
    display: none;
}

.md-schedule .md-hide-meeting,
.md-schedule .md-hide-call {
    display: none;
}

Listview - Event handlers

Choose demo
$(function () {

    var ids = 6;

    $('#demo').mobiscroll().listview({
        theme: '',
        lang: '',
        display: '',
        sortable: true,
        iconSlide: true,
        striped: true,
        stages: [{
            percent: 25,
            color: 'crimson',
            icon: 'checkmark',
            text: 'Complete',
            action: function (event, inst) {
                $('.md-wo-status', event.target).text('Completed');
            }
        }, {
            percent: -50,
            color: 'red',
            icon: 'remove',
            text: 'Delete',
            confirm: true,
            action: function (event, inst) {
                inst.remove(event.target);
                return false;
            }
        }, {
            percent: 50,
            color: 'green',
            icon: 'plus',
            text: 'Spawn',
            undo: true,
            action: function (event, inst) {
                inst.add(++ids, 'Work order #000' + ids + ' created from WO #000' + $(event.target).attr('data-id') + '<div class="md-wo-status">Assigned</div>', event.index + 1);
            }
        }, {
            percent: -25,
            color: 'olive',
            icon: 'clock',
            text: 'Pending',
            action: function (event, inst) {
                $('.md-wo-status', event.target).text('Pending');
            }
        }],
        onItemAdd: function () {
            // Your custom event handler goes here
        },
        onItemRemove: function () {
            // Your custom event handler goes here
        },
        onInit: function (event, inst) {
            // Your custom event handler goes here
        },
        onItemTap: function (event, inst) {
            // Your custom event handler goes here
        },
        onNavEnd: function (event, inst) {
            // Your custom event handler goes here
        },
        onNavStart: function (event, inst) {
            // Your custom event handler goes here
        },
        onSlideEnd: function (event, inst) {
            // Your custom event handler goes here
        },
        onSlideStart: function (event, inst) {
            // Your custom event handler goes here
        },
        onSort: function (event, inst) {
            // Your custom event handler goes here
        },
        onSortChange: function (event, inst) {
            // Your custom event handler goes here
        },
        onSortEnd: function (event, inst) {
            // Your custom event handler goes here
        },
        onSortStart: function (event, inst) {
            // Your custom event handler goes here
        },
        onSortUpdate: function (event, inst) {
            // Your custom event handler goes here
        },
        onStageChange: function (event, inst) {
            // Your custom event handler goes here
        }
    });


});
<ul id="demo" class="md-wo-list" style="display:none">
    <li data-id="1">Work order #0001
        <div class="md-wo-status">Assigned</div>
    </li>
    <li data-id="2">Work order #0002
        <div class="md-wo-status">Assigned</div>
    </li>
    <li data-id="3">Work order #0003
        <div class="md-wo-status">Assigned</div>
    </li>
    <li data-id="4">Work order #0004
        <div class="md-wo-status">Assigned</div>
    </li>
    <li data-id="5">Work order #0005
        <div class="md-wo-status">Assigned</div>
    </li>
    <li data-id="6">Work order #0006
        <div class="md-wo-status">Assigned</div>
    </li>
</ul>
Clear event log
EVENTS FIRED: 
light
dark
light
dark

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

Customize & try demos locally
Please sign in or start a free trial to download

What is your main focus at the moment?

Javascript
jQuery
AngularJS
Angular
Ionic
React
Other
Select a framework
Select a framework
Email address
Select a framework

Install demo in your app
Follow steps to install mobiscroll and use example

Install Mobiscroll for Ionic

Step 1.

Install the Mobiscroll CLI from npm (you might need sudo access).

Copy command
$ npm install -g @mobiscroll/cli

Step 2.

Run the config command in the root folder of the Ionic project.
You will have to enter your email address/user and password (set password) of your mobiscroll account.
If you don't have an app, create a starter with the Ionic CLI $ ionic start myStarterApp tabs

Copy command
$ mobiscroll config ionic
If your app is using lazy loading, run $ mobiscroll config ionic --lazy instead.

If Mobiscroll is installed in your app, copy the demo code from below.
The HTML goes into markup, the Typescript into the TS file and the CSS into the page stylesheet (scss file). If you need to install mobiscroll use the CLI and follow these two simple steps.

Copy TS
Copy HTML
Copy CSS

Run ionic serve in the root folder of your app.

Copy command
$ ionic serve
Thanks for downloading
Try and customize the app locally

Extract the zip file and run the project like any Ionic app. Make sure to have Ionic CLI installed and open the terminal in the app root folder.

Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ionic serve

Let us know if we can help and enjoy!

Change your password
Need to update your password? Enter and hit the button below
New Password Required Enter at least 6 characters Please avoid dangerous characters like '<' or '&'
Change your password
Need to update your password? Enter and hit the button below

Your password has been changed!

Thanks for downloading
Customize demos locally

Everything is set up so that you can dig in right away and start exploring.

We have set up a trial so that you can try the demos locally.

Please extract the zip file and simply open the demos in your favorite browser. For instructions on how to install Mobiscroll in your project follow this guide.


Let us know if we can help and enjoy!

Thanks for downloading
Customize demos locally

The demos are using an in-browser TypeScript transpiler app as base. Please extract the zip file and open the index.html on your local development server.

Alternatively you can use live-server. For installation and usage, open a terminal window and follow these steps.

Step 1. Install live-server
$ npm install -g live-server
Step 2. Start server & run app
$ live-server

Let us know if we can help and enjoy!

Thanks for downloading
Customize demos locally

Everything is set up so that you can dig in right away and start exploring.

We have set up a trial so that you can try the demos locally.

The easiest way to get started is to follow the installation steps and by grabbing the code directly from the demo page. Let us know if we can help and enjoy!

You'll find a fully functional Kitchen-sink Ionic app in the zip file.

Thanks for downloading
Customize demos locally

Everything is set up so that you can dig in right away and start exploring.

We have set up a trial so that you can try the demos locally.

The demos are using Babel's in-browser ES6 and JSX transformer. Please extract the zip file and open the demos in your browser.


Let us know if we can help and enjoy!

Demos
Controls
Calendar 17
Cards 9
Color 8
Date & Time 12
Event Calendar 7
Forms 23
Image 5
Listview 18
Measurement 14
Navigation 6
Number 6
Numpad 12
Option List 4
Range 14
Scroller 5
Scrollview 4
Select 11
Styling 4
Timer 4
Timespan 5
Treelist 5
Widget 8
Demo Apps 5
Theme Select
Mobiscroll
Mobiscroll Dark
Material
Material Dark
iOS
iOS Dark
Windows
Windows Dark
Display Mode
Language Locale
See other demos and change options
Theme
Display
Locale
See other demos