ModernWeb Javascript is DEPRECATED !

ModernWeb Javascript components should be not used in any project !
You should rather use ModernWeb AngularJS to add a dynamic behavior.

Behavior

You can add modern dynamic behavior to any element

Clickable Behavior

You can add a clickable behavior on a element.
To add a clickable behavior, you must add the data attribute data-mw-clickable' on a element.
To customize your clickable behavior, you must add options with the following syntax data-mw-clickable='{"keyOption": "stringValue", "keyOption": numberValue, "keyOption": booleanValue}'.

Option Type default description
isEnabled boolean true

This option defines if the element is clickable. 

<div class="mw-tiles mw-theme-light" tabindex="100">
    <div class="mw-tile mw-wide" tabindex="1000" data-mw-clickable></div>
    <div class="mw-tile mw-medium" tabindex="1001" data-mw-clickable='{"isEnabled": true}'></div>
    <div class="mw-tile mw-medium" tabindex="1002" data-mw-clickable='{"isEnabled": false}'></div>
</div>

Checkable Behavior

You can add a checkable behavior on a element.
To add a checkable behavior, you must add the data attribute data-mw-checkable on a element.
To customize your checkable behavior, you must add options with the following syntax data-mw-checkable='{"keyOption": "stringValue", "keyOption": numberValue, "keyOption": booleanValue}'.

Option Type default description
isEnabled boolean true

This option defines if the element is checkable.

isChecked boolean false

This option defines if the element is selected.

group string null

This option defines if the element is in group, only one element can be checked at once.

name string null

This option binds the element with an input to be able to submit the checked value.
The input must be a child of checkable element. 

<div class="mw-tiles mw-theme-light mw-cols-5" tabindex="100">
    <div class="mw-tile mw-large" tabindex="1000" data-mw-checkable></div>
    <div class="mw-tile mw-wide" tabindex="1001" data-mw-checkable='{"isEnabled": true}'></div>
    <div class="mw-tile mw-medium" tabindex="1002" data-mw-checkable='{"isEnabled": false}'></div>
    <div class="mw-tile mw-medium" tabindex="1003" data-mw-checkable='{"isEnabled": true, isChecked: true}'></div>
    <div class="mw-tile mw-medium" tabindex="1004" data-mw-checkable='{"isEnabled": false, isChecked: true}'></div>
    <div class="mw-tile mw-medium" tabindex="1005" data-mw-checkable='{"isChecked": true}'></div>
</div>

<div class="mw-tiles mw-theme-light mw-cols-3" tabindex="110">
    <div class="mw-tile mw-medium" tabindex="1100" data-mw-checkable='{"group": "groupA", "name": "GroupA"}'>
        <input type="radio" name="GroupA" value="A1" hidden />
    </div>
    <div class="mw-tile mw-medium" tabindex="1101" data-mw-checkable='{"group": "groupA", "name": "GroupA", isChecked: true}'>
        <input type="radio" name="GroupA" value="A2" hidden />
    </div>
    <div class="mw-tile mw-medium" tabindex="1102" data-mw-checkable='{"group": "groupA", "name": "GroupA"}'>
        <input type="radio" name="GroupA" value="A3" hidden />
    </div>
</div>

Slidable Behavior

You can add a slidable behavior on a element.
To add a slidable behavior, you must add the data attribute data-mw-slidable on a element.
You must set too data-mw-slides on the element parent of slides.
You can customize your slidable with theses options : effect, delay, type, reverseEffect, state.
To customize your slidable behavior, you must add options with the following syntax data-mw-slidable='{"keyOption": "stringValue", "keyOption": numberValue, "keyOption": booleanValue}'.

Option Type default description
isEnabled boolean true

This option defines if the element is slidable.

effect string push-left

This option defines the animation effect.
You can choose an effect in this list; none, rotate-horizontal, rotate-vertical, fade, push-left, push-right, push-top, push-bottom, cover-left, cover-right, cover-top, cover-bottom, uncover-left, uncover-right, uncover-top, uncover-bottom.

delay number 5000 This option defines the delay between each transition if the type is set to automatic.
type string automatic This option defines the type of Tile live. The type can be automatic or manual.
reverseEffect boolean false This option defines if the animation must be invesed when a previous action is triggered.
state string play This option defines the state of tile live. The state can be play, pause or stop.

TileLive 1

TileLive 2

TileLive 3

TileLive 4

TileLive 5

<div class="tiles adaptive">
    <div class="tile wide live" id="demo-tile-live-1" data-mw-slidable="{effect: 'uncover-top', delay: 3000}">
        <div class="mw-inner" data-mw-slides>
            <div class="inner" id="tile-live-11">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-1.png');"></div>
                <h4 class="title">TileLive 1</h4>
            </div>
            <div class="inner" id="tile-live-12">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-2.png');"></div>
                <h4 class="title">TileLive 2</h4>
            </div>
            <div class="inner" id="tile-live-13">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-3.png');"></div>
                <h4 class="title">TileLive 3</h4>
            </div>
            <div class="inner" id="tile-live-14">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-4.png');"></div>
                <h4 class="title">TileLive 4</h4>
            </div>
            <div class="inner" id="tile-live-15">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-5.png');"></div>
                <h4 class="title">TileLive 5</h4>
            </div>
        </div>
    </div>
</div>

Slidable Behavior Controls

You can add controls to a slidable element.
To add a prev control and a next control, you must add the data attribute data-mw-prev and data-mw-next on your control element.
To add an indicator control, you must add the data attribute data-mw-page on the control element.
You must add too a data-mw-target="*" on the control parent element, * specifies the id of the slidable element.

TileLive 1

TileLive 2

TileLive 3

TileLive 4

TileLive 5

<div class="tiles adaptive">
    <div class="tile wide live" id="demo-tile-live-2" data-mw-slidable="{effect: 'push-left', delay: 5000, reverseEffect: true, type: 'manual'}">
        <div class="mw-inner" data-mw-slides>
            <div class="inner" id="tile-live-21">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-1.png');"></div>
                <h4 class="title">TileLive 1</h4>
            </div>
            <div class="inner" id="tile-live-22">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-2.png');"></div>
                <h4 class="title">TileLive 2</h4>
            </div>
            <div class="inner" id="tile-live-23">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-3.png');"></div>
                <h4 class="title">TileLive 3</h4>
            </div>
            <div class="inner" id="tile-live-24">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-4.png');"></div>
                <h4 class="title">TileLive 4</h4>
            </div>
            <div class="inner" id="tile-live-25">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-5.png');"></div>
                <h4 class="title">TileLive 5</h4>
            </div>
        </div>
        <div class="controls" data-mw-target="demo-tile-live-2">
            <div class="control prev" data-mw-prev><i class="fa fa-chevron-left"></i></div>
            <div class="control next" data-mw-next><i class="fa fa-chevron-right"></i></div>
            <div class="indicators bullets">
                <ul class="u-list-unstyled list-inline">
                    <li class="indicator active" data-mw-page><a href="#tile-live-1"></a></li>
                    <li class="indicator" data-mw-page><a href="#tile-live-2"></a></li>
                    <li class="indicator" data-mw-page><a href="#tile-live-3"></a></li>
                    <li class="indicator" data-mw-page><a href="#tile-live-4"></a></li>
                    <li class="indicator" data-mw-page><a href="#tile-live-5"></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Custom indicators

  • thumbnail
  • thumbnail
  • thumbnail
  • thumbnail
  • thumbnail

TileLive 1

TileLive 2

TileLive 3

TileLive 4

TileLive 5

<div class="controls" data-mw-target="demo-tile-live-3">
    <div class="indicators" style="float: left;">
        <ul class="u-list-unstyled">
            <li class="indicator active" data-mw-page><a href="#tile-live-31"><img alt="thumbnail" src="~/resources/Image/tile-live-1.png" style="width: 24px; height: 24px;" /></a></li>
            <li class="indicator" data-mw-page><a href="#tile-live-32"><img alt="thumbnail" src="~/resources/Image/tile-live-2.png" style="width: 24px; height: 24px;" /></a></li>
            <li class="indicator" data-mw-page><a href="#tile-live-33"><img alt="thumbnail" src="~/resources/Image/tile-live-3.png" style="width: 24px; height: 24px;" /></a></li>
            <li class="indicator" data-mw-page><a href="#tile-live-34"><img alt="thumbnail" src="~/resources/Image/tile-live-4.png" style="width: 24px; height: 24px;" /></a></li>
            <li class="indicator" data-mw-page><a href="#tile-live-35"><img alt="thumbnail" src="~/resources/Image/tile-live-5.png" style="width: 24px; height: 24px;" /></a></li>
        </ul>
    </div>
</div>
<div class="tiles adaptive">
    <div class="tile wide live" id="demo-tile-live-3" data-mw-slidable="{effect: 'push-left', reverseEffect: true, type: 'automatic'}">
        <div class="mw-inner" data-mw-slides>
            <div class="inner" id="tile-live-31">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-1.png');"></div>
                <h4 class="title">TileLive 1</h4>
            </div>
            <div class="inner" id="tile-live-32">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-2.png');"></div>
                <h4 class="title">TileLive 2</h4>
            </div>
            <div class="inner" id="tile-live-33">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-3.png');"></div>
                <h4 class="title">TileLive 3</h4>
            </div>
            <div class="inner" id="tile-live-34">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-4.png');"></div>
                <h4 class="title">TileLive 4</h4>
            </div>
            <div class="inner" id="tile-live-35">
                <div class="bg-image stretch" style="background-image: url('../../Resources/Image/tile-live-5.png');"></div>
                <h4 class="title">TileLive 5</h4>
            </div>
        </div>
        <div class="controls" data-mw-target="demo-tile-live-3">
            <div class="control prev" data-mw-prev><i class="fa fa-chevron-left"></i></div>
            <div class="control next" data-mw-next><i class="fa fa-chevron-right"></i></div>
        </div>
    </div>
</div>
<div style="clear: both"></div>

Tiles Example

group 1
group 1
group 2
group 3
<div class="tiles live groups fluid rows-1 cols-3" id="demo-tiles-live-group-2" data-mw-slidable="{effect: 'push-left', reverseEffect: true, type: 'manual'}">
    <div class="group-5" data-mw-slides>
        <div class="group" id="tiles-live-group-21">
            <div class="tile medium"><div class="inner"><span class="label bg-blue-light">group 1</span></div></div>
            <div class="tiles medium">
                <div class="tile small"></div>
                <div class="tile small"></div>
                <div class="tile small"></div>
                <div class="tile small"></div>
            </div>
            <div class="tile medium"><div class="inner"><span class="label bg-blue-light">group 1</span></div></div>
        </div>
        <div class="group" id="tiles-live-group-22">
            <div class="tile wide"><div class="inner"><span class="label bg-purple-dark">group 2</span></div></div>
            <div class="tiles medium">
                <div class="tile small"></div>
                <div class="tile small"></div>
                <div class="tile small"></div>
                <div class="tile small"></div>
            </div>
        </div>
        <div class="group" id="tiles-live-group-23">
            <div class="tiles medium">
                <div class="tile small"></div>
                <div class="tile small"></div>
                <div class="tile small"></div>
                <div class="tile small"></div>
            </div>
            <div class="tile wide"><div class="inner"><span class="label bg-green-dark">group 3</span></div></div>
        </div>
    </div>
</div>
<div class="controls" data-mw-target="demo-tiles-live-group-2">
    <div class="indicators indicators-3">
        <ul class="u-list-unstyled">
            <li class="indicator active" data-mw-page><a href="#tiles-live-group-21"></a></li>
            <li class="indicator" data-mw-page><a href="#tiles-live-group-22"></a></li>
            <li class="indicator" data-mw-page><a href="#tiles-live-group-23"></a></li>
        </ul>
    </div>
</div>

Dialogable Behavior

You can add a dialogable behavior on a element.
To add a dialogable behavior, you must add the data attribute data-mw-dialogable on a element.
To customize your dialogable behavior, you must add options with the following syntax data-mw-dialogable='{"keyOption": "stringValue", "keyOption": numberValue, "keyOption": booleanValue}'.

Option Type default description
isEnabled boolean true

This option defines if the element is checkable. 

<button type="button" class="btn btn-default" data-mw-target="dialog-example" data-mw-open>Open Dialog</button>
<div id="dialog-example" class="modal" role="dialog" hidden data-mw-dialogable>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-mw-close><span>×</span></button>
                <h4 class="modal-title">Dialog title</h4>
            </div>
            <div class="modal-body">
                <!-- Write your body dialog here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-mw-close>Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Inheritable Behavior

You can add a inheritable behavior on a element.
To add a inheritable behavior, you must add the data attribute data-mw-inheritable on a element.
You override the inherit value if you set the new value on the element.
To customize your inheritable behavior, you must add options with the following syntax data-mw-inheritable='{"keyOption": "stringValue", "keyOption": numberValue, "keyOption": booleanValue, "keyOption": {}}'.

Option Type default description
isEnabled boolean true

This option defines if the element is inheritable.

dataAttribute Array<KeyValue> null

This option defines an array to dataAttribute to set on each child.

key string null

This option defines the attribute name to set on each child.

value any null

This option defines the attribute value to set on each child. 

<div data-mw-inheritable="{"dataAttribute": [{"key": "mwClickable", "value": {"isEnabled": true, "number": 123}}, {"key": "mwSelectable", "value": {"isEnabled": true, "isSelected": true}}]}">
    <div data-mw-clickable="{"isEnabled":true,"number":123}" data-mw-selectable="{"isEnabled":true,"isSelected":true}" class="mw-clickable mw-selectable mw-selected"></div>
    <div data-mw-clickable="{"isEnabled":false,"number":123,"bidon":1}" data-mw-selectable="{"isEnabled":true,"isSelected":true}" class="mw-selectable mw-selected"></div>
    <div data-mw-clickable="{"isEnabled":true,"number":123}" data-mw-selectable="{"isEnabled":true,"isSelected":true}" class="mw-clickable mw-selectable mw-selected"></div>
</div>
<div data-mw-inheritable='{"dataAttribute": [{"key": "mwClickable", "value": {"isEnabled": true, "number": 123}}, {"key": "mwSelectable", "value": {"isEnabled": true, "isSelected": true}}]}'>
    <div></div>
    <div data-mw-clickable='{"isEnabled": false, "bidon": 1}'></div>
    <div></div>
</div>