Contents

Page

About

The page component adds basic styling to a container, based on the theme being used, like background and typography. Additionally, if a menustrip is also being used as top and/or bottom navigation, all pages get a top and bottom padding accordingly to accomodate the menustrip without overlapping the content.

Pages are required to be the direct descendants of the body element (or the element specified by the context setting).

Initialization

Auto initialization

To auto-initialize the page elements, simply put the mbsc-page attribute on the container element.

<div id="mypage" mbsc-page>
    <div class="mbsc-padding">
        <h1>Page Title</h1>
        <p>Page content.</p>
    </div>
</div>

The initialization will use the default options. The defaults can be set in the mobiscroll.settings object, after the Mobiscroll scripts are loaded, but before the page load (document ready) event is fired, in order to have effect on the page initialization.

mobiscroll.settings = {
    theme: 'ios',
    lang: 'de'
};

If the page container is added later to the DOM, e.g. with an Ajax page load, a custom event named mbsc-enhance needs to be triggered in order to initialize the dynamically added content.
When the mbsc-enhance event is triggered on a DOM element, all elements inside with the mbsc-page attribute will be initialized (including itself).

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        var tempElement = document.createElement('div');

        tempElement.innerHTML = xhr.responseText;

        while (tempElement.firstChild) {
            document.body.appendChild(tempElement.firstChild);
        }

        tempElement.parentNode.removeChild(tempElement);

        document.body.dispatchEvent(new Event('mbsc-enhance')); 
    }
}
xhr.open('GET', '/mypage', true);
xhr.send();
    

Manual Initialization

The page can also initialized manually, just like any other Mobiscroll component.

HTML
<div id="mypage">
    <div class="mbsc-padding">
        <h1>Page Title</h1>
        <p>Page content.</p>
    </div>
</div>
Javascript
mobiscroll.page('#mypage', {
    theme: 'material'
});

If the form container is added later to the DOM, e.g. with an Ajax page load, call the initialization right after the content is appended in the DOM.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        var tempElement = document.createElement('div');

        tempElement.innerHTML = xhr.responseText;

        while (tempElement.firstChild) {
            document.body.appendChild(tempElement.firstChild);
        }

        tempElement.parentNode.removeChild(tempElement);

        mobiscroll.page('#mypage', {
            theme: 'mobiscroll'
        });
    }
}
xhr.open('GET', '/mypage', true);
xhr.send();

Options

Name Type Default value Description
context String or HTMLElement 'body' Context in which mobiscroll is appended and positioned (if not inline). Can be a selector string or a DOM element.
theme String undefined Sets the visual appearance of the component.

If it is 'auto' or 'undefined', the theme will automatically be chosen based on the platform. If the theme for the specific platform is not present, it will revert to the Mobiscroll theme.

Supplied themes:
  • 'android-holo' - Android 4.x theme
  • 'android-holo-light' - Android 4.x theme (light version)
  • 'ios' - new iOS 7, 8, 9 theme
  • 'material' - Material theme (Android 5.x)
  • 'material-dark' - Material dark theme (Android 5.x)
  • 'mobiscroll' - Mobiscroll theme
  • 'mobiscroll-dark' - Mobiscroll Dark theme
  • 'wp' - Windows Phone Metro UI theme
  • 'wp-light' - Windows Phone Metro UI theme (light version)
It's possible to create custom themes in css by prefixing any css class used in the page markup with the theme name and the 'mbsc' prefix, e.g.: .mbsc-my-theme .dwwr { /* My CSS */ }, and set the theme option to 'my-theme'
Make sure that the theme you set is included in the downloaded package.

Events

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

Parameters

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

Example

mobiscroll.page('#mobiscroll', {
    onInit: function (event, inst) {
    }
});

Methods

Name Description
getInst() Returns the object instance.

Returns: Object

  • The object instance.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getInst();
option(options) Sets one or more options for the component.

Parameters

  • options: Object - A map of option-value pairs to set.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});
tap(el, handler) Attaches the handler function to the tap event of element el.

Parameters

  • el: Object - The element with tap event.
  • handler: Function - If the action was initiated with touch event, handler is called on touchend, otherwise on click.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

Localization

Name Type Default value Description
lang String 'en-US' Language of the component. Based on the language string the component loads the language based default settings from the language modules.
Supported languages:
  • 'en' or 'en-US' or undefined - English
  • 'en-UK' or 'en-GB' - English (UK)
  • 'cs' - Czech
  • 'zh' - Chinese
  • 'da' - Danish
  • 'de' - German
  • 'es' - Spanish
  • 'fa' - Farsi
  • 'fr' - French
  • 'it' - Italian
  • 'ja' - Japanese
  • 'hu' - Hungarian
  • 'nl' - Dutch
  • 'no' - Norwegian
  • 'pl' - Polish
  • 'pt-BR' - Brazilian Portuguese
  • 'pt-PT' - European Portuguese
  • 'ro' - Romanian
  • 'ru' - Russian
  • 'ru-UA' - Russian (UA)
  • 'sk' - Slovak
  • 'sv' - Swedish
  • 'tr' - Turkish
rtl Boolean false Right to left display.

Typography

Typography variations can be used to text styling.

Ultra-bold
<p class="mbsc-ultra-bold">This is a paragraph with ultra-bold font-weight </p>
Bold
<p class="mbsc-bold">This is a paragraph with bold font-weight </p>
Medium
<p class="mbsc-medium">This is a paragraph with medium font-weight </p>
Light
<p class="mbsc-light">This is a paragraph with light font-weight </p>
Thin
<p class="mbsc-thin">This is a paragraph with thin font-weight </p>
Italic
<p class="mbsc-italic">This is a paragraph with italic font-style </p>
Padding
<p class="mbsc-padding">This is a paragraph with padding </p>
Left align
<p class="mbsc-align-left">This is a paragraph with text aligned left </p>
Right align
<p class="mbsc-align-right">This is a paragraph with text aligned right </p>
Center align
<p class="mbsc-align-left">This is a paragraph with centered text </p>
Preorder available for Ember JS
What you'll get:
- Exclusive Early Beta Access
- Show your interest in the product. Based on the preorders we'll set the development and shipping priorities
- Get access to the full Framework until we ship
- Support and Maintenance is on us until we release the Mobiscroll for Ember
- We believe in delivering great products so if for any reason you are not satisfied, you'll get a full refund