Skip to content
Beecher edited this page Sep 29, 2015 · 4 revisions

Methods

The following methods are available to you after init.

(note: or you can just call show(args) and the args will be passed to init(args)):

  • _mb.show(args);
    • advanced args :

       	var args = {
       			header: 'header content with <span>markup</span>',
       			body: 'body content with <span>markup</span>, if you're into that kinda thing ...',
       			footer: 'footer content without markup, but this can take markup too.',
       			addClass : 'the_class_you_want_to_add_to_the_wrap or_classes',
       			showFor : 5000 // number of milliseconds to show the modal for, before hiding it automatically
       		};
    • most basic example :

       	_mb.show({body : 'hello'});
  • _mb.hide(); - you guessed it.
    • this is also called by, hitting the ESC key, clicking close button, or anything outside the content wrap.

Confirm / Prompt

  • Based on the window.confirm method, but with greater styling and functional possibilities.

  • We're using a "yarp/narp" convention instead of "confirm/cancel".

  • Specify button text like (defaults to 'confirm' and 'cancel'):

     var confrimArgs = {
     	yarp : {
     		text: "the confirm button text",
     		disabled: true // optional
     	},
     	narp : { 
     		text: { // if you want translations
     			"en" : "cancel in english",
     			"es" : "como se dice, 'cancel'?"
     		}
     	}
     };
     
     // then you'd pass it to the show method like
     _mb.show({
     		body: "whatever?",
     		confirm: confrimArgs
     	});
  • Specify functionality within the callbacks 'yarp' and 'narp' :

     var confirmAction = function(_mb) {
     		// whatver you want, really ...
     	},
     	cancelAction = function(_mb) {
     		// whatver you want, really ...
     	};
     	
      _mb.show({
      		body: "whatever?",
      		callbacks: {
      			yarp : confirmAction,
      			narp : cancelAction
      		}
      	});

Translations

  • tries to grab the "lang" property from the html tag (defaults to "en"). (see ref for iso codes here)

  • you can manually override this: _mb.state.lang = "jp";

  • to use this feature you can:

    • ignore it and just provide single strings.

    • provide translation objects like :

       	var hello = {
       			"en" : "hello",
       			"es" : "hola",
       			"fr" : "bonjour"
       			// ... etc
       		};
  • you can call this method directly like :

     	var hello = {
     			"en" : "hello",
     			"es" : "hola",
     			"fr" : "bonjour"
     			// ... etc
     		};
     	// auto lang choice ...
     	var helloTranslated = _mb.translate(hello);
     	// or override for aspecific lang ...
     	var helloFrance = _mb.translate(hello, 'fr');

Clone this wiki locally