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

Mobiscroll 4.0 Upgrade Guide

Overview

Unlike version 3.0, the 4.0 version does not introduce major changes, however it removes a number of components, a few themes and framework integrations that lost their relevance over the time. Besides that, the Menustrip was broken into several, more focused and easier to use components.

Below is the list of the breaking changes introduced with Mobiscroll 4.0.

Frameworks

Knockout integration is not maintained anymore. Please use the plain Javascript version instead.

ASP.NET MVC server controls are not maintained anymore. Please use a different version of Mobiscroll.

Themes

jQuery Mobile theme (jqm) is not maintained anymore. Mobiscroll for jQuery is fully compatible with jQuery Mobile, use any other available theme.

Android Holo (android-holo) theme is not maintained anymore. Mobiscroll is supporting Android 4.1+, use any other theme available.

Windows Phone (wp) theme has been renamed to windows. Going forward use windows for the light theme and windows-dark for the dark version.

Popups

For every popup component buttons will be rendered in the order they are specified in the buttons setting. This change is applicable to all components where custom buttons are being used.

Old code
// Mobiscroll 3.x
buttons: ['set', 'clear', 'cancel']
New code
// Mobiscroll 4.x
buttons: ['cancel', 'clear', 'set']

Calendar

The calendar view has been completely overhauled. A major refactoring has been performed including code and markup simplification. No breaking changes were introduced in the JS API, however the markup structure and CSS class names have changed, so if the calendar was customized using CSS, the styles needs to be revisited.

List of changed CSS classes:

Old CSS class New CSS class Element
.mbsc-cal-pnl - Removed.
.mbsc-cal-pnl-i - Removed.
.mbsc-cal-tab-i - Removed.
.mbsc-cal-tab-sel .mbsc-cal-tab.mbsc-selected Calendar selected tab styling.
.mbsc-cal-header .mbsc-cal-hdr Calendar header, displaying the selected year and month, and arrow buttons.
.mbsc-cal-btnc - Removed.
.mbsc-cal-btnw .mbsc-cal-btn-w Wrapper containing the month and year, along with the arrow buttons.
.mbsc-cal-btn-txt - Removed.
.mbsc-cal-year-c .mbsc-cal-year-picker Year picker container.
.mbsc-cal-month-c .mbsc-cal-month-picker Month picker container.
.mbsc-cal-sc-c
.mbsc-cal-anim-c
.mbsc-cal-scroll-c Scroller container for the month, year and day picker.
.mbsc-cal-sc
.mbsc-cal-anim
.mbsc-cal-scroll Scrolled element of the month, year and day picker.
.mbsc-cal-sc-p .mbsc-cal-slide One slide of the month, year and day picker.
.mbsc-cal-sc-tbl .mbsc-cal-table Table layout for the month, year and day picker.
.mbsc-cal-sc-row .mbsc-cal-row Table row layout for the month, year and day picker.
.mbsc-cal-sc-cell .mbsc-cal-cell Table cell layout for the month, year and day picker.
.mbsc-cal-sc-cell-i .mbsc-cal-cell-i Inner element of the month, year and day picker table cells.
.mbsc-cal-m-c .mbsc-cal-day-picker Day picker container.
.mbsc-cal-day-fg .mbsc-cal-day-date Calendar cell containing the day's date.
.mbsc-cal-day-sel .mbsc-cal-day.mbsc-selected Selected date.
.mbsc-cal-day-frame .mbsc-cal-day:after Used to style dates in the selected range between start and end dates.
.mbsc-cal-day-m .mbsc-cal-marks Container for marks.
.mbsc-cal-day-m-t - Removed.
.mbsc-cal-txt-c - Removed.
.mbsc-cal-day-txt .mbsc-cal-txt Day label styling.

Menustip is not maintained as a stand-alone component. Functionality has been broken out into three focused components. Use the Scrollview, Navigation and Optionlist instead.

Option list

The component has been created with the goal of making single and multiple value selection easy in a horizontally scrollable list of icons, labels and their combination. The functionality was available in the Menustrip, which was migrated and the API was simplified.

Old code
// Mobiscroll 3.x
$('#options').mobiscroll().menustrip({
    select: 'single'
});
New code
// Mobiscroll 4.x
$('#options').mobiscroll().optionlist({
    select: 'single'
});

Scrollview

New component was added to help in creating scrollable layouts. Horizontal scrolling is supported at the moment.

Old code
// Mobiscroll 3.x
$('#scrollview').mobiscroll().menustrip({
    type: 'tabs',
    layout: 1,
    display: 'inline',
    paging: true,
    select: 'off',
    threshold: 15
});
New code
// Mobiscroll 4.x
$('#scrollview').mobiscroll().scrollview({
    layout: 1,
    paging: true,
    threshold: 15
});

Navigation

The component has functionality that has been broken out of the Menustrip. It provides quick and easy solutions to three common navigation patterns: tabs, bottom navigation and the hamburger menu (use the last one with responsibility).

Old code
// Mobiscroll 3.x
// Tab navigation
$('#nav').mobiscroll().menustrip({
    type: 'tabs',
    display: 'top',
    select: 'single'
});

// Bottom navigation
$('#nav').mobiscroll().menustrip({
    type: 'options',
    display: 'bottom',
    select: 'single'
});
New code
// Mobiscroll 4.x
// Tab navigation
$('#nav').mobiscroll().nav({
    type: 'tab'
});

// Bottom navigation
$('#nav').mobiscroll().nav({
    type: 'bottom'
});

Rating

Rating and grading scroller component is not maintained anymore. Use the Image or Scroller components instead.