MavBox 0.3

Provides MavBox and MavBox.Media for the displaying of lightbox / Dialog styled windows for text, media, and webpages.



Details

Author
Dustin Hansen
Current version
0.3
GitHub
dcdustin/MavBox
Downloads
6381
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • core/1.2.4: [Class, Class.Extras, Event, Element.Event, Element,Style, Element.Dimensions, Selectors, JSON, Fx.Tween, Fx.Morph, Fx.Transitions, Request.HTML, Request.JSON]
    • more/1.2.4.2: [Class.Binds, Drag.Move]

How to use

These are the basic classes used by MavBox

    #CSS
    /* CONTAINER ELEMENT */
    .mavbox { position: absolute; display: none; z-index: 1000; }

    /* USED IF NO TITLEBAR IS SET */
    .mavbox .mavbox-notitle { }

    /* USED IF NO BUTTONS ARE SET */
    .mavbox .mavbox-nobuttons {  }

    /* TITLEBAR ELEMENT */
    .mavbox > div.mavbox-titlebar { }
    .mavbox > div.mavbox-movable { cursor: move !important; }
    .mavbox > div.mavbox-titlebar > .mavbox-titletext {  }
    .mavbox > div.mavbox-titlebar > div.mavbox-button { }
    .mavbox > div.mavbox-titlebar > div.mavbox-button:hover { }
    .mavbox div.mavbox-titleclose { }
    .mavbox div.mavbox-titlemin { }
    .mavbox div.mavbox-titlemin-restore { }
    .mavbox div.mavbox-titlemax { }
    .mavbox div.mavbox-titlemax-restore { }

    /* BOX'S MESSAGE AREA */
    .mavbox > div.mavbox-message { overflow: auto; }

    /* BUTTON AREA */
    .mavbox > div.mavbox-buttonarea { }
    .close-button { }

    /* BOX'S BUTTONS */
    .mavbox > div.mavbox-buttonarea > .mavbox-button { }

See the documentation for full options, but this is an average instantiation.

    #JS
    mavbox = new MavBox({
            'id': 'myMavBox',
            'width': 450,
            'maxHeight': '300px',
            'modal': true, 
            'draggable': true,
            'blurHides': false,
            'keyboardAccess': true,
            'persistent': true,
            'message': "This is a very nice box you've placed me in, thank you.",
            'title': 'A Nice little MavBox',
            'titleButtons': {'close':true,'max':true,'min':true},
            'buttons': [{
                    'text': 'close',
                    'id': 'myButtonID',
                    'class': 'no-class-thanks'
            }]
    });

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus