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

Cards

Card component contain and organize your information. Cards contains unique related data, for example, a photo, text, and form element all about a single subject.

Initialization

Auto initialization

To auto-initialize the card elements, simply put the mbsc-card attribute on the container element. The card elements inside the container will be automatically initialized when the page is loaded.

<div mbsc-card>
    <div class="mbsc-card-header">
        <h2 class="mbsc-card-title">Title</h2>
        <h3 class="mbsc-card-subtitle">Subtitle</h3>
    </div>
    <div class="mbsc-card-content">
        This is a text within the content block.
    </div>
    <div class="mbsc-card-footer">This is a footer</div>
</div>

Manual Initialization

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

HTML
<div>
    <div class="mbsc-card-header">
        <h2 class="mbsc-card-title">Title</h2>
        <h3 class="mbsc-card-subtitle">Subtitle</h3>
    </div>
    <div class="mbsc-card-content">
        This is a text within the content block.
    </div>
    <div class="mbsc-card-footer">This is a footer</div>
</div>
Javascript
$(function () {
    $('#my-card').mobiscroll().card({
        theme: 'material'
    });
});

If the card 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.

Content types

Cards support a wide variety of content, including images, text, list, form elements and more. Below are examples of what’s supported.

Card layout

Cards are primarily a CSS component. To use a basic card, follow this structure:

<div mbsc-card>
    <div class="mbsc-card-header">
        <h2 class="mbsc-card-title">Title</h2>
        <h3 class="mbsc-card-subtitle">Subtitle</h3>
    </div>
    <div class="mbsc-card-content">
        This is a text within the content block.
    </div>
    <div class="mbsc-card-footer">
        This is a footer.
    </div>
</div>

Where

Images in cards

The images which are supported by the mobiscroll are supported inside the card component as well. By default the images inside a card are displayed with full width.

Avatar image example
<div mbsc-card>
    <div class="mbsc-card-header">
        <img src="women_profile.png" class="mbsc-avatar">
        <h5 class="mbsc-card-title">Johana Doe</h5>
        <div class="mbsc-card-subtitle"> at 4:55 PM</div>
    </div>
    <img src="https://mobiscroll.com/content/img/demos/card_4.png">
    <div class="mbsc-card-content">
       Card content...
    </div>
    <div class="mbsc-card-footer">
        <button class="mbsc-btn-flat" data-icon="line-heart">Like</button>
    </div>
</div>
Fluid image example
<div mbsc-card>
    <img src="https://mobiscroll.com/content/img/demos/card_4.png">
    <div class="mbsc-card-content">
       Card content...
    </div>
    <div class="mbsc-card-footer">
        <button class="mbsc-btn-flat" data-icon="line-heart">Button</button>
    </div>
</div>
Thumbnail image example
<div mbsc-card>
    <img class="mbsc-img-thumbnail mbsc-pull-left" src="https://mobiscroll.com/content/img/demos/card_4.png" style="width: 100px; height:100px;">
    <div class="mbsc-card-header">
        <div class="mbsc-card-title">Article title</div>
        <div class="mbsc-card-subtitle">Subtitle</div>
    </div>
    <div class="mbsc-card-content">
        Article text...
    </div>
</div>

Using form elements

Mobiscroll form elements will be automatically enhanced inside the card container.

Form elements example
<div mbsc-card>
    <div class="mbsc-card-header">
        <div class="mbsc-card-title">Groceries</div>
    </div>
    <div class="mbsc-card-content">
        <label>
            <input type="checkbox" >
            almond milk
        </label>
        <label>
            <input type="checkbox" >
            coconut water
        </label>
        <label>
            <input type="checkbox" checked>
            cucumber
        </label>
        <label>
            <input type="checkbox" >
            green apples
        </label>
    </div>
    <div class="mbsc-card-footer">
        <button class="mbsc-btn-flat">Share</button>
    </div>
</div>

Using with Listview

The Listview can be used inside the card as in any other container. If a card component is initialized on a Listview item, that will be styled as a card. In this case the list container will need a mbsc-card-list class.

Cards intilized on Listview items
<ul class="list-check mbsc-card-list">
    <li mbsc-card>
        <div class="mbsc-card-header">
            <img src="women_profile.png" class="mbsc-avatar">
            <h5 class="mbsc-card-title mbsc-bold">Johana Doe</h5>
            <div class="mbsc-card-subtitle"> at 4:55 PM</div>
        </div>
        <div class="mbsc-card-content">
            Here will be the content text.
        </div>
    </li>
    <li mbsc-card>
        <img class="mbsc-img-thumbnail mbsc-pull-right" src="card_3.png">
        <div class="mbsc-card-content">
            <div class="mbsc-card-title">Article card</div>
            Article content
        </div>
        <div class="mbsc-card-footer">
            <button class="mbsc-btn-flat">Button</button>
        </div>
    </li>
</ul>

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:
  • 'bootstrap' - Bootstrap themes
  • '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
  • 'windows' - Windows theme
  • 'windows-dark' - Windows theme (dark version)
It's possible to create custom themes in css by prefixing any css class used in the cards 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.

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
// With selector
$('#mobiscroll').mobiscroll('getInst');

// With instance
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
// With selector
$('#mobiscroll').mobiscroll('option', {
    display: 'bottom',
    lang: 'de'
});

// With instancee
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
// With selector
$('#mobiscroll').mobiscroll('tap', $('#element'), function () { alert("It's a tap!"); });

// With instance
mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });