API.md

Mask

"mask" is used for prevent user action during running the application.

How to initialize the properties of the UI, there are two. You can pass the property values of the UI to setConfig. Using the new you can pass when you initialize the UI.

setConfig

setConfig([options, callInit=true])

var mask = new ax5.ui.mask();
mask.setConfig({
    zIndex: 1000, 
    content: 'Loading content',
    onStateChanged: function(){
        console.log(this);
    },
    onClick: function(){
        console.log(this);
    }
});

Easy Way - without setConfig

var mask = new ax5.ui.mask({
    zIndex: 1000, 
    content: 'Loading content',
    onStateChanged: function(){
       console.log(this);
    },
    onClick: function(){
        console.log(this);
    }
});

{
    [position: {String} - absolute|fixed, ]
    [target: {Element} - target of mask,]
    [theme: {String} - addClass mask,]
    [zIndex: {Number},]
    [content: "content of mask",]
    [onStateChanged: {Function}, ]
    [onClick: {Function}]
}

---

open([config])

var mask = new ax5.ui.mask();

$('#mask-open').click(function () {
    mask.open();
});

with config

mask.open({
    target: $('#id').get(0),
    content: 'mask'
});

---

close([delay])

var mask = new ax5.ui.mask();

$('#mask-close').click(function () {
    mask.close();
});

---

Using SASS

src/css/_ax5mask_variables.css file, there is a variable to be used in the ax5mask. You can be compiled by overriding variables.

$ax5mask-z-index: 1000 !default;
$ax5mask-bg-opacity: 0.6 !default;

$ax5mask-bg: #000 !default;
$ax5mask-text-color: #fff !default;
$ax5mask-text-shadow:0px 1px 0px #000 !default;

src/ax5mask.css file, you can declare a variable on import of syntax.

$ax5mask-bg: #000;
@import "ax5mask";

Make theme

In some cases, you may need to extend the mask theme. When you add the syntax of the following CSS, you can easily extend the mask theme.

<style type="text/css">
    .ax-mask.danger .ax-mask-bg {
        background: #7a0000;
    }
</style>

And you can use it to add the theme property of the setConfig and open methods

mask.open({
    theme:'danger'
});