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.
// Mobiscroll 3.x
buttons: ['set', 'clear', 'cancel']
// 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. |
Menustrip
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.
// Mobiscroll 3.x
$('#options').mobiscroll().menustrip({
select: 'single'
});
// 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.
// Mobiscroll 3.x
$('#scrollview').mobiscroll().menustrip({
type: 'tabs',
layout: 1,
display: 'inline',
paging: true,
select: 'off',
threshold: 15
});
// 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).
// 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'
});
// 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.