Mobox.UI

v1.0.7

Download Demos

Follow Levin Van Star Fork

Installation

Manually

Include modernizr.js, classy.js, Snap.svg(optional) and the essential css styles in the <head> tag

Your custom build of modernizr must contain cssanimations, csstransforms3d, and csstransitions
Snap.svg is required when Mobox is using a SVG animation effect


<script src="/path/to/mobox/dist/vendors/modernizr/modernizr.custom.min.js"></script>
<script src="/path/to/mobox/dist/vendors/classor/dist/classy.min.js"></script>
<script src="/path/to/mobox/dist/vendors/Snap.svg/dist/snap.svg.min.js"></script>
<link rel="stylesheet" href="/path/to/mobox/dist/css/mobox.css"/>

Include mobox effects's css style in the <head> tag

You can either choose the bundled effect.css or just the indivial effect that you want.

The bundled effect.css


<link rel="stylesheet" href="/path/to/mobox/dist/css/effects.css"/>

15 kinds of indivial effects


<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-lv.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-nornor.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-dg.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-panther.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-lava.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-anna.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-piggy.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-xmagic.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-bruce.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-shine.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-aiden.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-albin.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-alex.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-kimi.css"/>
<link rel="stylesheet" href="/path/to/mobox/dist/css/effect-jose.css"/>

Prepare mobox's html template

Mobox requires different template according to the chosen effect

For example, if you use the effect dg, you should include the following templates in your page.

Add the mobox.js to your page:

<script src="/path/to/mobox/dist/js/mobox.min.js"></script>

Or, load the mobox.js using your AMD loader like ```requirejs```

define(['mobox'],function(mobox){/* module logic goes here */});

Via Bower

bower install mobox --save

API

#static

Create a mobox using specified options


var mobox = Mobox.create({
    /**
     * mobox template, a template id or template dom object
     */
    tpl:'demoTpl1',
    /**
     * show the mobox after being created
     */
    autoShow:true,
    /**
     * mobox effect, default is 'lv'
     */
    effect:'dg',
    /**
     * prevent closing the mobox when clicking on the mobox overlay
     */
    sticky:true,
    /**
     * element actions inside the mobox
     */
    actions:{
        //simple click action on element with id 'actionA'
        actionA:function(obj){
            alert(obj.el.id+' was clicked!!!');
        },
        //complex action with specified event name
        actionB:{
            evtName:'mouseover',
            func:function(obj){
                alert(obj.actionKey + ' was '+obj.evtName);
            }
        },
        //an action that switching scene
        actionScene:function(obj){
            this.showScene('spin',{
                'btn-action':{
                    'attrs':{
                        'title':'Do not close me!!!'
                    }
                }, 
                title:'I AM A TITLE, I AM LOADING...'
            });
        }
    } 
});

Run

#prototype

show a mobox


//show a mobox
mobox.show();

show a mobox, update the innerHTML of the element with class 'mobox-title'


mobox.show({
    title:'hi, i am a mobox'
});

show a mobox, update the title attribute of the element with attribute 'data-xxx'


mobox.show({
    xxx:{
        attrs:{
            title:'hi, i am a title attribute updated by mobox'
        }
    }
});

See the demo

#prototype

hide a mobox


//hide a mobox
mobox.hide();

#prototype

switch to the scene spin


//switch to the mobox scene element with class named 'mobox-scene mobox-scene-spin' 
mobox.showScene('spin');

switch to the scene spin, and apply data to that scene, similar to the show method.


mobox.showScene('spin', {
    'btn-action':{
        'attrs':{
            'title':'Do not close me!!!'
        }
    }, 
    title:'I AM A TITLE, I AM LOADING...'
});

Mobox support switching multiple scenes
A Mobox scene's className should adhere to the convention mobox-scene mobox-scene-xxx, where the xxx is the scene's name
You must provide a default scene mobox-scene mobox-scene-default when using the scene feature

See the demo

Build

To build `mobox` from sources you need to install Gulp

$ npm install gulp -g

Then navigate in terminal to the downloaded sources and install some required modules

$ npm install gulp gulp-uglify gulp-swig gulp-rename

Then run Gulp

$ gulp

You can take compressed and optimized files from dist folder

Created by Levin Van, 2015

Site built with awesome Semantic UI