MH_UI Documentation

For each component will be provided a short description, all the options and some example

If you spot a bug please use the GithHub Issue Tracker, for info please email me at info[at]matteohetel.com

Overview

MH_UI

The purpose of this library is to provide a way to create interactive UI component such modal and toast in JavaScript without bother the developer to create the DOM element and insert HTML and CSS inside the JavaScript code, to make the code more readable, clean and have a HTML/CSS separate from the JS file or script.

Here some info about the UI.

Why should I use this UI?

Beacause it's awesome, you can create very complex UI element with a very few line of code, each component is highly configurable but with the default option you can create very cool stuff with one line of code, and the best part is: You can change the default configuration one time and every component create will be based on the new configurations!

Dependencies

MH_UI relies on two different dependencies: jQuery, Twitter's Bootstrap both CSS and JS

Is this library a Framework

Of course not, it's just a simple library with one goal: make your life easier when you want to create interactive UI element in JavaScript

Can I contribute?

PLEASE! fork the github repo, play with it mess around with the component and send a pull request with your code, the more the merrier!

Modal UI.modal({options})

About modals

The modal is a component different from the other components, the default behavior is to be created, appended to the body and be displayed straightaway.

Usage

To create a modal use UI.modal({options}) no short hand is provided for this component
List of options:

Name Description Example Default value
title string/object, html for the title(jQuey .append is used) {title : "<h4>Modal Title</h4>"} None
body string/object, html for the body(jQuey .append is used) {body : "<p>This is the modal content</p>"} None
footer string/object, html for the footer(jQuey .append is used) {footer : UI.button("UI button")} None
defaultFooter boolean, if true is passed the default close button will be added to the modal {defaultFooter : true} true
id string, an optional id can be passed, if none is provided a random id will be used {id : "my_id"} random generated ID
show boolean, if true is passed the modal will automatically displayed, otherwise the .show() method is required to show the modal {show : true} true
callback function, a callback function that will be executed once the modal is displayed {callback : function(){console.log("Modal created")}} None

Return object

UI.modal({option}) return an array object with the following properties and method

Name Description Usage
index 0 ([0]) the HTML of the modal it can be appended like a common jQuery object
title any HTML passed to this function will replace the title of the modal UI.modal({title:"<h4>Modal Title</h4>"}).title("<h4>New Title</h4>")
titleAppend any HTML passed to this function will be appended to the title of the modal UI.modal({title:"<h4>Modal Title</h4>"}).titleAppend("<small>Subtitle</small>")
body any HTML passed to this function will replace the body of the modal UI.modal({body:"<p>Modal content</p>"}).body("<p>New content</p>")
bodyAppend any HTML passed to this function will be appended to the body of the modal UI.modal({body:"<p>Modal Content</p>"}).bodyAppend("<p>new paragraph </p>")
footer any HTML passed to this function will be appended to the footer of the modal UI.modal({footer:"<p>Footer content</p>"}).footer(UI.button("button"))
show no parameters are required, if the function is called the modal is showed UI.modal({show:false}).show()
hide no parameters are required, if the function is called the modal is hided and destroyed UI.modal({show:true}).hide()
data object, an object with the the name as key and as value the value for the data- element {data : {hello: "world", foo: "bar"}} None

Working Example

UI.button({id:"modal_render", text:"Run the code", level:"success"})

Progressbar UI.progressbar({options})

About progressbar

Progressbars can be used to give a visual feedback of a pending opration or to a placeholder for a content not already loaded.

Usage

To create a progressbar use UI.progressbar({options}) for this component the short hand UI.progressbar(integer) is provided, the passed integer will be the percentage of the progressbar, the default values are used to create the progressbar, check the Extra section to learn more about the default values
List of options:

Name Description Example Default value
level string, the Twitter's Bootstrap level code(success, info, danger, warning) {level : "success"} None
percentage integer, the percentage of the width of the progressbar {percentage : 100} 100
striped boolean, if true is passed the progressbar will be striped {striped :true} true
active boolean, if true is passed the class active will be added to the progressbar {active : true} true
id string, an optional id can be passed, if none is provided a random id will be used {id : "my_id"} random generated ID
class string, the passed class will be added to the component {class : "my_class"} true
data object, an object with the the name as key and as value the value for the data- element {data : {hello: "world", foo: "bar"}} None
callback function, a callback function that will be executed once the modal is displayed {callback : function(){console.log("Modal created")}} None

Return object

UI.progressbar({option}) or UI.progressbar(integer) return an array object with the following properties and method

Name Description Usage
index 0 ([0]) the HTML of the progressbar it can be appended like a common jQuery object
animate this function will animate the progressbar to the given percentage UI.modal(0).animate(integer/object)
animate the animte function accepts an integer or a object, the integer represent the millisecond to animate the width to 100% UI.modal(0).animate(500)
animate the animte function accepts an integer or a object, the object can contain: time: millisecond, percentage: widht in percentage, callback: function UI.modal(0).animate({time: 500, percentage: 50, callback:function(){console.log("callback fired")}})

Working Example

UI.button({id:"progressbar_render", text:"Run the code", level:"success"})

Button UI.button({options})

About button

Buttons are basic component to intercat with the user.

Usage

To create a button use UI.button({options}) for this component the short hand UI.button(string) is provided, the passed string will be the text of the button, the default values are used to create the button, check the Extra section to learn more about the default values
List of options:

Name Description Example Default value
level string, the Twitter's Bootstrap level code(success, info, danger, warning, link) {level : "success"} None
text string, the text of the button {text : "Hello, World!"} None
disabled boolean, if true is passed the button will be disabled {disabled :true} false
default boolean, if the value is false the default btn and btn- classes will not be added to the button {default : false} true
size string, Twitter's Bootstrap button size (xs, sm, lg) {size : "lg"} None(normal size)
id string, an optional id can be passed, if none is provided a random id will be used {id : "my_id"} random generated ID
class string, the passed class will be added to the component {class : "my_class"} true
data object, an object with the the name as key and as value the value for the data- element {data : {hello: "world", foo: "bar"}} None
actions object, an object with the the action as key and as value the function that will be fired at that event {actions : {click: function(){console.log("click")}, mouseleave:function(){$(this).addClass("disabled")}}} None
callback function, a callback function that will be executed once the modal is displayed {callback : function(){console.log("Modal created")}} None

Return object

UI.button({option}) or UI.button(string) return an array object with the following properties and method

Name Description Usage
index 0 ([0]) the HTML of the progressbar it can be appended like a common jQuery object
changeText any HTML passed to this function will replace the text of the button UI.button("Text").changeText("newText")
addActions this function accept an object with the the action as key and as value the function that will be fired at that event UI.button("click me").addActions({click: function(){alert("hello")}})

Working Example

UI.button({id:"button_render", text:"Run the code", level:"success"})

Alert UI.alert({options})

About alert

An alert is a banner that inform the user that something happened

Usage

To create an alert use UI.alert({options}) for this component the short hand UI.alert(string) is provided, the passed string will be the HTML of the alert, the default values are used to create the alert, check the Extra section to learn more about the default values
List of options:

Name Description Example Default value
level string, the Twitter's Bootstrap level code(success, info, danger, warning) {level : "success"} info
HTML string, the html of the alert {html : "<h4>Hello, World!</h4>"} None
dismissable boolean, if true is passed the "x" button to close the alert will be added {dismissable :true} true
id string, an optional id can be passed, if none is provided a random id will be used {id : "my_id"} random generated ID
class string, the passed class will be added to the component {class : "my_class"} true
data object, an object with the the name as key and as value the value for the data- element {data : {hello: "world", foo: "bar"}} None
time integer/object, if time is integer that value will be used to make the alert disappear after {time} seconds, in and object is passed it can contain: time: millisecond after the alert will be destroyed, effect: the jQuery effect like slideUp, FadeOut, effectTime: how long the effect will be performed {time : {time: 1000, effect: "slideUp", efectTime: 500}} None
callback function, a callback function that will be executed once the modal is displayed {callback : function(){console.log("Modal created")}} None

Return object

UI.alert({option}) or UI.alert(string) return an array object with the following properties and method

Name Description Usage
index 0 ([0]) the HTML of the progressbar it can be appended like a common jQuery object
timeOut integer/object can be passed, if time is integer that value will be used to make the alert disappear after {time} seconds, in and object is passed it can contain: time: millisecond after the alert will be destroyed, effect: the jQuery effect like slideUp, FadeOut, effectTime: how long the effect will be performed UI.alert("Text").timeOut({time: 1000, effect: "slideUp", efectTime: 500})
append any HTML passed to this function will be added to the alert UI.alert("<h4>Hello, World!</h4>").append("<p>I was added by the append functiony!</p>")

Working Example

UI.button({id:"alert_render", text:"Run the code", level:"success"})

Toast UI.toast({options})

About toast

A toast according to microsoft is :"A transient message to the user that contains relevant, time-sensitive information and provides quick access to related content in an app."

Usage

A toast is nothing more than an alert floating on the screen so all the options of an alert can be passed to UI.toast({options}) for this component the short hand UI.toast(string) is provided, the passed string will be the HTML of the toast, the default values are used to create the alert, check the Extra section to learn more about the default values
List of options:

toast accepts another options

Name Description Example Default value
position string/object, the position of the toast, there are 4 predefined position: top-left, top-right, bottom-left, bottom-right, if you want to create the toast in a different location you can pass on object with the css properties like right, top etc, every element will be passed to the jQuery .css() {position : "bottom-left"} top-right

Return object

UI.toast({option}) or UI.alert(string) return an array object the same as UI.alert(), please see Alert documentation for more info

Working Example

UI.button({id:"toast_render", text:"Run the code", level:"success"})

Extra

Extend

The default value for every component can be changed using the extend method

Usage

UI.extend("name", {options})

For example the toast as the default position to top-right on the screen and info as level, the developer can change that default value
by using UI.extend("toast", {level:"success", position:"bottom-left"})

Working Example

UI.button({id:"extra_render", text:"Run the code", level:"success"})

Destroy

Destroy all the coponent create via the UI

Usage

UI.destroy()

Working Example

UI.button({id:"extra2_render", text:"Run the code", level:"success"})

Tips & Tricks

Since the library was just released no tips or tricks are available at the moment.

Do you have a tip or trick you want to share?

Please send me and email at info[at]matteohetel.com!